@layer pfa-app {
/* ---------- Responsive tiers ---------- */
@media (max-width: 639px) {
  .nav-ic {
    display: inline-flex;
  }
  #export-btn .caret {
    display: none;
  }
  .btn .btn-label {
    display: none;
  }
  .btn.primary .btn-label {
    display: none;
  }
  .btn,
  .btn.sm,
  .cat-tag-btn,
  .chip,
  .f-check,
  .period-select,
  .mini,
  .filters input:not([type='checkbox']):not([type='radio']),
  .filters select {
    min-height: var(--tap-lg);
  }
  .btn {
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .btn.sm {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .cat-tag-btn {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .chip {
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .f-check {
    padding: 10px 10px;
  }
  .period-bar {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .period-left,
  .period-range,
  .filters,
  .chips {
    width: 100%;
  }
  .period-left {
    flex-wrap: wrap;
  }
  .period-select,
  .mini,
  .filters input:not([type='checkbox']):not([type='radio']),
  .filters select {
    width: 100%;
  }
  /* The period selector is a low-frequency chooser, not a primary input, so on
     phones it hugs its label instead of spanning the row, sits at a calmer 40px
     height, and lets "Showing <month>" share the same line. Filters and chips
     in the explorer keep their full-width behaviour; this is scoped to the
     period bar only. */
  .period-bar .period-left {
    order: 3;
    width: 100%;
  }
  .period-bar .period-range {
    order: 4;
    width: 100%;
    margin-left: 0;
  }
  .period-bar .period-select {
    width: auto;
    max-width: 100%;
    min-height: var(--tap-min);
    font-size: 14px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .filters {
    gap: 10px;
  }
  .f-search {
    flex: 1 1 100%;
    min-width: 0;
  }
  .f-num {
    width: min(100%, 120px);
  }
  /* Min and Max share one row with the dash inline between them, never stranded. */
  .f-range {
    width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
  }
  .filters .f-range input.f-num {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .f-range .muted {
    flex: 0 0 auto;
  }
  /* The 16px-at-narrow-widths rule that used to live here is gone. It existed
     to stop iOS Safari zoom-jumping on a field under 16px, which is an ENGINE
     problem, not a width one - and it was also making every field in a narrow
     desktop window a third larger than the same kind of field two screens
     away. That one exception now lives on --t-field itself, under
     `@supports (-webkit-touch-callout: none)`, and reaches every field
     through the single element rule in controls.css. */
  .f-check {
    width: 100%;
    justify-content: flex-start;
  }
  /* Checkboxes stay real ~20px controls (the full-width / 44px / 16px field
     rules now exclude them); the label sits immediately to the right,
     left-aligned, inside the comfortable 44px-tall .f-check row. */
  .filters input[type='checkbox'],
  .filters input[type='radio'] {
    width: 20px;
    height: 20px;
    min-height: 0;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .mobile-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 2px 0 10px;
  }
  .mobile-sort .muted {
    width: 100%;
  }
  .mobile-sort-field {
    flex: 1 1 180px;
    min-height: var(--tap-min);
    padding: 8px 30px 8px 12px;
    border: 1px solid var(--edge);
    border-radius: 9px;
    background: var(--panel);
    color: var(--fg);
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--select-chevron);
    background-repeat: no-repeat;
    background-position: right 10px center;
  }
  .mobile-sort-dir {
    min-width: 96px;
    justify-content: center;
  }
  .hero-figure {
    min-width: 0;
  }
  .row2 {
    grid-template-columns: 1fr;
  }
  table.grid.tx thead {
    display: none;
  }
  table.grid.tx,
  table.grid.tx tbody,
  table.grid.tx tr,
  table.grid.tx td {
    display: block;
    width: 100%;
  }
  table.grid.tx tbody tr.tx-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'name amount'
      'ledger date';
    column-gap: var(--s3);
    row-gap: var(--s0);
    align-items: baseline;
    border: 0;
    border-top: 1px solid var(--edge);
    border-radius: 0;
    margin: 0;
    padding: var(--s3) 0;
    min-height: var(--tap-lg);
  }
  table.grid.tx tbody tr.tx-row:first-child {
    border-top: 0;
  }
  table.grid.tx tr.tx-row td {
    border: 0;
    padding: 0;
  }
  table.grid.tx tr.tx-row td:nth-child(2) {
    grid-area: name;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    font-weight: 600;
  }
  table.grid.tx tr.tx-row td:nth-child(4) {
    grid-area: amount;
    position: static;
    top: auto;
    right: auto;
    text-align: right;
    white-space: nowrap;
    font-weight: 680;
    font-size: 15px;
  }
  table.grid.tx tr.tx-row td:nth-child(3) {
    grid-area: ledger;
    min-width: 0;
    color: var(--dim);
    font-size: 12px;
  }
  table.grid.tx tr.tx-row td:nth-child(1) {
    grid-area: date;
    text-align: right;
    white-space: nowrap;
    color: var(--dim);
    font-size: 12px;
  }
  table.grid.tx td[data-label]::before {
    content: none;
  }
  table.grid.tx tr.tx-row button.cat-tag-btn {
    padding: 0;
  }
  .tx-detail td {
    display: block;
  }
  .pfa-sonner [data-sonner-toast] {
    max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
}

@media (min-width: 960px) {
  .row2 {
    grid-template-columns: 1.35fr 1fr;
  }
  /* Overview's row2 (the "Cards"/"Accounts" routing-card pair) is a DIFFERENT
     use of the same .row2 molecule from Cards' insight/attention pair, but the
     bare `.row2` rule above is unscoped, so it was also giving Overview's two
     routing cards the 1.35fr/1fr split meant for Cards - an unequal, unbalanced
     width for what is a plain 50/50 navigational choice with no reason for one
     card to be wider. `.accounts-wrap > .row2` matches ONLY when row2 is a
     direct child of an .accounts-wrap element - true for Overview (whose wrap
     is plain .accounts-wrap) and never true for Cards (whose row2 sits under
     #app.wrap) or Accounts (which never renders a .row2 at all). Two classes
     (0,2,0) outrank the bare .row2 rule (0,1,0) above, so this wins regardless
     of source order, restoring an even split for Overview only.
     align-items:stretch closes the matching height gap: cardsCard always gets
     one more line than acctCard when card history exists (the "$X spent
     across your card history" line has no Accounts-side equivalent), so at
     align-items:start (the base .row2 rule) the shorter Accounts card always
     stops early, leaving a bare gap beside the taller Cards card - the same
     defect class as Cards' own insight/attention row2, fixed the same way. */
  .accounts-wrap > .row2 {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

@media (pointer: fine) and (min-width: 640px) {
  .btn,
  .btn.sm,
  .cat-tag-btn,
  .chip,
  .f-check,
  .period-select,
  .mini,
  .filters input,
  .filters select {
    min-height: auto;
  }
  .btn.sm {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .cat-tag-btn {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .chip {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .f-check {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .period-select,
  .mini,
  .filters input,
  .filters select {
    min-height: 0;
  }
}

/* Tablets: coarse AND wide. This is the one case the width axis genuinely
   cannot distinguish from a desktop, so the pointer query earns its place here
   - unlike the phone-width rules, which were moved off it. .cat-tag-btn is gone
   with the element: catTag() only produces a button when passed an onclick, and
   no call site does. */
@media (pointer: coarse) and (min-width: 640px) {
  .btn,
  .btn.sm,
  .chip,
  .f-check,
  .period-select,
  .mini,
  .filters input:not([type='checkbox']):not([type='radio']),
  .filters select {
    min-height: var(--tap-lg);
  }
}
}