/* Desktop: the wider screen shows more at once without changing the phone layout.
   Loaded after clarity.css. Rules start at 1100px; the summary column needs 1280px. */
.desk-rail { display: none; }

@media (min-width: 1100px) {
  .main,body[data-view=home] .main { max-width: 1280px; }
  .prototype-bar { max-width: 1280px; margin-inline: auto; }

  /* Home: the amount and its action share a row; a narrow column wraps the action below. */
  .home-overview { position: relative; }
  .home-overview .today-budget-heading>.text-button { position: absolute; top: 25px; right: 36px; }
  .home-overview .home-money-summary { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 28px; }
  .home-overview .today-budget { flex: 1 1 320px; width: auto; min-width: 0; }
  .home-overview .today-actions { display: grid; gap: 4px; flex: 0 0 auto; margin: 46px 0 0; }
  .home-overview .today-actions .button { width: auto; min-width: 200px; padding-inline: 24px; }

  /* Plan: category budgets use two columns once their section is opened. */
  #plan-categories .budget-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 24px; }

  /* Plan: four closed sections read as one list instead of four floating cards. */
  #plan-view>.plan-secondary { margin-top: 0; border-radius: 0; box-shadow: inset 0 1px 0 var(--line); }
  #plan-view>.plan-overview+.plan-secondary { margin-top: 16px; border-radius: 20px 20px 0 0; box-shadow: none; }
  #plan-view>.plan-secondary:last-child { border-radius: 0 0 20px 20px; }
  #plan-view>.plan-secondary>summary { min-height: 64px; padding-block: 18px; }

  /* Assets: groups share one grid so a single card no longer leaves half a row empty. */
  #assets-view { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 16px; align-items: stretch; }
  #assets-view>* { grid-column: 1/-1; min-width: 0; }
  #assets-view>.asset-group { display: grid; grid-template-rows: auto 1fr; }
  #assets-view>.asset-group[data-count="1"] { grid-column: span 1; }
  #assets-view>.asset-group[data-count="2"] { grid-column: span 2; }
  .asset-group[data-count="1"] .asset-management-grid { grid-template-columns: minmax(0,1fr); }
  .asset-group[data-count="3"] .asset-management-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .asset-group .asset-management-grid { gap: 16px; }
  .asset-group .asset-management-item { display: flex; flex-direction: column; height: 100%; margin: 0; }
  .asset-group .asset-item-details { margin-top: auto; }
  #assets-view:has(.asset-item-details[open]),#assets-view:has(.asset-item-details[open]) .asset-management-grid { align-items: start; }
  #assets-view:has(.asset-item-details[open]) .asset-management-item { height: auto; }
  .asset-group .asset-main-amount { font-size: clamp(20px,1.9vw,28px); line-height: 1.3; }
  .asset-totals { grid-template-columns: minmax(0,1.4fr) repeat(2,minmax(0,1fr)); align-items: end; }
  .asset-totals .asset-net { grid-column: auto; }
  /* The first-account prompt reads across the row instead of stretching one button. */
  .asset-empty-start { display: grid; grid-template-columns: 52px minmax(0,1fr) minmax(220px,280px); grid-template-areas: "icon title cta" "icon copy note"; column-gap: 24px; row-gap: 6px; align-items: center; text-align: left; }
  .asset-empty-start>.asset-empty-icon { grid-area: icon; margin: 0; }
  .asset-empty-start>h2 { grid-area: title; margin: 0; }
  .asset-empty-start>p { grid-area: copy; margin: 0; }
  .asset-empty-start>.button { grid-area: cta; width: 100%; margin: 0; }
  .asset-empty-start>small { grid-area: note; margin: 0; text-align: center; }

  /* More: five short sections fit in three columns. */
  .feature-directory { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .feature-directory button,.feature-directory a { min-height: 56px; }
}

@media (min-width: 1280px) {
  /* Home, records and plan gain a read-only summary column beside the main flow. */
  body[data-desk-rail] .main {
    display: grid;
    grid-template-columns: minmax(0,1fr) 300px;
    grid-template-rows: auto auto auto auto 1fr auto;
    grid-template-areas: "brand brand" "top top" "month ." "error ." "view rail" "foot foot";
    column-gap: 24px;
    align-items: start;
  }
  body[data-desk-rail] .main>.mobile-brand { grid-area: brand; }
  body[data-desk-rail] .main>.topbar { grid-area: top; }
  body[data-desk-rail] .main>.month-toolbar { grid-area: month; }
  body[data-desk-rail] .main>#page-error { grid-area: error; }
  body[data-desk-rail] .main>.view { grid-area: view; min-width: 0; }
  body[data-desk-rail] .main>.footer { grid-area: foot; }
  .desk-rail:not([hidden]) { grid-area: rail; display: block; min-width: 0; position: sticky; top: 24px; }

  .desk-rail-inner { display: grid; gap: 12px; }
  .desk-card { padding: 24px 26px; border-radius: var(--radius); background: var(--surface); }
  .desk-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 14px; }
  .desk-title { margin: 0; font-size: 17px; line-height: 1.5; }
  .desk-caption { color: var(--muted); font-size: 12px; line-height: 1.5; }
  .desk-stats { display: grid; gap: 10px; margin: 0; }
  .desk-stats>div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
  .desk-stats dt { color: var(--muted); font-size: 13px; }
  .desk-stats dd { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
  .desk-stats .is-income { color: var(--positive); }
  .desk-stats .is-over,.desk-value.is-over { color: var(--negative); }
  .desk-meter { position: relative; height: 6px; margin-top: 14px; overflow: hidden; border-radius: 999px; background: var(--wash); }
  .desk-meter>span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); }
  .desk-meter.is-over>span { background: var(--negative); }
  .desk-note { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
  .desk-note.is-over { color: var(--negative); }
  .desk-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
  .desk-list li { min-width: 0; }
  .desk-list .desk-meter { height: 4px; margin-top: 6px; }
  .desk-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
  .desk-name { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
  .desk-value { flex-shrink: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
  .desk-sub { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
  .desk-empty { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

  .home-recent { padding: 22px 28px 10px; border-radius: var(--radius); background: var(--surface); }

  .ledger-records { padding-inline: 28px; }
}

@media (min-width: 1400px) {
  body[data-desk-rail] .main { grid-template-columns: minmax(0,1fr) 360px; column-gap: 32px; }
  .desk-caption,.desk-sub { font-size: 13px; }
}

/* Home lists six recent records beside the summary column and the first three elsewhere. */
@media (max-width: 1279px) {
  .home-recent .transaction-list>li:nth-child(n+4) { display: none; }
  .home-recent .transaction-list>li:nth-child(3)>.transaction-row { border-bottom: 0; }
}