/* =========================================================================
   Responsive pass, plus one base correction. Layered last so it can lift the
   earlier rules without those files having to be rewritten.

   This module gets used standing at a counter with a receipt in one hand, so
   the phone is the primary device, not an afterthought.
   ========================================================================= */

/* -------------------------------------------------------------------------
   An <input> with no type attribute does not match input[type=text], and this
   codebase writes plenty of them (entity name, vendor, the meal fields, notes).
   They were falling through to the browser default: 13px text in a 21px box,
   sitting next to properly styled siblings. Match on what an input is NOT.
   ------------------------------------------------------------------------- */
input:not([type]), input[type=tel], input[type=url], input[type=search] {
  width: 100%;
  padding: 9px 11px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: var(--r-sm);
  transition: border-color .12s, box-shadow .12s;
}
input:not([type]):hover:not(:disabled),
input[type=tel]:hover:not(:disabled) { border-color: var(--line-strong); }
input:not([type]):focus, input[type=tel]:focus,
input[type=url]:focus, input[type=search]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
input:not([type]):disabled {
  opacity: .55; cursor: not-allowed; background: var(--sunken);
}
input:not([type])::placeholder { color: var(--ink-3); opacity: .75; }

/* Desktop: the top strip is just the brand, and the menu never collapses. */
.sidetop { display: block; }
.sidetop .here,
.navtoggle { display: none; }
.sidebody { display: flex; flex-direction: column; flex: 1; min-height: 0; }

@media (max-width: 900px) {

  /* ---------------------------------------------------------------------
     NAVIGATION. The strip of unlabelled icons that used to live here hid
     most of its own items off the right edge and gave no clue what any of
     them were. It is now a bar that names the page you are on plus a menu
     that spells every destination out in full.
     --------------------------------------------------------------------- */
  .side {
    position: sticky; top: 0; z-index: 40;
    width: auto; height: auto;
    display: block;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 0;
  }
  .sidetop {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 0 var(--s3) 0 var(--s4);
    min-height: 54px;
  }
  .brand { padding: 0; flex: none; }
  /* The wordmark gives way to the page name, which is the more useful of
     the two once you are inside the app. */
  .brand .word { display: none; }
  .sidetop .here {
    display: block;
    flex: 1; min-width: 0;
    font-weight: 650; font-size: 15px; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .navtoggle {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 40px; padding: 8px 12px;
    background: transparent; border: 1px solid var(--field-line);
    border-radius: var(--r-sm);
    color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; flex: none;
  }
  .navtoggle .i { width: 18px; height: 18px; }
  .navtoggle svg:nth-of-type(2) { display: none; }
  .side.open .navtoggle { background: var(--sunken); color: var(--ink); }
  .side.open .navtoggle svg:nth-of-type(1) { display: none; }
  .side.open .navtoggle svg:nth-of-type(2) { display: inline; }

  /* The menu itself. Hidden until asked for, then a plain vertical list. */
  .sidebody {
    display: none;
    border-top: 1px solid var(--line);
    padding: var(--s2) var(--s2) var(--s3);
    max-height: calc(100vh - 54px);
    overflow-y: auto;
  }
  .side.open .sidebody { display: block; }

  nav.nav {
    display: block;
    flex-direction: column;
    overflow: visible;
    padding: 0;
  }
  .navsec {
    display: block;
    padding: var(--s3) var(--s3) 5px;
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 650;
  }
  .navitem {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 10px var(--s3);
    white-space: normal;
    border-radius: var(--r-sm);
  }
  /* Every label is visible. That was the whole problem. */
  .navitem span.lbl { display: inline; font-size: 15px; }

  .sidefoot {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s3);
    border-top: 1px solid var(--line);
    margin-top: var(--s2);
    padding: var(--s3);
    white-space: normal;
  }
  .sidefoot .who {
    display: block;
    font-size: 13px; color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sidefoot a { flex: none; }

  /* ---------------------------------------------------------------------
     FORM CONTROLS. Any control under 16px makes iOS Safari zoom the whole
     page the moment it gains focus, and it never zooms back. Every "this
     feels broken on my phone" report starts here.
     --------------------------------------------------------------------- */
  input:not([type]), input[type=text], input[type=email], input[type=number],
  input[type=date], input[type=password], input[type=tel], input[type=url],
  input[type=search], select, textarea {
    font-size: 16px;
    min-height: 44px;
    padding: 10px 12px;
  }
  textarea { min-height: 96px; line-height: 1.5; }
  input[type=file] { font-size: 15px; min-height: 44px; }

  /* Touch targets. 44px is the smallest a finger hits reliably. */
  .btn { min-height: 44px; padding: 11px 17px; font-size: 15px; }
  .btn.sm { min-height: 38px; padding: 8px 13px; font-size: 14px; }
  .btnrow { gap: var(--s2) var(--s3); }
  .btnrow > .btn:only-child { width: 100%; }

  .chk input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; }
  .linkbtn { padding: 6px 0; min-height: 32px; }

  /* The headline number does not need to be desktop sized on a phone, and
     the buttons beside it should not be squeezed into a corner. */
  .hero { padding: var(--s4); gap: var(--s3); }
  .hero .v { font-size: 28px; }
  .hero .right { display: flex; gap: var(--s2); flex-wrap: wrap; width: 100%; }
  .hero .right .btn { flex: 1 1 auto; }

  h1 { font-size: 23px; }
  .card { padding: var(--s4); }
  .page { padding: var(--s4) var(--s4) 88px; }
}

@media (max-width: 600px) {

  /* Housing costs and similar: two cramped columns are worse than one clean
     one once the fields are touch sized. */
  .grid3 { grid-template-columns: 1fr; }

  /* Month grid stays two across, which is the right density for a year at a
     glance, but the cards get room to breathe. */
  .months { grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
  .mcard { padding: 14px; }
  .mcard .a { font-size: 17px; }

  .covrow { flex-direction: column; gap: var(--s2); }
  .covrow .mark { min-width: 0; }

  /* Document meta tables: a fixed 200px label column eats half a phone. */
  .metatable td:first-child { width: auto; white-space: nowrap; padding-right: var(--s3); }

  /* ---------------------------------------------------------------------
     The month's lines become stacked records rather than a table the reader
     has to drag sideways. Each cell carries its own label, so nothing has to
     be matched back to a header that has scrolled out of view. Only the
     transactional table does this; printed documents keep real table rows.
     --------------------------------------------------------------------- */
  .linetable { min-width: 0; }
  .linetable thead { display: none; }
  .linetable tbody tr {
    display: block;
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--line);
  }
  .linetable tbody tr:last-child { border-bottom: 0; }
  .linetable tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s4);
    border: 0;
    padding: 3px 0;
    text-align: left;
  }
  .linetable tbody td:empty { display: none; }
  .linetable tbody td::before {
    content: attr(data-l);
    flex: none;
    color: var(--ink-3);
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 650;
    padding-top: 2px;
  }
  .linetable tbody td.r { font-weight: 650; }
  .linetable tbody td .det { text-align: right; }
  .linetable tbody tr.total { background: var(--sunken); font-weight: 700; }
  /* The word Total is redundant once the amount carries its own label. */
  .linetable tbody tr.total td:first-child { display: none; }
  /* The remove control gets its own line, away from the figures. */
  .linetable tbody td.act { justify-content: flex-end; padding-top: var(--s2); }
  .linetable tbody td.act::before { content: none; }
}