/* The only stylesheet: just enough for every page to work on a phone. */
/* Light or dark, as the system is set: the browser's own colors for each.
   The page paints its own background (white when light), since a browser
   may otherwise show its own color behind a page that can go dark. */
:root { color-scheme: light dark; background: Canvas; color: CanvasText; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { max-width: 50em; margin: 0 auto; padding: 0.5em 1em; overflow-wrap: break-word; }
img, input, select, textarea { max-width: 100%; }
input, textarea { box-sizing: border-box; }
/* The page's font size: phones don't zoom in on a focused field. */
input, select, textarea, button { font: inherit; }
textarea { width: 100%; }
/* Fieldsets otherwise grow to their widest field. */
fieldset { min-width: 0; }
/* A line of form fields (filters, search) or buttons (ui::button_row) wraps between them, never inside one. */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 1em; }
/* Dates, and the links in a line of them (ui::inline_list), never break across lines. */
time, .item { white-space: nowrap; }
/* Code blocks and a note's tables scroll sideways rather than the page. */
pre, table { display: block; overflow-x: auto; }
/* Faint cell borders so columns line up visibly. */
table { border-collapse: collapse; }
th, td { border: thin dotted; }
/* Lists (ui::table) wrap rather than scroll: a long word or address in a
   cell breaks onto more lines instead of widening the table. */
.cards td { overflow-wrap: anywhere; }

/* The logged-in home page's modules: big buttons, each its name and its rat,
   in the dotted line of table cells; one per line on a phone. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); gap: 0.75em; margin: 1em 0; }
.tiles a { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.75em 1em; border: thin dotted; color: inherit; text-decoration: none; font-size: 1.25em; }
/* Settings: last, across the whole row, and slimmer than a module. */
.tiles a.wide { grid-column: 1 / -1; padding: 0.4em 1em; font-size: 1em; }

/* Folds (ui::fold, and the menu at the top of every page): on a phone, a
   line that opens to show what's under it; on a wider screen, always open,
   with no line. Browsers that can't hold one open show the line there too. */
.fold > summary { cursor: pointer; }
.menu > summary { list-style: none; font-size: 1.5em; }
.menu > summary::-webkit-details-marker { display: none; }
/* The top of every page: the menu on the left and, on a phone, the home rat on the right. */
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
@supports selector(::details-content) {
  @media (width > 40em) {
    .fold > summary { display: none; }
    .fold::details-content { display: block; content-visibility: visible; }
    .home { display: none; }
  }
}

/* Lists made with ui::table: on a phone, each row is a card with labelled cells. */
@media (max-width: 40em) {
  .cards, .cards tbody, .cards tr, .cards td { display: block; }
  .cards thead { display: none; }
  .cards tr { padding: 0.5em 0; border-bottom: 1px solid; }
  .cards td { border: none; }
  .cards td:empty { display: none; }
  .cards td[data-label]::before { content: attr(data-label) ": "; }
}

/* Money on the budget's pages: green for income and gains, red for expenses and losses, in place of + and − signs. Balances stay the text's color. */
.plus { color: #137333; }
.minus { color: #c5221f; }
@media (prefers-color-scheme: dark) {
  .plus { color: #81c995; }
  .minus { color: #f28b82; }
}