/* Phoenix: mobile-first, dark only; tokens from tokens.css (library/brand),
   the kit's "painel" register (design/2026-09-30-phoenix-ui-direction.md).
   Ink tiers: --phx-ink-strong (amounts, h1, active tab), --gle-ink (body),
   --phx-quiet (meta, the guide). Orange means something: the primary, the
   brand cluster and rule, the band's lit pixels, the 2px rule on a card that
   needs you, the primary verb, the missing chip (as text: --gle-accent-tint).
   Text >= 4.5:1, borders >= 3:1, 44 px targets, 2px focus ring, pressed =
   translateY(1px), motion off under reduced motion. */

/* --- Fonts: ?v= is the content hash; base.html preloads the same URLs (tested) */

@font-face {
  font-family: "Neue Montreal";
  src: url("fonts/NeueMontreal-Regular.woff2?v=c93d24917a") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("fonts/NeueMontreal-Medium.woff2?v=dc03253687") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("fonts/NeueMontreal-Bold.woff2?v=5f096114c2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* General Sans only for º ª, which Neue Montreal lacks; the range stops a
   download for ✓ ● ✕ (system glyphs). */
@font-face {
  font-family: "General Sans";
  src: url("fonts/GeneralSans-Regular.woff2?v=3ec2be771c") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+00AA, U+00BA;
}
@font-face {
  font-family: "General Sans";
  src: url("fonts/GeneralSans-Medium.woff2?v=c30377df1d") format("woff2");
  font-weight: 500 700;
  font-display: swap;
  unicode-range: U+00AA, U+00BA;
}

/* --- Local tokens (built only from kit tokens) */

:root {
  color-scheme: dark;
  /* steel-500 on the raised fill is 4.3:1: a control border, not a hairline */
  --phx-control-border: var(--gle-steel-500);
  --phx-ink-strong: var(--gle-steel-100);
  /* steel-500: 5.1:1 on the page, 4.8:1 on a card, 4.6:1 on a hovered card --
     never on the raised fill (4.4:1) */
  --phx-quiet: var(--gle-steel-500);
  --phx-surface-hover: color-mix(in srgb, var(--gle-surface) 50%, var(--gle-surface-raised));
  --phx-accent-text: var(--gle-accent-tint);
  --phx-focus-ring: var(--gle-accent-tint);
  --phx-error-border: var(--gle-orange);
  --phx-tap: 44px;
  --phx-shell-narrow: 36rem;
  --phx-shell-wide: 75rem;
  --phx-scrim: color-mix(in srgb, var(--gle-navy-deep) 82%, transparent);
  --phx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* the header's fixed geometry: every page's h1 lands at the same y */
  --phx-brand-h: 56px;
  --phx-nav-h: 44px;
  --phx-band: 64px;
}

@media (min-width: 768px) {
  :root {
    --phx-brand-h: 72px;
    --phx-nav-h: 48px;
    --phx-band: 80px;
  }
}

/* --- Base */

* {
  box-sizing: border-box;
}

html {
  /* a literal first: a browser that drops the var still paints the dark surface */
  background-color: #0a1016;
  background-color: var(--gle-bg);
  /* a focused field scrolls into view above the sticky action bar */
  scroll-padding-block: var(--gle-space-4) 7rem;
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  background: var(--gle-bg);
  color: var(--gle-ink);
  font-family: var(--gle-font-body);
  font-weight: var(--gle-font-body-weight);
  font-size: var(--gle-text-base);
  line-height: var(--gle-leading-normal);
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
}

a {
  color: var(--gle-ink);
  text-decoration-color: var(--gle-steel-500);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: currentColor;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--phx-focus-ring);
  outline-offset: 2px;
}

::selection {
  background: var(--gle-orange-deep);
  color: var(--gle-paper);
}

.phx-num,
.phx-amount,
.phx-item__amount,
.phx-dates,
.phx-filter__n {
  font-variant-numeric: tabular-nums;
}

/* `hidden` wins over any display a component sets (Colei à mão, the picker buttons). */
[hidden] {
  display: none !important;
}

.phx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- The top band: dot matrix, lit pixels (templates/_band.html) */

.phx-band {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--phx-band);
  pointer-events: none;
}

.phx-band--full {
  --phx-band: 300px;
}

.phx-band circle {
  fill: var(--gle-steel-600);
}

.phx-band__field {
  opacity: 0.92;
}

.phx-band__lit {
  fill: var(--gle-accent);
}

.phx-band__lit--soft {
  fill: var(--gle-accent-tint);
  opacity: 0.7;
}

/* Desktop edges: two faint dot-field strips at the page edges, fading toward the
   content and downward (templates/_band.html). No layout, no click, no request. */
.phx-edge {
  display: none;
}

@media (min-width: 1440px) {
  .phx-edge {
    display: block;
    position: absolute;
    top: 0;
    width: 140px;
    height: 65vh;
    pointer-events: none;
    opacity: 0.55;
    background-image: radial-gradient(circle at 6px 6px, var(--gle-steel-600) 1px, transparent 1.4px);
    background-size: 12px 12px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent), linear-gradient(var(--phx-edge-dir), #000, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, #000, transparent), linear-gradient(var(--phx-edge-dir), #000, transparent);
    mask-composite: intersect;
  }

  .phx-edge--l {
    --phx-edge-dir: to right;
    left: 0;
  }

  .phx-edge--r {
    --phx-edge-dir: to left;
    right: 0;
  }
}

@media (min-width: 960px) {
  .phx-band--full {
    --phx-band: 380px;
  }
}

/* --- Shell, header, nav */

.phx-shell {
  position: relative;
  max-width: var(--phx-shell-wide);
  margin: 0 auto;
  padding: var(--gle-space-2) var(--gle-space-4) var(--gle-space-12);
  min-height: 100dvh;
}

/* One frame for every page: the shell (header, rule, nav, banners) is always the wide
   width, so nothing in it moves between pages. Only the content column varies: narrow
   and left-aligned under the brand, or the full width on the pages that use it. */
html {
  scrollbar-gutter: stable;
}

.phx-main {
  max-width: calc(var(--phx-shell-narrow) - 2 * var(--gle-space-4));
}

.phx-main--wide {
  max-width: none;
}

@media (min-width: 960px) {
  .phx-shell {
    padding-inline: var(--gle-space-6);
  }
}

.phx-skip {
  position: absolute;
  left: var(--gle-space-4);
  top: -100px;
  z-index: 20;
  background: var(--gle-surface-raised);
  color: var(--gle-ink);
  border: 1px solid var(--phx-control-border);
  border-radius: var(--gle-radius-sm);
  padding: var(--gle-space-3) var(--gle-space-4);
}

.phx-skip:focus {
  top: var(--gle-space-2);
}

.phx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gle-space-3);
  height: var(--phx-brand-h);
}

.phx-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--gle-space-3);
  min-width: 0;
  min-height: var(--phx-tap);
  color: var(--gle-ink);
  text-decoration: none;
}

.phx-brand__mark {
  flex: none;
  width: 18px;
  height: 18px;
  fill: var(--gle-accent);
}

.phx-brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.phx-brand__row {
  display: flex;
  align-items: center;
  gap: var(--gle-space-2);
}

.phx-brand__name {
  font-family: var(--gle-font-display);
  font-weight: var(--gle-font-display-weight);
  font-size: var(--gle-text-xl);
  line-height: 24px;
  letter-spacing: var(--gle-tracking-display);
  color: var(--phx-ink-strong);
}

/* Test mode: a tag beside the wordmark (the full sentence in its title). */
.phx-tag {
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: var(--phx-accent-text);
  font-size: var(--gle-text-xs);
  font-weight: var(--gle-font-label-weight);
  line-height: 16px;
  letter-spacing: var(--gle-tracking-label);
  text-transform: uppercase;
}

.phx-brand__tagline {
  font-size: var(--gle-text-xs);
  line-height: 16px;
  color: var(--gle-muted);
  white-space: nowrap;
}

/* The user area: the Buscar magnifier, then "Nome · Sair", on the wordmark's line. */
.phx-user {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--gle-space-1);
  align-self: flex-start;
  margin-top: calc((var(--phx-brand-h) - 40px) / 2 - 10px);
}

.phx-searchlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--phx-tap);
  height: var(--phx-tap);
  border-radius: var(--gle-radius-sm);
  color: var(--gle-muted);
  transition: color var(--gle-duration-fast) ease;
}

.phx-searchlink svg,
.phx-search__icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.phx-searchlink:hover,
.phx-searchlink[aria-current="page"] {
  color: var(--phx-ink-strong);
}

.phx-searchlink:active {
  transform: translateY(1px);
}

.phx-logout button {
  display: inline-flex;
  align-items: center;
  gap: var(--gle-space-2);
  min-height: var(--phx-tap);
  padding: 0 var(--gle-space-1);
  background: none;
  border: 0;
  color: var(--gle-ink);
  font-size: var(--gle-text-sm);
  white-space: nowrap;
  cursor: pointer;
}

.phx-logout__name,
.phx-logout__sep {
  color: var(--gle-muted);
}

.phx-logout button:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* phone: the tagline keeps one line, under "Sair" if it must */
@media (max-width: 767.98px) {
  .phx-brand {
    flex: 1 1 auto;
  }

  .phx-brand__tagline {
    width: max-content;
    max-width: calc(100vw - 2 * var(--gle-space-4) - 30px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 768px) {
  .phx-brand__tagline {
    font-size: 0.8125rem;
  }
}

/* The header's one orange line, with a quiet sheen fading into steel. */
.phx-rule {
  height: 2px;
  background: linear-gradient(90deg, var(--gle-accent) 0 16%, var(--gle-accent-tint) 34%, var(--gle-steel-600) 62%, transparent);
}

/* Login: the same brand block, larger -- the brand moment. */
.phx-shell--login .phx-header {
  height: auto;
  padding: var(--gle-space-12) 0 var(--gle-space-6);
}

.phx-shell--login .phx-brand__mark {
  width: 28px;
  height: 28px;
}

.phx-shell--login .phx-brand__name {
  font-size: var(--gle-text-3xl);
  line-height: 1.15;
}

.phx-shell--login .phx-brand__tagline {
  width: auto;
  max-width: 100%;
  font-size: var(--gle-text-base);
  line-height: 1.4;
  white-space: normal;
}

.phx-shell--login main {
  margin-top: var(--gle-space-8);
}

/* Login: the form under the brand, and from 1024px a quiet brand panel balances the
   page (the form in 5 of 12 columns, the panel in 7). Below 1024px the panel is gone. */
.phx-login__brand {
  display: none;
}

.phx-login__form {
  max-width: calc(var(--phx-shell-narrow) - 2 * var(--gle-space-4));
}

@media (min-width: 1024px) {
  .phx-login {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gle-space-8);
  }

  .phx-login__form {
    grid-column: 1 / span 5;
    max-width: none;
  }

  .phx-login__brand {
    position: relative;
    isolation: isolate;
    grid-column: 6 / span 7;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--gle-space-4);
    padding: var(--gle-space-8);
    border: 1px solid var(--gle-line);
    border-radius: var(--gle-radius-sm);
    background: var(--gle-surface);
    overflow: hidden;
  }

  /* the band's dot field, fading toward the text */
  .phx-login__brand::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* present, not faint: the panel is the dot matrix itself, easing toward the line */
    background-image: radial-gradient(circle at 6px 6px, var(--gle-steel-500) 1.2px, transparent 1.6px);
    background-size: 12px 12px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0.55) 60%, rgb(0 0 0 / 0.12) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0.55) 60%, rgb(0 0 0 / 0.12) 100%);
  }

  .phx-login__mark {
    width: 40px;
    height: 40px;
    fill: var(--gle-accent);
  }

  .phx-login__line {
    max-width: 28rem;
    margin: 0;
    font-size: var(--gle-text-xl);
    line-height: 1.5rem;
    font-weight: var(--gle-font-label-weight);
    color: var(--gle-ink);
  }
}

/* Nav: tab text flush with the mark and the h1; the hit area reaches past it. */
.phx-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gle-space-6);
  height: var(--phx-nav-h);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--gle-line);
  margin: 0 0 var(--gle-space-8);
}

.phx-nav::-webkit-scrollbar {
  display: none;
}

.phx-nav a {
  --phx-tab-pad: 10px;
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--phx-tab-pad);
  margin: 0 calc(-1 * var(--phx-tab-pad));
  text-decoration: none;
  color: var(--gle-ink-soft);
  font-size: var(--gle-text-sm);
  font-weight: var(--gle-font-label-weight);
  transition: color var(--gle-duration-fast) ease;
}

.phx-nav a::after {
  content: "";
  position: absolute;
  inset: auto var(--phx-tab-pad) 0;
  height: 2px;
}

.phx-nav a:focus-visible {
  outline-offset: -2px;
}

.phx-nav__short {
  display: none;
}

/* Four tabs (finance) must fit 360-390px without sideways scroll. */
@media (max-width: 399.98px) {
  .phx-nav {
    gap: var(--gle-space-4);
  }

  .phx-nav a {
    --phx-tab-pad: 8px;
  }

  .phx-nav__long {
    display: none;
  }

  .phx-nav__short {
    display: inline;
  }
}

.phx-nav a:hover {
  color: var(--gle-ink);
}

.phx-nav a[aria-current="page"] {
  color: var(--phx-ink-strong);
}

.phx-nav a[aria-current="page"]::after {
  background: var(--phx-ink-strong);
}

/* --- Type: three tiers; titles and amounts 28/32 -> 40/44 */

h1,
.phx-pagehead__amount {
  font-family: var(--gle-font-display);
  font-weight: var(--gle-font-heading-weight);
  font-size: 1.75rem;
  line-height: 2rem;
  letter-spacing: var(--gle-tracking-display);
  margin: 0 0 var(--gle-space-6);
  color: var(--phx-ink-strong);
  overflow-wrap: anywhere;
}

h2 {
  font-family: var(--gle-font-heading);
  font-weight: var(--gle-font-heading-weight);
  font-size: var(--gle-text-lg);
  line-height: var(--gle-leading-tight);
  margin: 0 0 var(--gle-space-3);
  color: var(--gle-ink);
}

@media (min-width: 768px) {
  h1,
  .phx-pagehead__amount {
    font-size: 2.5rem;
    line-height: 2.75rem;
  }

  .phx-pagehead__amount + h1 {
    font-size: var(--gle-text-2xl);
    line-height: 1.75rem;
  }
}

p {
  color: var(--gle-ink-soft);
  margin-block: 0 var(--gle-space-3);
}

h1 + .phx-lede {
  max-width: 40rem;
  margin-top: calc(-1 * var(--gle-space-3));
  margin-bottom: var(--gle-space-6);
}

/* The eyebrow: a steel uppercase label, 12/16; every section title is one. */
.phx-eyebrow,
.phx-block__title,
.phx-group__title {
  display: flex;
  align-items: center;
  gap: var(--gle-space-2);
  margin: 0 0 var(--gle-space-3);
  font-family: var(--gle-font-label);
  font-size: var(--gle-text-xs);
  font-weight: var(--gle-font-label-weight);
  line-height: 16px;
  letter-spacing: var(--gle-tracking-label);
  text-transform: uppercase;
  color: var(--gle-ink-soft);
}

/* the lit pixel: one per view, where something needs the person */
.phx-pixel {
  display: inline-block;
  flex: none;
  width: 4px;
  height: 4px;
  background: var(--gle-accent);
}

/* "R$" rides small beside the figure, joined by a no-break space. */
.phx-cur {
  font-size: 13px;
  font-weight: var(--gle-font-label-weight);
  letter-spacing: 0;
  color: var(--gle-ink-soft);
}

/* The review and result heads: the amount at display size, then the payee. */
.phx-pagehead {
  margin-bottom: var(--gle-space-8);
}

.phx-pagehead .phx-eyebrow {
  margin-bottom: var(--gle-space-2);
}

.phx-pagehead__amount {
  margin-bottom: var(--gle-space-1);
}

.phx-pagehead__amount .phx-cur {
  font-size: 0.5em;
}

.phx-pagehead h1 {
  margin-bottom: 0;
}

.phx-pagehead__amount + h1 {
  font-size: var(--gle-text-xl);
  line-height: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--gle-ink);
}


.phx-pagehead .phx-dates {
  margin-top: var(--gle-space-2);
}

/* The dates row and the meta line: separate items, a dot between them. */
.phx-dates,
.phx-item__meta,
.phx-pagehead__meta,
.phx-pair__evidence {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
}

.phx-dates {
  font-size: 13px;
  line-height: 18px;
  color: var(--gle-ink-soft);
}

.phx-date--late {
  color: var(--phx-accent-text);
  font-weight: var(--gle-font-label-weight);
}

.phx-date--muted {
  color: var(--phx-quiet);
}

.phx-item__meta,
.phx-pagehead__meta,
.phx-pair__evidence {
  font-size: var(--gle-text-xs);
  line-height: 16px;
  color: var(--phx-quiet);
}

.phx-pagehead__meta {
  margin-top: var(--gle-space-3);
}

:is(.phx-dates, .phx-item__meta, .phx-pagehead__meta, .phx-pair__evidence) > span + span::before {
  content: "\00b7";
  content: "\00b7" / "";
  margin: 0 var(--gle-space-2);
}

/* --- Tiles: cards, banners */

.phx-card {
  background: var(--gle-surface);
  border: 1px solid var(--gle-line);
  border-radius: var(--gle-radius-sm);
  padding: var(--gle-space-4);
  margin-bottom: var(--gle-space-4);
}

@media (min-width: 600px) {
  .phx-card {
    padding: var(--gle-space-6);
  }
}

.phx-banner {
  border-radius: var(--gle-radius-sm);
  padding: var(--gle-space-2) var(--gle-space-3);
  margin-bottom: var(--gle-space-3);
  font-size: var(--gle-text-sm);
  line-height: 1.4;
  border: 1px solid var(--gle-line);
  background: var(--gle-surface);
  color: var(--gle-ink);
}

.phx-banner--info {
  border-left: 3px solid var(--gle-steel-400);
  background: var(--gle-surface-raised);
}

.phx-banner--test {
  color: var(--gle-ink-soft);
}

.phx-banner--paused {
  background: var(--gle-surface-raised);
}

.phx-banner--error {
  border-color: var(--gle-orange-deep);
  border-left: 3px solid var(--gle-accent);
  background: var(--gle-accent-wash);
}

/* --- Fields */

.phx-field {
  display: flex;
  flex-direction: column;
  gap: var(--gle-space-1);
  margin-bottom: var(--gle-space-4);
}

.phx-field label {
  font-size: var(--gle-text-sm);
  font-weight: var(--gle-font-label-weight);
  color: var(--gle-ink-soft);
}

.phx-field--required label::after {
  content: " *";
  color: var(--gle-ink-soft);
}

/* A question the reading left open: a raised tile, the question in ink. */
.phx-field--question {
  border: 1px solid var(--phx-control-border);
  border-left: 3px solid var(--gle-ink);
  background: var(--gle-surface-raised);
  border-radius: var(--gle-radius-sm);
  padding: var(--gle-space-3);
}

.phx-question-text {
  color: var(--gle-ink);
  font-size: var(--gle-text-sm);
  font-weight: var(--gle-font-label-weight);
  margin: 0 0 var(--gle-space-2);
}

.phx-field__hint {
  margin: 0;
  font-size: var(--gle-text-sm);
  color: var(--gle-muted);
}

.phx-field__error,
.phx-error {
  margin: 0;
  font-size: var(--gle-text-sm);
  font-weight: var(--gle-font-label-weight);
  color: var(--phx-accent-text);
}

.phx-field--error input,
.phx-field--error select,
.phx-field--error textarea {
  border-color: var(--phx-error-border);
  box-shadow: 0 0 0 1px var(--phx-error-border);
}

/* Low specificity (:where) so .phx-readonly and friends can override. */
:where(input[type="text"], input[type="search"], input[type="password"], input[type="file"], textarea, select) {
  color: var(--gle-ink);
  background: var(--gle-surface-raised);
  border: 1px solid var(--phx-control-border);
  border-radius: var(--gle-radius-sm);
  padding: var(--gle-space-3);
  min-height: var(--phx-tap);
  width: 100%;
  max-width: 100%;
  transition: border-color var(--gle-duration-fast) ease;
}

:where(input, textarea, select):focus-visible {
  border-color: var(--phx-focus-ring);
}

::placeholder {
  color: var(--gle-muted);
  opacity: 1;
}

input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: var(--gle-font-label-weight);
  color: var(--gle-ink);
  background: var(--gle-surface);
  border: 1px solid var(--phx-control-border);
  border-radius: var(--gle-radius-sm);
  min-height: 36px;
  padding: 0 var(--gle-space-3);
  margin-right: var(--gle-space-3);
  cursor: pointer;
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

select {
  cursor: pointer;
}

/* A value that is shown, not edited (a closed payment, a fixed field). */
.phx-readonly {
  display: block;
  min-height: var(--phx-tap);
  padding: var(--gle-space-3);
  background: var(--gle-surface);
  border: 1px solid var(--gle-line);
  border-radius: var(--gle-radius-sm);
  color: var(--gle-ink);
  overflow-wrap: anywhere;
}

/* A read-only list of label/value pairs: two columns where there is room. */
.phx-dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gle-space-1) var(--gle-space-4);
  margin: 0;
}

.phx-dl dt {
  color: var(--gle-ink-soft);
  font-size: var(--gle-text-sm);
}

.phx-dl dd {
  margin: 0 0 var(--gle-space-2);
  overflow-wrap: anywhere;
}

@media (min-width: 340px) {
  .phx-dl {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    gap: var(--gle-space-2) var(--gle-space-3);
  }

  .phx-dl dt {
    color: var(--gle-muted);
    overflow-wrap: anywhere;
  }

  .phx-dl dd {
    margin: 0;
  }
}

/* Registro codes (NF key, boleto line, Pix E2E): monospace, like the copy box. */
.phx-block .phx-readonly.phx-dl dd {
  font-family: var(--gle-font-mono);
  font-size: var(--gle-text-sm);
}

/* --- Derived output: what Phoenix generated, read-only */

.phx-derived {
  display: flex;
  flex-direction: column;
  gap: var(--gle-space-2);
  margin-top: var(--gle-space-3);
  padding: var(--gle-space-3) var(--gle-space-4);
  background: var(--gle-surface);
  border: 1px solid var(--gle-line);
  border-radius: var(--gle-radius-sm);
  font-size: var(--gle-text-sm);
  overflow-wrap: anywhere;
}

/* the payment message's copy box is its own tile: no frame around it */
.phx-derived:has(> .phx-copybox:only-child) {
  padding: 0;
  border: 0;
  background: none;
}

.phx-derived :is(p, ul, ol, pre, dd) {
  margin: 0;
  color: var(--gle-ink);
}

.phx-derived__title {
  margin: 0;
  font-size: var(--gle-text-sm);
  font-weight: var(--gle-font-label-weight);
  color: var(--gle-ink);
}

.phx-derived__key {
  margin-right: var(--gle-space-2);
  color: var(--gle-muted);
}

.phx-derived :is(.phx-derived__value, pre),
.phx-sheet-line dd {
  font-family: var(--gle-font-mono);
  font-size: var(--gle-text-sm);
  white-space: pre-wrap;
}

/* The sheet line: column names as labels. */
.phx-sheet-line dt {
  font-size: var(--gle-text-xs);
  font-weight: var(--gle-font-label-weight);
  letter-spacing: var(--gle-tracking-label);
  text-transform: uppercase;
  color: var(--gle-muted);
}

.phx-sheet-line__title {
  margin: var(--gle-space-2) 0 0;
  font-size: var(--gle-text-sm);
  font-weight: var(--gle-font-label-weight);
}

/* The fields changed after this was computed: it is recalculated on save. */
.phx-derived--stale {
  opacity: 0.65;
  border-style: dashed;
}

.phx-derived.phx-derived--stale::before {
  content: "Desatualizado";
  align-self: flex-start;
  font-size: var(--gle-text-xs);
  font-weight: var(--gle-font-label-weight);
  letter-spacing: var(--gle-tracking-label);
  text-transform: uppercase;
  color: var(--phx-accent-text);
}

/* --- Blocks (sections of the review form) */

.phx-block {
  padding-block: var(--gle-space-6) var(--gle-space-2);
  border-top: 1px solid var(--gle-line);
}

.phx-filefield {
  padding-top: var(--gle-space-3);
  border-top: 1px solid var(--gle-hairline);
}

.phx-filefield__name {
  margin: 0 0 var(--gle-space-1);
  font-size: 13px;
  color: var(--gle-ink-soft);
  overflow-wrap: anywhere;
}

/* "Gerado pelo Phoenix": the names, the folder and the sheet line, closed. */
.phx-generated > summary {
  justify-content: flex-start;
}

.phx-generated > summary::after {
  margin-left: auto;
}

.phx-generated__what {
  font-size: var(--gle-text-xs);
  font-weight: var(--gle-font-body-weight);
  color: var(--phx-quiet);
}

/* Descartar, Excluir, Desfazer par: quiet text after a hairline. */
.phx-quiet-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--gle-space-6);
  margin-top: var(--gle-space-6);
  padding-top: var(--gle-space-2);
  border-top: 1px solid var(--gle-line);
}

.phx-quiet-actions > .phx-more {
  border-top: 0;
}

.phx-quiet-actions .phx-confirm__trigger {
  padding-inline: 0;
}

.phx-quiet-actions > .phx-more[open] {
  flex-basis: 100%;
}

.phx-quiet-actions > .phx-more > summary {
  font-weight: var(--gle-font-body-weight);
  text-decoration: underline var(--gle-steel-500);
  text-underline-offset: 0.2em;
}

.phx-quiet-actions > .phx-more > summary::after {
  display: none;
}

/* Collapsed extras: "Mais campos", "Descartar". */
.phx-more {
  border-top: 1px solid var(--gle-line);
}

.phx-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gle-space-3);
  min-height: var(--phx-tap);
  padding: var(--gle-space-2) 0;
  cursor: pointer;
  list-style: none;
  color: var(--gle-ink-soft);
  font-size: var(--gle-text-sm);
  font-weight: var(--gle-font-label-weight);
}

.phx-more > summary::-webkit-details-marker,
.phx-item__more > summary::-webkit-details-marker {
  display: none;
}

.phx-more > summary::after,
.phx-item__more > summary::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--gle-duration-base) var(--phx-ease);
  flex: none;
}

:is(.phx-more, .phx-item__more)[open] > summary::after {
  transform: rotate(225deg);
}

.phx-more > summary:hover,
.phx-more[open] > summary {
  color: var(--gle-ink);
}

.phx-more > :not(summary) {
  padding-bottom: var(--gle-space-3);
}

/* --- Layout: the review page */

.phx-layout--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gle-space-4);
  align-items: start;
}

.phx-layout--split > * {
  min-width: 0;
}

@supports selector(:has(*)) {
  @media (min-width: 960px) {
    .phx-layout--split {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: var(--gle-space-6);
    }

    .phx-layout--split > .phx-preview {
      position: sticky;
      top: var(--gle-space-4);
    }
  }
}

/* --- Preview (the documents, left / on top) */

.phx-preview {
  display: flex;
  flex-direction: column;
  background: var(--gle-surface);
  border: 1px solid var(--gle-line);
  border-radius: var(--gle-radius-sm);
  overflow: hidden;
}

.phx-preview__tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  background: var(--gle-surface-raised);
  border-bottom: 1px solid var(--gle-line);
}

.phx-preview__tabs > [role="tab"] {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--phx-tap);
  max-width: 14rem;
  padding: 0 var(--gle-space-4);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--gle-ink-soft);
  font-size: var(--gle-text-sm);
  font-weight: var(--gle-font-label-weight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.phx-preview__tabs > [role="tab"]:hover {
  color: var(--gle-ink);
}

.phx-preview__tabs > [aria-selected="true"] {
  color: var(--gle-ink);
  border-bottom-color: var(--gle-ink);
  background: var(--gle-surface);
}

.phx-preview__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 45dvh;
  object-fit: contain;
  background: var(--gle-surface-raised);
}

.phx-preview__frame {
  display: block;
  width: 100%;
  height: 55dvh;
  min-height: 18rem;
  border: 0;
  background: var(--gle-surface-raised);
  color-scheme: dark;
}

.phx-preview p {
  margin: 0;
  padding: var(--gle-space-3) var(--gle-space-4);
  font-size: var(--gle-text-sm);
}

.phx-preview .phx-preview__meta {
  font-size: var(--gle-text-xs);
  color: var(--phx-quiet);
}

.phx-preview__tile {
  display: none;
}

.phx-preview__tile-kind {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 48px;
  border: 1px solid var(--phx-control-border);
  border-radius: 4px;
  color: var(--gle-ink-soft);
  font-size: var(--gle-text-xs);
  font-weight: var(--gle-font-label-weight);
  letter-spacing: var(--gle-tracking-label);
}

.phx-preview__tile-name {
  flex: 1;
  min-width: 0;
  font-size: var(--gle-text-sm);
  overflow-wrap: anywhere;
}

.phx-preview__tile-go {
  color: var(--phx-accent-text);
  font-weight: var(--gle-font-label-weight);
}

/* On a phone the document is a glance, not the whole screen above the content;
   a PDF is a file tile (its viewer is unusable at that size). */
@media (max-width: 959.98px) {
  .phx-preview__img {
    max-height: 38dvh;
  }

  .phx-preview__frame {
    display: none;
  }

  .phx-preview__tile {
    display: flex;
    align-items: center;
    gap: var(--gle-space-3);
    padding: var(--gle-space-3) var(--gle-space-4);
    color: var(--gle-ink);
    text-decoration: none;
  }

  .phx-preview__tile + p {
    display: none;
  }
}

@media (min-width: 960px) {
  .phx-preview__img {
    max-height: calc(100dvh - 10rem);
  }

  .phx-preview__frame {
    height: calc(100dvh - 10rem);
  }
}

/* --- Buttons */

.phx-actions {
  display: flex;
  flex-direction: column;
  gap: var(--gle-space-3);
  margin-top: var(--gle-space-6);
}

.phx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  min-height: var(--phx-tap);
  border-radius: var(--gle-radius-sm);
  padding: var(--gle-space-2) var(--gle-space-4);
  font-size: 0.9375rem;
  font-weight: var(--gle-font-label-weight);
  line-height: 1.25rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--gle-duration-fast) ease, border-color var(--gle-duration-fast) ease,
    transform var(--gle-duration-fast) var(--phx-ease);
}

.phx-btn:active:not(:disabled),
.phx-confirm__trigger:active,
.phx-pend__skip:active,
.phx-item__go:active,
.phx-filter__link:active,
.phx-logout button:active {
  transform: translateY(1px);
}

/* The only loud element on a page: its label navy on orange (5.6:1); hover
   lightens, so the label keeps its contrast. */
.phx-btn--primary {
  --phx-primary: var(--gle-accent);
  background: var(--phx-primary);
  color: var(--gle-navy-deep);
  border-color: var(--phx-primary);
  min-height: 48px;
}

.phx-btn--primary:hover:not(:disabled) {
  --phx-primary: color-mix(in srgb, var(--gle-accent) 86%, var(--gle-paper));
}

.phx-btn--secondary {
  background: transparent;
  color: var(--gle-ink);
  border-color: var(--phx-control-border);
}

.phx-btn--secondary:hover:not(:disabled) {
  border-color: var(--gle-ink-soft);
  background: var(--gle-surface-raised);
}

/* Quiet: for the follow-up actions that should not compete with the primary. */
.phx-btn--quiet {
  color: var(--gle-ink-soft);
  border-color: var(--gle-line);
}

.phx-btn--quiet:hover:not(:disabled) {
  color: var(--gle-ink);
  border-color: var(--phx-control-border);
}

/* The lead action beside its status line, not stretched across the page. */
@media (min-width: 600px) {
  .phx-actions--start {
    flex-direction: row;
    align-items: center;
    gap: var(--gle-space-4);
  }

  .phx-actions--start > .phx-btn {
    min-width: 12rem;
  }
}

/* A compact row under a table or a form: two halves on a phone, right-aligned from 768px. */
.phx-actions--end {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gle-space-2);
  margin-top: 0;
}

.phx-actions--end > .phx-btn {
  flex: 1 1 0;
}

@media (min-width: 768px) {
  .phx-actions--end {
    justify-content: flex-end;
  }

  .phx-actions--end > .phx-btn {
    flex: none;
  }
}

.phx-btn--danger {
  background: transparent;
  color: var(--phx-accent-text);
  border-color: var(--gle-orange-deep);
}

.phx-btn--danger:hover:not(:disabled) {
  background: var(--gle-accent-wash);
}

/* Disabled reads as inactive, not as a dimmed CTA. */
.phx-btn:disabled {
  background: var(--gle-surface-raised);
  color: var(--gle-muted);
  border-color: var(--gle-line);
  cursor: not-allowed;
}

/* Quiet text buttons ("Não precisa", "Reabrir", a balloon's trigger): still
   a 44 px target. */
.phx-pend__skip,
.phx-confirm__trigger {
  min-height: var(--phx-tap);
  padding: 0 var(--gle-space-2);
  background: none;
  border: 0;
  color: var(--gle-ink-soft);
  font-size: var(--gle-text-sm);
  text-decoration: underline;
  text-decoration-color: var(--gle-steel-500);
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color var(--gle-duration-fast) ease, transform var(--gle-duration-fast) var(--phx-ease);
}

.phx-pend__skip:hover,
.phx-confirm__trigger:hover {
  color: var(--gle-ink);
}

/* --- The confirm balloon ("Tem certeza?"): a native popover */

.phx-confirm {
  position: relative;
  display: inline-block;
}

.phx-confirm__balloon {
  width: min(20rem, calc(100vw - 2 * var(--gle-space-4)));
  margin: auto;
  padding: var(--gle-space-3) var(--gle-space-4);
  background: var(--gle-surface-raised);
  color: var(--gle-ink);
  border: 1px solid var(--phx-control-border);
  border-radius: var(--gle-radius-sm);
  box-shadow: 0 8px 24px var(--phx-scrim);
  font-size: var(--gle-text-sm);
}

.phx-confirm__balloon > p:first-child {
  margin: 0 0 var(--gle-space-1);
  color: var(--gle-ink);
  font-size: var(--gle-text-base);
  font-weight: var(--gle-font-label-weight);
}

.phx-confirm__balloon .phx-field__hint {
  margin: 0;
}

.phx-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gle-space-2);
  margin-top: var(--gle-space-3);
}

.phx-confirm__actions form {
  margin: 0;
}

/* "Não": quiet. */
.phx-confirm__actions > .phx-btn:not(.phx-btn--danger) {
  border-color: transparent;
  color: var(--gle-ink-soft);
}

.phx-confirm__balloon::backdrop {
  background: transparent;
}

/* Anchored under its button where the browser can; centred otherwise. */
@supports (anchor-scope: all) and (position-area: bottom) {
  .phx-confirm {
    anchor-scope: --phx-confirm;
  }

  .phx-confirm__trigger {
    anchor-name: --phx-confirm;
  }

  .phx-confirm__balloon {
    position-anchor: --phx-confirm;
    position-area: bottom span-right;
    position-try-fallbacks: flip-block, flip-inline;
    inset: auto;
    margin: var(--gle-space-1) 0;
  }
}

/* Popover opens with a short fade and lift. */
@supports selector(:popover-open) {
  .phx-confirm__balloon {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transition: opacity 140ms ease-out, transform 140ms var(--phx-ease),
      overlay 140ms allow-discrete, display 140ms allow-discrete;
  }

  .phx-confirm__balloon:popover-open {
    opacity: 1;
    transform: none;
  }

  @starting-style {
    .phx-confirm__balloon:popover-open {
      opacity: 0;
      transform: translateY(-4px) scale(0.98);
    }
  }
}

/* No popover support: the balloon stands inline, open. */
@supports not selector(:popover-open) {
  .phx-confirm__trigger,
  .phx-confirm__actions > button {
    display: none;
  }

  .phx-confirm__balloon {
    display: block;
    margin: var(--gle-space-2) 0;
  }
}

/* --- Action bar (sticky, holds Confirmar and says why it is disabled) */

.phx-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gle-space-2) var(--gle-space-3);
  margin-top: var(--gle-space-4);
  padding: var(--gle-space-3) 0 max(var(--gle-space-3), env(safe-area-inset-bottom));
  background: var(--gle-bg);
  border-top: 1px solid var(--gle-line);
  box-shadow: 0 -16px 16px -12px var(--phx-scrim);
}

.phx-actionbar:first-child,
.phx-generated + .phx-actionbar {
  margin-top: var(--gle-space-6);
}

.phx-actionbar .phx-btn {
  flex: 1 1 11rem;
}

/* the quieter action (Salvar e continuar depois) shares the row on a phone */
.phx-actionbar .phx-btn:not(.phx-btn--primary) {
  flex: 0 1 8.5rem;
  font-size: var(--gle-text-sm);
}

.phx-actionbar__hint {
  flex: 1 0 100%;
  order: -1;
  margin: 0;
  font-size: var(--gle-text-sm);
  line-height: 1.35;
  color: var(--gle-ink);
}

@media (min-width: 600px) {
  .phx-actionbar .phx-btn,
  .phx-actionbar .phx-btn:not(.phx-btn--primary) {
    flex: 0 1 auto;
  }

  .phx-actionbar .phx-btn--primary {
    margin-left: auto;
    order: 2;
  }
}

/* Phone, field focused: the bar stops sticking over the keyboard. */
@media (max-width: 959px) {
  form:has(input:focus, select:focus, textarea:focus) .phx-actionbar {
    position: static;
    box-shadow: none;
  }
}

/* --- Lists, groups and the one card anatomy (Meus pagamentos, Pendências, the
   pairing candidate): amount, payee, dates, a hairline, chips, meta, actions. */

.phx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gle-space-3);
}

.phx-group {
  margin: 0 0 var(--gle-space-8);
}

.phx-group > :is(ul, ol) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Long lists: the browser skips laying out the cards far below the fold. */
.phx-list > li:nth-child(n + 13) {
  content-visibility: auto;
  contain-intrinsic-size: auto 13rem;
}

.phx-count {
  padding: 0 var(--gle-space-2);
  border-radius: var(--gle-radius-pill);
  background: var(--gle-surface-raised);
  color: var(--gle-ink);
  letter-spacing: 0;
}

.phx-item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--gle-surface);
  border: 1px solid var(--gle-line);
  border-radius: var(--gle-radius-sm);
  padding: var(--gle-space-4);
  color: var(--gle-ink);
  transition: background-color var(--gle-duration-fast) ease, border-color var(--gle-duration-fast) ease,
    transform var(--gle-duration-fast) var(--phx-ease);
}

/* a card that needs you: a 2px orange rule down its left edge */
.phx-item--needs {
  box-shadow: inset 2px 0 0 var(--gle-accent);
}

.phx-item__head {
  display: flex;
  align-items: baseline;
  gap: var(--gle-space-3);
}

.phx-item__head > .phx-state {
  margin-left: auto;
}

.phx-item__amount {
  font-size: var(--gle-text-xl);
  line-height: 1.5rem;
  font-weight: var(--gle-font-label-weight);
  letter-spacing: -0.01em;
  color: var(--phx-ink-strong);
  white-space: nowrap;
}

.phx-item__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: var(--gle-space-1) 0 0;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: var(--gle-font-label-weight);
  color: var(--gle-ink);
  overflow-wrap: anywhere;
}

:is(.phx-item, .phx-item__who) > .phx-dates {
  margin-top: var(--gle-space-1);
}

/* an upload attached to another payment: its state line sits under the title, in the
   payee's column (the sentence is too long for the amount's) */
.phx-item__attached {
  margin: var(--gle-space-1) 0 0;
}

.phx-item__attached .phx-state {
  align-items: baseline;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* the chips and the quiet meta lines, together */
.phx-item__info {
  display: flex;
  flex-direction: column;
  gap: var(--gle-space-2);
  min-width: 0;
}

/* The whole card is the payee's link; the controls in it sit above. */
.phx-item__link {
  color: inherit;
  text-decoration: none;
}

.phx-item__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.phx-item__link:focus-visible {
  outline: none;
}

.phx-item:has(.phx-item__link:focus-visible) {
  outline: 2px solid var(--phx-focus-ring);
  outline-offset: 2px;
}

.phx-item:has(.phx-item__link:hover) {
  background: var(--phx-surface-hover);
  border-color: var(--phx-control-border);
}

.phx-item:has(.phx-item__link:active) {
  transform: translateY(1px);
}

.phx-item :is(a:not(.phx-item__link), button, form, details, .phx-confirm) {
  position: relative;
  z-index: 1;
}

.phx-item__foot {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gle-space-2);
  margin-top: var(--gle-space-3);
  padding-top: var(--gle-space-3);
  border-top: 1px solid var(--gle-hairline);
}

.phx-item__actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--gle-space-4);
}

.phx-item__actions form {
  margin: 0;
}

/* The primary verb: accent-tint text with an arrow. */
.phx-item__go {
  display: inline-flex;
  align-items: center;
  min-height: var(--phx-tap);
  margin-right: auto;
  padding: 0;
  background: none;
  border: 0;
  color: var(--phx-accent-text);
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: var(--gle-font-label-weight);
  text-decoration: none;
  cursor: pointer;
}

.phx-item__go::after {
  content: "\2192";
  content: "\2192" / "";
  margin-left: 6px;
  transition: transform var(--gle-duration-fast) var(--phx-ease);
}

:is(.phx-item:has(.phx-item__link:hover), .phx-item__go:hover) .phx-item__go::after,
.phx-item__go:hover::after {
  transform: translateX(2px);
}

.phx-item__more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--gle-space-3);
  list-style: none;
  min-height: var(--phx-tap);
  color: var(--gle-ink-soft);
  font-size: var(--gle-text-sm);
  cursor: pointer;
}

.phx-item--mini {
  margin-bottom: var(--gle-space-6);
}

/* From 768px a card is a full-width row, the same anatomy laid out sideways, so a wide
   page never holds a card with an empty half. 768-1023px: the amount (with its state) |
   the payee and dates, the chips and meta under them | the actions, right-aligned.
   From 1024px: four columns, the amount | the payee and dates | the chips and meta | the
   actions; fixed side columns keep every row's edges on the same lines and the payee takes
   what is left. The Pix message (when there is one) opens under the row. Below 768px the
   cards stay stacked. */
@media (min-width: 768px) {
  .phx-list--rows {
    gap: var(--gle-space-2);
  }

  .phx-list--rows > .phx-item {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr) auto;
    column-gap: var(--gle-space-4);
    row-gap: var(--gle-space-2);
    align-items: center;
    padding: var(--gle-space-3) var(--gle-space-6);
    contain-intrinsic-size: auto 5rem;
  }

  .phx-list--rows > .phx-item > .phx-item__head {
    grid-column: 1;
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gle-space-1);
  }

  .phx-list--rows .phx-item__head > .phx-state {
    margin-left: 0;
  }

  .phx-list--rows .phx-item__who {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .phx-list--rows > .phx-item > .phx-item__foot {
    display: contents;
  }

  .phx-list--rows .phx-item__info {
    grid-column: 2;
    grid-row: 2;
  }

  .phx-list--rows .phx-item__actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-content: flex-end;
    margin-top: 0;
  }

  .phx-list--rows .phx-item__go {
    margin-right: 0;
  }

  .phx-list--rows .phx-item__more {
    grid-column: 2 / -1;
    grid-row: 3;
  }
}

@media (min-width: 1024px) {
  .phx-list--rows > .phx-item {
    grid-template-columns: 9.5rem minmax(0, 1fr) 16rem 12.5rem;
    row-gap: 0;
  }

  .phx-list--rows > .phx-item > .phx-item__head,
  .phx-list--rows .phx-item__who,
  .phx-list--rows .phx-item__info,
  .phx-list--rows .phx-item__actions {
    grid-row: 1;
  }

  .phx-list--rows .phx-item__info {
    grid-column: 3;
  }

  .phx-list--rows .phx-item__actions {
    grid-column: 4;
  }

  .phx-list--rows .phx-item__more {
    grid-row: 2;
  }
}

/* room for "Anexar comprovante → | Não precisa" on one line */
@media (min-width: 1280px) {
  .phx-list--rows > .phx-item {
    grid-template-columns: 9.5rem minmax(0, 1fr) 17rem 17rem;
  }
}

/* A plain row list (Dispensadas): hairlines, the payee, the reason, Reabrir. */
.phx-rows {
  list-style: none;
  margin: var(--gle-space-3) 0 0;
  padding: 0;
  border-top: 1px solid var(--gle-line);
}

.phx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gle-space-4);
  padding: var(--gle-space-2) 0;
  border-bottom: 1px solid var(--gle-line);
}

.phx-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin: 0;
}

.phx-row__title {
  color: var(--gle-ink);
  font-size: var(--gle-text-sm);
  font-weight: var(--gle-font-label-weight);
  overflow-wrap: anywhere;
}

.phx-row form {
  margin: 0;
}

/* --- State (a label with a glyph, never colour alone) and kind chips */

.phx-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--gle-text-xs);
  font-weight: var(--gle-font-label-weight);
  line-height: 16px;
  color: var(--gle-ink-soft);
  white-space: nowrap;
}

.phx-state::before {
  content: "\25CF";
  content: "\25CF" / "";
  font-size: 0.7em;
}

.phx-state--confirmada::before {
  content: "\2713";
  content: "\2713" / "";
  font-size: 0.9em;
}

.phx-state--rejeitada::before {
  content: "\2715";
  content: "\2715" / "";
  font-size: 0.85em;
}

.phx-state--cancelada {
  color: var(--phx-quiet);
}

.phx-state--cancelada::before {
  content: "\2013";
  content: "\2013" / "";
  font-size: 0.9em;
}

.phx-state--ask {
  color: var(--phx-accent-text);
}

/* Kind chips: outlined; ✓ held, — missing (dashed, accent-tint). */
.phx-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gle-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.phx-pagehead .phx-kinds {
  margin-top: var(--gle-space-3);
}

.phx-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--gle-space-2);
  border: 1px solid var(--phx-control-border);
  border-radius: var(--gle-radius-pill);
  color: var(--gle-ink);
  font-size: var(--gle-text-xs);
  font-weight: var(--gle-font-label-weight);
  line-height: 16px;
  white-space: nowrap;
}

.phx-kind--tem > [aria-hidden] {
  color: var(--gle-ink-soft);
}

.phx-kind--falta {
  border-style: dashed;
  border-color: var(--phx-accent-text);
  color: var(--phx-accent-text);
}

.phx-kind--par::before {
  content: "\2194";
  content: "\2194" / "";
  color: var(--gle-ink-soft);
}

/* --- Empty states: a small dot-field tile */

div.phx-empty {
  padding: var(--gle-space-8) var(--gle-space-4);
  border: 1px solid var(--gle-line);
  border-radius: var(--gle-radius-sm);
  background-color: var(--gle-surface);
  background-image: radial-gradient(var(--gle-steel-700) 0.8px, transparent 1.1px);
  background-size: 12px 12px;
  background-position: 6px 6px;
  color: var(--gle-ink-soft);
  text-align: center;
}

div.phx-empty p {
  color: var(--gle-ink);
  margin-bottom: var(--gle-space-4);
}

p.phx-empty {
  margin: 0;
  color: var(--gle-muted);
  font-size: var(--gle-text-sm);
}

/* 404, expired session, refusals: a page, with the way back. */
.phx-errorpage {
  max-width: var(--phx-shell-narrow);
  margin: 0 auto;
  padding: var(--gle-space-12) var(--gle-space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gle-space-3);
}

.phx-shell .phx-errorpage {
  padding-inline: 0;
}

.phx-errorpage h1,
.phx-errorpage p {
  margin: 0;
}

.phx-errorpage p {
  max-width: 32rem;
}

.phx-errorpage__actions {
  display: flex;
  gap: var(--gle-space-3);
  flex-wrap: wrap;
  margin-top: var(--gle-space-4);
}

/* --- Copy box (the WhatsApp message) */

.phx-copybox {
  /* Caio, 2026-10-01: a grid, not an absolute button -- the text starts at
     the top padding, Copiar sits inside the box (top right from 600 px,
     full width under the text on a phone) and "Falta:" closes the box. */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gle-space-3);
  padding: var(--gle-space-3) var(--gle-space-4);
  background: var(--gle-surface-raised);
  border: 1px solid var(--phx-control-border);
  border-radius: var(--gle-radius-sm);
  margin-bottom: var(--gle-space-4);
}

.phx-copybox__text {
  margin: 0;
  padding: 0;
  font-family: var(--gle-font-mono);
  font-size: var(--gle-text-sm);
  line-height: 1.55;
  color: var(--gle-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  user-select: text;
}

.phx-copybox__btn {
  width: 100%;
  background: var(--gle-surface);
  font-size: var(--gle-text-sm);
}

.phx-copybox__missing {
  margin: 0;
  font-size: var(--gle-text-sm);
  line-height: 1.4;
  color: var(--gle-ink-soft);
}

@media (min-width: 600px) {
  .phx-copybox {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .phx-copybox__text { grid-column: 1; grid-row: 1; }
  .phx-copybox__btn { grid-column: 2; grid-row: 1; width: auto; min-width: 6rem; }
  .phx-copybox__missing { grid-column: 1 / -1; }
}

/* --- Planilha: the 13-column table */

.phx-sheet-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--gle-surface);
  border: 1px solid var(--gle-line);
  border-radius: var(--gle-radius-sm);
  margin-bottom: var(--gle-space-4);
}

.phx-sheet-table table {
  border-collapse: collapse;
  width: 100%;
  min-width: 68rem;
  font-size: var(--gle-text-sm);
}

.phx-sheet-table th {
  position: sticky;
  top: 0;
  text-align: left;
  white-space: nowrap;
  padding: var(--gle-space-3);
  background: var(--gle-surface-raised);
  color: var(--gle-muted);
  font-size: var(--gle-text-xs);
  font-weight: var(--gle-font-label-weight);
  letter-spacing: var(--gle-tracking-label);
  text-transform: uppercase;
  border-bottom: 1px solid var(--phx-control-border);
}

.phx-sheet-table td {
  padding: var(--gle-space-2) var(--gle-space-3);
  vertical-align: top;
  color: var(--gle-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  max-width: 18rem;
}

.phx-sheet-table tbody tr + tr td {
  border-top: 1px solid var(--gle-line);
}

.phx-sheet-table tbody tr:hover td {
  background: var(--gle-surface-raised);
}

/* Desktop: the 13 columns fit without a sideways scroll. */
@media (min-width: 960px) {
  .phx-sheet-table table {
    min-width: 0;
    font-size: var(--gle-text-xs);
  }

  .phx-sheet-table th {
    white-space: normal;
    padding: var(--gle-space-2) var(--gle-space-1);
    letter-spacing: 0;
    font-size: 0.6875rem;
    overflow-wrap: normal;
    hyphens: none;
  }

  .phx-sheet-table td {
    padding: var(--gle-space-2) var(--gle-space-1);
    max-width: 12rem;
  }

  /* DATA stays one line: a date split as 12/09/20/26 reads wrong. */
  .phx-sheet-table td:first-child {
    white-space: nowrap;
  }
}

/* --- Status page */

.phx-status-step {
  display: flex;
  align-items: center;
  gap: var(--gle-space-3);
  color: var(--gle-ink);
}

.phx-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--gle-line);
  border-top-color: var(--gle-ink);
  animation: phx-spin 0.8s linear infinite;
  flex: none;
}

/* terminal states stop spinning */
.phx-status--done .phx-spinner,
.phx-status--failed .phx-spinner {
  display: none;
}

@keyframes phx-spin {
  to {
    transform: rotate(360deg);
  }
}

[data-phx-retry] {
  margin-top: var(--gle-space-3);
}

/* --- Enviar: the drop zone is the hero; "Como usar" a quiet guide below */

.phx-target .phx-eyebrow {
  margin-bottom: var(--gle-space-2);
}

.phx-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gle-space-3);
  min-height: 240px;
  padding: var(--gle-space-6) var(--gle-space-4);
  margin-bottom: var(--gle-space-6);
  border: 1px dashed var(--gle-steel-600);
  border-radius: var(--gle-radius-sm);
  background: var(--gle-surface);
  text-align: center;
  transition: border-color var(--gle-duration-fast) ease, background-color var(--gle-duration-fast) ease;
}

@media (min-width: 768px) {
  .phx-drop {
    min-height: 320px;
  }
}

.phx-nova--js .phx-drop {
  cursor: pointer;
}

.phx-nova--js .phx-drop:hover {
  border-color: var(--gle-steel-400);
  background: var(--phx-surface-hover);
}

.phx-drop--over,
.phx-nova--js .phx-drop--over:hover {
  border-color: var(--phx-focus-ring);
  background: var(--gle-surface-raised);
}

.phx-drop--filled {
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  border-style: solid;
  border-color: var(--gle-line);
  text-align: left;
}

.phx-drop--busy {
  cursor: progress;
}

.phx-drop--error,
.phx-nova--js .phx-drop--error:hover {
  border-color: var(--phx-error-border);
}

.phx-drop__title {
  margin: 0;
  font-size: var(--gle-text-xl);
  line-height: 1.5rem;
  font-weight: var(--gle-font-label-weight);
  color: var(--phx-ink-strong);
}

.phx-drop__hint {
  max-width: 30rem;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--gle-ink-soft);
}

.phx-drop__input {
  max-width: 100%;
}

.phx-drop__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gle-space-2);
  margin-top: var(--gle-space-2);
}

.phx-drop--filled .phx-drop__actions {
  justify-content: flex-start;
}

@media (max-width: 599.98px) {
  .phx-drop__actions .phx-btn {
    flex: 1 1 auto;
  }
}

/* A desktop with a mouse has no camera to open: no "Tirar foto". */
@media (hover: hover) and (pointer: fine) {
  .phx-drop__actions [data-phx-camera] {
    display: none;
  }
}

.phx-nova .phx-actions {
  margin-top: var(--gle-space-4);
}

@media (min-width: 600px) {
  .phx-nova .phx-actions {
    align-items: flex-start;
  }

  .phx-nova .phx-actions .phx-btn {
    min-width: 12rem;
  }
}

.phx-thumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--gle-space-2);
}

.phx-thumbs:empty {
  display: none;
}

.phx-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gle-space-1);
  min-width: 0;
}

.phx-thumb img,
.phx-thumb__doc {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  border-radius: var(--gle-radius-sm);
  border: 1px solid var(--gle-line);
  background: var(--gle-surface-raised);
}

.phx-thumb__doc {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--gle-font-heading-weight);
  color: var(--gle-ink);
}

.phx-thumb__meta {
  font-size: var(--gle-text-xs);
  color: var(--gle-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 44 px hit area, 28 px visible disc */
.phx-thumb__remove {
  position: absolute;
  top: 0;
  right: 0;
  isolation: isolate;
  width: var(--phx-tap);
  height: var(--phx-tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--gle-paper);
  font-size: 18px;
  line-height: var(--phx-tap);
  cursor: pointer;
}

.phx-thumb__remove::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border-radius: var(--gle-radius-pill);
  background: color-mix(in srgb, var(--gle-navy-deep) 80%, transparent);
}

/* "Como usar": three plain columns (stacked on a phone), quieter by size and
   colour, never by opacity. */
.phx-guide {
  margin-top: var(--gle-space-12);
  padding-top: var(--gle-space-6);
  border-top: 1px solid var(--gle-line);
}

.phx-guide__list {
  display: grid;
  gap: var(--gle-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 720px) {
  .phx-guide__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gle-space-8);
  }
}

/* The three are alternatives, not steps: a small steel square (the kit's tag square)
   marks each, never a number. */
.phx-guide__item::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin-bottom: var(--gle-space-2);
  background: var(--gle-steel-500);
}

.phx-guide p {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--phx-quiet);
}

.phx-guide .phx-guide__title {
  color: var(--gle-ink-soft);
  font-weight: var(--gle-font-label-weight);
}

.phx-guide .phx-guide__note {
  margin-top: var(--gle-space-6);
}

/* The page's two regions: one column below 1024px (the narrow measure, left-aligned under
   the brand); from 1024px the form in 7 of 12 columns and, in the other 5, the target
   card (?para=) or the guide. */
.phx-enviar {
  max-width: calc(var(--phx-shell-narrow) - 2 * var(--gle-space-4));
}

.phx-target__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gle-space-3);
}

/* "Não anexar": a quiet way back to a plain Enviar (44px hit area, small type). */
.phx-target__off {
  display: inline-flex;
  align-items: center;
  gap: var(--gle-space-1);
  min-height: var(--phx-tap);
  margin-block: calc(-1 * var(--gle-space-3));
  color: var(--gle-ink-soft);
  font-size: var(--gle-text-xs);
  line-height: 16px;
  text-decoration: none;
}

.phx-target__off:hover {
  color: var(--gle-ink);
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .phx-enviar {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gle-space-8);
    max-width: none;
  }

  /* min-width: 0 lets each region shrink to its 7 or 5 columns: without it a long
     unbreakable line (a file name, the drop area's buttons) widened the form's column
     and pushed the guide past the viewport (Caio, 2026-10-01, at ~1160px). */
  .phx-enviar__main {
    grid-column: 1 / span 7;
    grid-row: 1;
    min-width: 0;
  }

  .phx-enviar__side {
    grid-column: 8 / span 5;
    grid-row: 1;
    min-width: 0;
  }

  .phx-enviar__side .phx-guide p {
    overflow-wrap: anywhere;
  }

  .phx-enviar__side .phx-item--mini {
    margin-bottom: 0;
  }

  /* the guide is a sidebar: no rule above it, a hairline beside it, the three stacked */
  .phx-enviar__side .phx-guide {
    margin-top: 0;
    padding: 0 0 0 var(--gle-space-6);
    border-top: 0;
    border-left: 1px solid var(--gle-line);
  }

  .phx-enviar__side .phx-guide__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gle-space-6);
  }
}

/* The result page: one narrow column below 1024px; from 1024px the summary (amount,
   payee, dates, chips) in the left 5 of 12 columns and the details and the next steps in
   the right 7, so the wide page holds no empty half. */
.phx-result {
  max-width: calc(var(--phx-shell-narrow) - 2 * var(--gle-space-4));
}

@media (min-width: 1024px) {
  .phx-result {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gle-space-8);
    align-items: start;
    max-width: none;
  }

  .phx-result > .phx-pagehead {
    grid-column: 1 / span 5;
    grid-row: 1 / span 8;
    margin-bottom: 0;
  }

  .phx-result > :not(.phx-pagehead) {
    grid-column: 6 / span 7;
  }
}

/* --- Pendências: a 32px segmented filter with each side's count (the hit
   area reaches 44px) */

.phx-filter {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  margin: 0 0 var(--gle-space-6);
  border: 1px solid var(--phx-control-border);
  border-radius: var(--gle-radius-sm);
}

.phx-filter__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--gle-space-2);
  height: 26px;
  padding: 0 var(--gle-space-3);
  border-radius: 4px;
  color: var(--gle-ink-soft);
  font-size: 13px;
  font-weight: var(--gle-font-label-weight);
  text-decoration: none;
  transition: color var(--gle-duration-fast) ease, background-color var(--gle-duration-fast) ease;
}

.phx-filter__link::before {
  content: "";
  position: absolute;
  inset: -9px 0;
}

.phx-filter__link:hover {
  color: var(--gle-ink);
}

.phx-filter__link[aria-current="true"] {
  background: var(--gle-surface-raised);
  color: var(--phx-ink-strong);
}

.phx-filter__n {
  color: var(--gle-ink-soft);
  font-size: var(--gle-text-xs);
}

/* --- Pagamentos (visibility round): Meus | Todos, and on Todos the state
   filter on its own line under it */

.phx-filter--sub {
  display: flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}

/* --- "À parte": the admin seats' one checkbox, the details column's last field
   (Caio, 2026-10-01): the form's left edge and the fields' rhythm, no rule, no button
   (phoenix.js posts it on change; a <noscript> Salvar otherwise). */

.phx-aparte {
  margin: var(--gle-space-6) 0 0;
}

.phx-aparte .phx-field {
  margin-bottom: var(--gle-space-4);
}

.phx-aparte .phx-aparte__label {
  display: inline-flex;
  align-items: center;
  gap: var(--gle-space-2);
  min-height: var(--phx-tap);
  color: var(--gle-ink);
}

/* --- The pairing field: one bordered row per candidate */

.phx-pair {
  display: flex;
  flex-direction: column;
  gap: var(--gle-space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.phx-pair__option {
  display: flex;
  align-items: flex-start;
  gap: var(--gle-space-3);
  min-height: var(--phx-tap);
  padding: var(--gle-space-4);
  border: 1px solid var(--gle-line);
  border-radius: var(--gle-radius-sm);
  background: var(--gle-surface);
  cursor: pointer;
  transition: border-color var(--gle-duration-fast) ease, background-color var(--gle-duration-fast) ease;
}

.phx-pair__option:hover,
.phx-pair__option:has(input:checked) {
  border-color: var(--phx-control-border);
  background: var(--phx-surface-hover);
}

.phx-pair__option:has(input:checked) {
  border-color: var(--gle-ink);
}

.phx-pair__option input[type="radio"] {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--gle-steel-300);
}

.phx-pair__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.phx-pair__body > .phx-item__title {
  margin-top: 0;
}

.phx-pair__body > .phx-item__amount + .phx-item__title {
  margin-top: var(--gle-space-1);
}

.phx-pair__body > .phx-kinds,
.phx-pair__body > .phx-pair__evidence {
  margin-top: var(--gle-space-2);
}

/* --- "Documentos deste pagamento" */

.phx-docs,
.phx-docs__pending {
  list-style: none;
  margin: var(--gle-space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gle-space-2);
  font-size: var(--gle-text-sm);
  color: var(--gle-ink-soft);
}

/* One compact row per document: kind, date and amount on the first line (tabular
   numerals), the derived file name under it in small mono and quiet, cut with an
   ellipsis (the full name is in its title); Baixar a compact secondary button and
   Desfazer par quiet text, right-aligned. */
.phx-docs__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gle-space-3);
  min-width: 0;
}

.phx-docs__main {
  flex: 1 1 auto;
  min-width: 0;
}

.phx-docs__line,
.phx-docs__name {
  margin: 0;
}

.phx-docs__kind {
  color: var(--gle-ink);
  font-weight: var(--gle-font-label-weight);
}

.phx-docs__num {
  font-variant-numeric: tabular-nums;
}

.phx-docs__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--phx-quiet);
  font-family: var(--gle-font-mono);
  font-size: 12px;
  line-height: 16px;
}

.phx-docs__actions {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gle-space-2);
}

.phx-docs__actions .phx-undo {
  margin-top: 0;
}

.phx-docs__download {
  display: inline-flex;
  align-items: center;
  min-height: var(--phx-tap);
  padding: 0 var(--gle-space-3);
  border: 1px solid var(--phx-control-border);
  border-radius: var(--gle-radius-sm);
  color: var(--gle-ink);
  font-size: var(--gle-text-sm);
  font-weight: var(--gle-font-label-weight);
  text-decoration: none;
}

.phx-docs__download:hover {
  border-color: var(--gle-ink-soft);
  background: var(--gle-surface-raised);
}

.phx-docs__download:active {
  transform: translateY(1px);
}

/* "Baixar todos (N)": one .zip of the payment's files, above the list. */
.phx-docs__all {
  margin: var(--gle-space-3) 0 0;
}

.phx-docs__pending li {
  color: var(--gle-ink);
  font-weight: var(--gle-font-label-weight);
}

.phx-docs__dispensed form {
  display: inline;
  margin: 0;
}

.phx-undo {
  margin-top: var(--gle-space-2);
}

/* --- Search (search round, 2026-09-30): the field at the top of Meus pagamentos,
   Pendências, the Planilha and /buscar -- beside the page's segmented control on
   desktop, full width on a phone -- and the line that says how many rows matched.
   The line always keeps its height, so typing never moves the list. */

.phx-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gle-space-3) var(--gle-space-4);
  margin: 0 0 var(--gle-space-2);
}

.phx-toolbar .phx-filter {
  margin: 0;
}

.phx-search {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .phx-search {
    flex: 0 1 22rem;
    margin-left: auto;
  }

  .phx-search:only-child {
    margin-left: 0;
  }
}

.phx-search__icon {
  position: absolute;
  top: 50%;
  left: var(--gle-space-3);
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  color: var(--phx-quiet);
  pointer-events: none;
}

/* A quiet field, not a box (Caio, 2026-10-01): the height of the segmented controls
   beside it, no fill, one hairline; it wakes on hover and focus and widens a little
   while in use. The form keeps a 44px hit area around it. */
.phx-search {
  display: flex;
  align-items: center;
  min-height: var(--phx-tap, 44px);
}

.phx-search .phx-search__input {
  height: 36px;
  min-height: 0;
  padding-block: 0;
  padding-left: calc(var(--gle-space-3) + 14px + var(--gle-space-2));
  padding-right: var(--gle-space-3);
  font-size: 1rem; /* 16px on phones: no iOS zoom */
  color: var(--gle-ink);
  background: transparent;
  border: 1px solid var(--gle-line);
  border-radius: var(--gle-radius-sm);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.phx-search .phx-search__input::placeholder {
  color: var(--phx-quiet);
  opacity: 1;
}

@media (hover: hover) {
  .phx-search .phx-search__input:hover {
    border-color: var(--gle-steel-600);
  }
}

.phx-search .phx-search__input:focus,
.phx-search .phx-search__input:not(:placeholder-shown) {
  border-color: var(--gle-steel-500);
  background: var(--gle-surface);
}

@media (min-width: 768px) {
  .phx-search {
    flex: 0 1 15rem;
    transition: flex-basis 160ms ease;
  }

  .phx-search:focus-within,
  .phx-search:has(.phx-search__input:not(:placeholder-shown)) {
    flex-basis: 20rem;
  }

  .phx-search .phx-search__input {
    height: 32px;
    font-size: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phx-search,
  .phx-search .phx-search__input {
    transition: none;
  }
}

.phx-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
}

.phx-search__status {
  min-height: 20px;
  margin: 0 0 var(--gle-space-4);
  color: var(--gle-ink-soft);
  font-size: 13px;
  line-height: 20px;
}

.phx-search__clear {
  position: relative;
  margin-left: var(--gle-space-2);
  color: var(--phx-accent-text);
  font-weight: var(--gle-font-label-weight);
}

/* the hit area reaches 44px */
.phx-search__clear::before {
  content: "";
  position: absolute;
  inset: -12px -8px;
}

.phx-search__hint {
  max-width: 40rem;
  color: var(--phx-quiet);
  font-size: 13px;
  line-height: 18px;
}

.phx-search__more {
  margin-top: var(--gle-space-4);
}

/* --- A sinal's two Pix messages (Caio, 2026-09-30): the title says which,
   a small toggle below it switches between the sinal and the conclusão.
   Radios + :checked, no script; the copy box works per panel. */

.phx-msgparts__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.phx-msgparts__name,
.phx-msgparts__panel {
  display: none;
}

.phx-msgparts__radio--0:checked ~ .phx-block__title .phx-msgparts__name--0,
.phx-msgparts__radio--1:checked ~ .phx-block__title .phx-msgparts__name--1 {
  display: inline;
}

.phx-msgparts__radio--0:checked ~ .phx-msgparts__panel--0,
.phx-msgparts__radio--1:checked ~ .phx-msgparts__panel--1 {
  display: block;
}

.phx-msgparts__toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  margin: 0 0 var(--gle-space-3);
  border: 1px solid var(--gle-line);
  border-radius: var(--gle-radius-pill);
}

.phx-msgparts__opt {
  padding: 2px var(--gle-space-3);
  border-radius: var(--gle-radius-pill);
  font-size: var(--gle-text-xs, 0.75rem);
  color: var(--gle-ink-soft);
  cursor: pointer;
  user-select: none;
}

.phx-msgparts__radio--0:checked ~ .phx-msgparts__toggle .phx-msgparts__opt--0,
.phx-msgparts__radio--1:checked ~ .phx-msgparts__toggle .phx-msgparts__opt--1 {
  background: var(--gle-accent-wash);
  color: var(--gle-ink);
}

.phx-msgparts__radio:focus-visible ~ .phx-msgparts__toggle {
  outline: 2px solid var(--gle-accent);
  outline-offset: 2px;
}

/* === Motion (lane T) === */

/* Short, transform/opacity only. Between pages only the content region moves: the
   root (header, rule, nav, band, banners in the shell) never animates, so the frame
   stays put while `main` swaps. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

main {
  view-transition-name: phx-main;
}

/* No blend of the whole page: the root shows the new page at once, and only the
   "phx-main" pair below animates. */
::view-transition-group(root) {
  animation: none;
}

::view-transition-old(root) {
  display: none;
}

::view-transition-new(root) {
  animation: none;
}

/* No morph between the two boxes: the group keeps the new box, the old picture keeps
   its own size and fades out in place. */
::view-transition-group(phx-main) {
  animation: none;
}

::view-transition-old(phx-main) {
  inline-size: auto;
  animation: phx-vt-out 70ms ease-in both;
}

::view-transition-new(phx-main) {
  /* starts after the old picture is nearly gone, so the two never overlap */
  animation: phx-vt-in 180ms var(--phx-ease) 50ms both;
}

/* The UA default blends the pair with `plus-lighter`: while the old fades out and the
   new fades in the two pictures ADD, and dark surfaces and text flash near-white. */
::view-transition-old(phx-main),
::view-transition-new(phx-main) {
  mix-blend-mode: normal;
}

::view-transition-image-pair(phx-main) {
  isolation: auto;
}

::view-transition {
  background-color: #0a1016;
  background-color: var(--gle-bg);
}

@keyframes phx-vt-out {
  to {
    opacity: 0;
  }
}

@keyframes phx-vt-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}

/* Without view transitions: a plain settle of the content (never a page with a field to
   type in). Nothing in the shell animates. */
@keyframes phx-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

@supports not (view-transition-name: none) {
  main:not(:has(input:not([type="hidden"]), textarea, select)) {
    animation: phx-in 160ms var(--phx-ease) both;
  }
}

/* "Pronto: ..." fades after 4 s but stays in the DOM for screen readers. */
.phx-banner--done {
  animation: phx-done 600ms ease-in 4s forwards;
  overflow: hidden;
}

@keyframes phx-done {
  70% {
    opacity: 0;
    max-height: 6rem;
  }

  to {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding-block: 0;
    border-width: 0;
  }
}

.phx-more[open] > :not(summary) {
  animation: phx-in 160ms var(--phx-ease);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  transition: outline-offset var(--gle-duration-fast) ease;
}

@media (prefers-reduced-motion: reduce) {
  .phx-spinner {
    animation-duration: 2.4s;
  }

  *:not(.phx-spinner),
  ::before,
  ::after {
    animation: none !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}