/* Red Ember — shared design system.
   Palette matches the Finances page. Chart series colors are the
   validated set (worst adjacent CVD ΔE 11.4 on white). */
:root{
  --ink:#20242C;--ink-70:#4E5462;--ink-45:#7C8290;--paper:#EFF1F4;--card:#fff;--line:#DCDFE7;
  --pine:#136A5E;--pine-dk:#0F5951;--ember:#B0512A;--gold:#E9C46A;--slate:#2F4858;
  --s1:#00846B;--s2:#3268B8;--s3:#C2551F;--s4:#8A3D9E;--s5:#94700C;--s6:#A61E4D;
  --good:#136A5E;--bad:#A6301E;--grid:#E6E9EF;--axis:#C9CDD7;
  --wash:#F6F7F9;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Public Sans",system-ui,sans-serif;font-size:15.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:34px 20px 90px}
h1{font-family:Literata,serif;font-weight:700;font-size:clamp(25px,4vw,33px);letter-spacing:-.012em;margin:0 0 6px}
/* The way back, injected into the <h1> by topBar(). See the note there for why
   it lives inside the heading: an element in the heading's own line box adds
   no height, and this exists precisely so that nothing has to move. Everything
   is in `em` so it tracks the clamped heading size instead of looking tacked
   on at 25px and swallowed at 33px. */
h1 .backup{display:inline-flex;align-items:center;justify-content:center;position:relative;
  width:.82em;height:.82em;margin-right:.26em;vertical-align:-.02em;flex:none;
  color:var(--ink-45);text-decoration:none;transition:color .12s}
h1 .backup:hover,h1 .backup:focus-visible{color:var(--pine)}
h1 .backup svg{width:100%;height:100%;display:block}
/* A ~27px glyph is a fine thing to LOOK at and a poor thing to hit with a
   thumb. This grows the tap target to 44px without growing the element: the
   pseudo-element is positioned, so it never contributes to layout and the
   heading's height is unchanged. It overlaps the first few characters of the
   title, which is inert text, so nothing else loses a tap. */
h1 .backup::before{content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
h2{font-family:Literata,serif;font-weight:600;font-size:20px;letter-spacing:-.01em;margin:0 0 4px}
h3{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);
  font-family:"IBM Plex Mono",monospace;margin:0 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.sub{color:var(--ink-70);margin:0;font-size:15px}
.cap{color:var(--ink-70);font-size:13.5px;margin:0 0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-top:18px;
  box-shadow:0 1px 2px rgba(32,36,44,.05),0 8px 24px -14px rgba(32,36,44,.16)}
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:9px 17px;
  font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer}
.btn:hover{background:var(--wash)}
.btn.p{background:var(--pine);border-color:var(--pine);color:#fff}
.btn.p:hover{background:var(--pine-dk)}
.btn.p:disabled{opacity:.6;cursor:default}
.btn.x{border:none;background:none;color:var(--ink-45);padding:4px 7px;font-size:16px;line-height:1}
.btn.x:hover{color:var(--bad)}
.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
input[type=text],input[type=number],input[type=month],input[type=email],input[type=password]{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  font-family:"IBM Plex Mono",monospace;font-size:14px;background:#fff;color:var(--ink)}
input:focus{outline:2px solid var(--pine);outline-offset:-1px}
label.fld{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45);
  font-family:"IBM Plex Mono",monospace;margin-bottom:5px}
.note{background:#FBF5E7;border:1px solid #EFE0BE;border-radius:10px;padding:12px 15px;font-size:13px;color:#6B551F;margin-top:18px}
.err{background:#FDF1EE;border:1px solid #F2CFC4;border-radius:10px;padding:11px 14px;font-size:13.5px;color:#8C2D14;margin-top:14px}
.ok{background:#F1F8F5;border:1px solid #C6E2D6;border-radius:10px;padding:11px 14px;font-size:13.5px;color:#12594B;margin-top:14px}
/* ---- top bar ---- */
.bar{background:#fff;border-bottom:1px solid var(--line)}
.bar .in{max-width:1120px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:14px}
.bar a.home{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;font-weight:700;
  font-family:Literata,serif;font-size:16px;letter-spacing:-.01em}
.bar .who{margin-left:auto;font-size:12.5px;color:var(--ink-45);font-family:"IBM Plex Mono",monospace}
/* .crumb is no longer rendered — topBar() still accepts one so a real
   breadcrumb is one line away if a page ever gains a child page. */
/* ---- status pill ---- */
.saving{font-size:11.5px;font-family:"IBM Plex Mono",monospace;color:var(--ink-45);
  display:inline-flex;align-items:center;gap:6px}
.saving i{width:7px;height:7px;border-radius:50%;background:var(--good);display:inline-block}
.saving.dirty i{background:var(--gold)}
.saving.fail i{background:var(--bad)}
/* ---- shared bits ---- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45);
  font-family:"IBM Plex Mono",monospace;font-weight:500}
td{font-family:"IBM Plex Mono",monospace}
td:first-child,th:first-child{text-align:left;font-family:"Public Sans",sans-serif}
.pos{color:var(--good)}.neg{color:var(--bad)}
.empty{color:var(--ink-45);font-size:13.5px;padding:18px 0;text-align:center}
svg{display:block;width:100%;height:auto;overflow:visible}
.legend{display:flex;gap:15px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-70);margin-bottom:10px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:11px;height:11px;border-radius:3px;flex:none}
/* ---- tab strip (Andy Ignite divisions) ---- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:18px 0 0;flex-wrap:wrap}
.tabs a{position:relative;top:1px;display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;text-decoration:none;color:var(--ink-45);font-size:14px;font-weight:600;
  border:1px solid transparent;border-radius:10px 10px 0 0;white-space:nowrap}
.tabs a:hover{color:var(--ink);background:var(--wash)}
.tabs a.on{color:var(--ink);background:#fff;border-color:var(--line);border-bottom-color:#fff}
.tabs a .dot{width:7px;height:7px;border-radius:50%;background:var(--axis);flex:none}
.tabs a.on .dot{background:var(--pine)}
.tabs a.soon{opacity:.6}
/* Sub-tabs ride in the parent row, right after the active tab, as a segmented
   pill. Pill rather than tab shape on purpose: two tab-shaped rows read as two
   equal levels, and these are subordinate to the division they sit beside. */
.tabs .subtabs{display:inline-flex;align-items:center;gap:2px;align-self:center;
  margin:0 0 1px 10px;padding:3px;background:var(--wash);border-radius:999px;
  border:1px solid var(--line)}
.tabs .subtabs a{top:0;padding:5px 13px;gap:0;font-size:12.5px;font-weight:600;
  border:0;border-radius:999px;color:var(--ink-45)}
.tabs .subtabs a:hover{background:#fff;color:var(--ink)}
.tabs .subtabs a.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.10)}
/* .note is the yellow callout; inside a stat tile it is just small print. */
.tile .note{background:none;border:0;border-radius:0;padding:0;margin-top:5px;
  color:var(--ink-45);font-size:12px}

/* ── print ───────────────────────────────────────────────────────────
   A fridge-door sheet, not a screenshot of an app.
   Everything you cannot do on paper is removed: the nav, the filters,
   the buttons, the inputs, the save pill. What is left is the content,
   in black on white, at a size someone can read across a kitchen. */
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff !important; color: #000; font-size: 11.5pt; }
  .wrap { max-width: none; padding: 0; }

  /* Chrome and anything that only exists to be clicked. */
  .bar, .tabs, .subtabs, .seg, .saving, .noprint,
  button, select, input, textarea, .acts, .btn, .go { display: none !important; }
  /* A card whose whole body was interactive leaves its heading behind. */
  .card.noprint { display: none !important }
  /* Explanatory captions are for someone deciding how to use the app, not
     for someone holding the sheet. The first line under a heading stays;
     the rest goes. */
  .card > .cap { font-size: 9pt; color: #444 }

  /* Cards become plain sections — a printed page does not need shadows,
     and a border around every block wastes the toner and the eye. */
  .card {
    border: 0 !important; box-shadow: none !important; background: none !important;
    padding: 0 !important; margin: 0 0 12pt !important;
  }
  /* NOT break-inside:avoid. A card that will not split gets pushed whole to
     the next page, leaving half a sheet blank — which is how a one-page
     cleaning list became two. Rows must not split; cards may. */
  h1 { font-size: 20pt; margin-bottom: 2pt }
  h2 { font-size: 13pt; margin-top: 10pt }
  h3 { font-size: 8.5pt; border-bottom: 1px solid #000; }
  .sub, .cap { color: #333 }
  /* Captions that only explain the interface are noise on paper. */
  .cap.screenonly { display: none !important }

  a { color: #000; text-decoration: none }
  a[href^="http"]::after { content: "" }        /* no URL spew */

  .item, .day, .c, .t, .mealrow, .shop, .plan, .mx {
    break-inside: avoid; page-break-inside: avoid;
    padding: 3pt 0 !important; min-height: 0 !important;
  }
  /* Screen spacing is generous because a screen scrolls. Paper does not. */
  .item .m, .tm, .cm, .dm { margin-top: 1pt }
  .dot, .tick { border-color: #000 !important }
  .own, .chip, .cad, .pill { border: 1px solid #666 !important; background: none !important;
    color: #000 !important }
  /* Two columns survive on Letter and halve the page count. Only collapse
     the ones that genuinely need the width. */
  .grid2 { grid-template-columns: 1fr 1fr !important; gap: 10pt !important }

  /* A tick box you can actually tick with a pen. */
  .item .dot::after, .c .dot::after { content: "" }
  .printbox { display: inline-block !important; width: 11pt; height: 11pt;
    border: 1px solid #000; margin-right: 7pt; vertical-align: -1pt }
}
/* ── on a phone ───────────────────────────────────────────────────
 *
 * Added to a home screen these pages open with no browser chrome at all,
 * and an app that opens with a website's header on it does not read as an
 * app. So the header goes, and with it the two other things that only
 * exist to help someone decide where to go: the tab strip, and the line
 * of explanation under the title. On a phone that decision was already
 * made — by tapping an icon. The title and the content start at the top,
 * which is where a native app starts.
 *
 * What does NOT go is the way out. In standalone mode there is no address
 * bar and no back button, so hiding every link would strand you in Tasks
 * with no route to anything else and no way to sign out. Those two move
 * to a quiet row at the very bottom, past the content, where they are
 * reachable without competing with it.
 */
/* Declared before the media query below, not after: both selectors have the
   same specificity, so whichever is written last wins — and written last,
   `display:none` would beat the phone rule and the footer would never show. */
.mobnav {
  display: none; gap: 20px; align-items: center; justify-content: center;
  flex-wrap: wrap; margin: 26px 0 0; padding: 16px 16px 26px;
  border-top: 1px solid var(--line);
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--ink-45);
}
.mobnav a { color: var(--ink-45); text-decoration: none }
.mobnav a:first-child { color: var(--pine); font-weight: 500 }

/* Pushes a group to the right end of a flex row on a wide screen. On a phone
   it stops pushing: `margin-left:auto` in a wrapping row does not put the
   group on the right, it puts the group on a LINE OF ITS OWN, right-aligned,
   with the rest of that line empty. Three of those stacked up is what the
   dashboard header had become. */
.pushright { margin-left: auto }

@media (max-width: 720px) {
  .bar { display: none }
  .tabs { display: none }
  .sub { display: none }
  /* The top padding was sized to sit under a header that is now gone. */
  .wrap { padding: 20px 16px 44px }
  h1 { margin-bottom: 4px }
  .mobnav { display: flex }
  /* A little narrower so three names fit a 390px screen with room to spare.
     `.card .seg` rather than `.seg` on purpose: the pages define `.seg`
     themselves and their rule is later in the document, so a plain `.seg`
     here would lose. This outranks it without an !important. */
  .card .seg button { padding: 8px 12px; font-size: 12.5px }
  /* printButton() moves itself here on a phone — see the note in auth.js. */
  .hd { width: 100% }
  .pushright { margin-left: 0 }
}
@media print { .mobnav { display: none !important } }

/* Only ever seen on paper. */
.printonly { display: none }
@media print { .printonly { display: inline-block } #printWeek, #printMeals { display: block !important } }


/* The technical half of an error message, folded away.
   Kept rather than dropped: when something is genuinely broken this is the
   only useful thing on the page, and "it says error" is a support
   conversation that goes nowhere. It just should not be the first thing a
   customer reads about their own household. */
.tech{margin-top:8px;font-size:12px}
.tech summary{cursor:pointer;color:var(--ink-45);font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.04em;list-style:none;display:inline-block}
.tech summary::-webkit-details-marker{display:none}
.tech summary::before{content:"▸ ";display:inline-block;transition:transform .12s}
.tech[open] summary::before{content:"▾ "}
.tech summary:hover{color:var(--ink-70)}
.tech code{display:block;margin-top:6px;padding:8px 10px;background:var(--wash);
  border:1px solid var(--line);border-radius:8px;color:var(--ink-70);
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word}

/* The sync-failure banner. Amber, not red: nothing is broken in the
   household's own data — a connection has stopped bringing things in, which
   is worth knowing and is not an emergency. Red here would compete with the
   genuinely bad states on the money pages. */
.warn{border-left:3px solid #C4761B;background:#FBF5E7;border-radius:0 10px 10px 0;
  padding:12px 16px;margin:16px 0;font-size:13.5px;color:#6B551F;line-height:1.5}
.warn b{color:#4A3A12;display:block;margin-bottom:2px}
.warn a{color:#6B551F;font-weight:600;white-space:nowrap}
@media print{.warn{display:none}}