/* dashboard.html: the rules that were its <style> blocks (#753). Linked from the page's head, after app.css and the skin, so the cascade is the one the block had. */
  .receipt-left { flex-basis: 100%; margin: 0; }
  .receipt-panel { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
  .receipt-text { flex: 1; min-width: 220px; }
  .receipt-text h2 { margin-bottom: 3px; }
  .receipt-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
  .receipt-btn { position: relative; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
                 padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
                 color: var(--ink); font-weight: 600; font-size: 15px; cursor: pointer; }
  .receipt-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); }
  .receipt-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
  .receipt-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .receipt-btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
  .receipt-first { border: 2px solid var(--accent); }
  @media (max-width: 520px) { .receipt-actions, .receipt-btn { width: 100%; } .receipt-btn { flex: 1; } }
  @media (max-width: 620px) {
    .receipt-panel.phone-hidden { display: none; }
    .receipt-panel.phone-note-only .receipt-text, .receipt-panel.phone-note-only .receipt-actions { display: none; }
    .receipt-panel.phone-note-only { padding: 10px 14px; }
  }
  .now-total { border-top: 1.5px solid var(--border); font-weight: 600; }
  .withdrawal-ask { margin-top: 12px; font-size: 14px; }
  .withdrawal-ask p { margin: 0 0 8px; }
  .withdrawal-ask button, .withdrawal-ask select { min-height: 44px; }
  .now-day { border-top: 1px solid var(--border); }
  .now-day:first-of-type { border-top: 0; }
  .now-day > summary { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; cursor: pointer;
                       list-style: none; font-weight: 500; }
  .now-day > summary::-webkit-details-marker { display: none; }
  .now-day > summary > span:first-child::before { content: "▸ "; color: var(--ink-3); }
  .now-day[open] > summary > span:first-child::before { content: "▾ "; }
  .now-day .kv { padding-left: 14px; }
  /* "Left to spend": four rows, the day's figure the one that stands out (#366) */
  .left-rows .now-day > summary, .now-line { align-items: baseline; }
  .left-rows .now-day > summary > .mono, .now-line > .mono { font-weight: 600; white-space: nowrap; }
  .left-fig { font-family: var(--font-display, var(--font-head)); font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
              white-space: nowrap; font-variant-numeric: tabular-nums; }
  .now-plain > .now-line { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; font-weight: 500; }
  .now-plain > .now-line > span:first-child::before { content: "▸ "; visibility: hidden; }  /* its name in line with the rows that open */
  /* the fold's first line stands where its rows do: in by 14px, and at the edge in the looks whose rows are */
  .left-note { margin: 0 0 4px; padding-left: 14px; }
  :root:is([data-theme="structured"], [data-theme="white"], [data-theme="aurora"]) .left-note { padding-left: 0; }