/* Feeding tracker. Uses the palette tokens defined in index.html's :root. */

/* Full width — the same measure as the Shopping List, so the tabs don't jump size.
   On a wide screen the cards split into two columns (see the media query at the
   bottom) rather than stretching one column across 1100px. */
.feed-wrap{position:relative;z-index:1;width:100%;margin:0 auto;padding:16px 0}
.feed-card{
  position:relative;z-index:1;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 24px;margin-bottom:18px;
}
.feed-card h2{font-family:'Fraunces',serif;font-weight:600;font-size:1.5rem;letter-spacing:-.01em}

/* ---------- NOW ---------- */
.feed-now .now-line{font-size:1.2rem;margin-bottom:16px;color:var(--ink)}
.feed-now .now-line b{color:var(--sage-deep)}
.now-actions{display:flex;gap:10px;flex-wrap:wrap}
/* Log feed is the one thing you reach for at 3am — give it the full width, and put
   the three nappy buttons in an even row beneath rather than letting them wrap raggedly. */
.btn-log{width:100%;margin-bottom:10px}
/* minmax(0,1fr), NOT 1fr: a bare 1fr is minmax(auto,1fr), and `auto` refuses to
   shrink below the content's min width — so these three buttons pushed past the
   card edge and got clipped on a narrow phone. */
.now-nappies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
/* No nowrap: the track may shrink to 0, so nowrap text would just spill out of the
   button and widen the card again. Let short labels wrap instead. */
.now-nappies .btn-ghost{
  width:100%;min-width:0;padding:0 6px;
  display:flex;align-items:center;justify-content:center;gap:4px;
  line-height:1.2;overflow:hidden;
}

.btn-primary{
  min-height:52px;padding:0 20px;border:0;cursor:pointer;
  border-radius:var(--radius-sm);background:var(--sage-deep);color:#fff;
  font-family:inherit;font-size:1rem;font-weight:600;
  transition:background .15s ease,transform .1s ease;
}
.btn-primary:hover{background:var(--sage)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.4;cursor:default}
.btn-ghost{
  min-height:48px;padding:0 16px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--ink);
  font-family:inherit;font-size:.95rem;font-weight:500;
}
.btn-ghost:hover{border-color:var(--sage)}
.btn-ghost:disabled{opacity:.3;cursor:default}
.btn-nav{min-height:44px;min-width:44px;padding:0 12px}    /* 44px — a real thumb target */
.btn-danger{
  width:100%;min-height:48px;margin-top:10px;cursor:pointer;
  background:transparent;color:var(--terra-deep);
  border:1px solid var(--terra-soft);border-radius:var(--radius-sm);
  font-family:inherit;font-size:.95rem;font-weight:600;
}
.btn-danger:hover{background:var(--terra-soft)}

/* ---------- TODAY ---------- */
.day-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.day-title{text-align:center;flex:1}
.day-sub{color:var(--ink-soft);font-size:.9rem;font-weight:500}
.totals{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:22px 0 10px}
.totals b{font-family:'Fraunces',serif;font-size:2.4rem;line-height:1;color:var(--ink)}
.totals span{color:var(--ink-soft);font-size:.95rem}

/* Bar is scaled to the top of the band, so the healthy zone is a fixed region. */
.fbar{position:relative;height:20px;border-radius:10px;background:var(--surface-2);
      border:1px solid var(--line);overflow:hidden}
.fbar .zone{position:absolute;top:0;bottom:0;background:var(--sage-soft)}
.fbar .fill{position:absolute;top:0;bottom:0;background:var(--sage)}
.fbar .fill.est{
  background:repeating-linear-gradient(45deg,
    var(--sage),var(--sage) 5px,var(--sage-soft) 5px,var(--sage-soft) 10px);
}
.fbar .marker{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--terra-deep)}
.fbar-legend{display:flex;justify-content:space-between;margin-top:6px;
             font-size:.72rem;color:var(--ink-soft)}
.legend-exp{color:var(--terra-deep);font-weight:600}

/* "Behind" is information, not an alarm — it never gets a warning color. */
.pace{margin-top:14px;font-size:.95rem;color:var(--ink-soft);line-height:1.5}
.pace-ontrack{color:var(--sage-deep);font-weight:500}

/* Red is reserved for >1000 ml/day and a >4h gap in the first four weeks. */
.feed-alert{
  margin-top:14px;padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--terra-soft);color:var(--terra-deep);
  font-size:.92rem;font-weight:500;line-height:1.5;
}

.fstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px;
        padding-top:20px;border-top:1px solid var(--line-soft)}
.fstats div{display:flex;flex-direction:column;gap:3px}
.fstats span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.fstats b{font-size:1.25rem;font-weight:600}
.est-note{margin-top:14px;font-size:.82rem;color:var(--ink-soft);line-height:1.5}

/* ---------- TIMELINE ---------- */
.timeline-hint{margin-top:18px;font-size:.78rem;color:var(--ink-soft)}
.timeline{list-style:none;margin:6px 0 0;padding:0}
/* Row = a big Edit target plus its own Delete button. Both are always visible: a
   touch screen has no hover, so a hover-only affordance is an invisible one. */
.timeline li{display:flex;align-items:center;gap:4px;border-top:1px solid var(--line-soft)}
.trow{
  flex:1;min-width:0;
  /* minmax(0,…) so the note column can actually ellipsize instead of forcing the row wider */
  display:grid;grid-template-columns:52px minmax(0,1fr) auto 72px minmax(0,1.4fr) auto;
  gap:10px;align-items:center;
  min-height:56px;padding:10px 6px;
  background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:1rem;color:var(--ink);
  border-radius:10px;
}
.trow:hover{background:var(--surface-2)}
.trow:focus-visible{outline:2px solid var(--sage);outline-offset:-2px}
.trow .t{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.9rem}
.trow .k{font-size:.9rem;white-space:nowrap}
.trow .v{font-weight:700;font-variant-numeric:tabular-nums}
.trow .g,.trow .n{font-size:.78rem;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis}
.trow .pen{
  font-size:.72rem;font-weight:600;white-space:nowrap;
  color:var(--sage-deep);background:var(--sage-soft);
  padding:5px 9px;border-radius:14px;
}
.trow:hover .pen{background:var(--sage-deep);color:#fff}
.trow-diaper .k{color:var(--ink-soft)}
.btn-del{
  flex:0 0 auto;min-width:44px;min-height:44px;
  border:0;background:transparent;cursor:pointer;
  color:var(--ink-soft);font-size:.95rem;border-radius:10px;
}
.btn-del:hover{background:var(--terra-soft);color:var(--terra-deep)}
.btn-del:focus-visible{outline:2px solid var(--terra);outline-offset:-2px}
.timeline-empty{margin-top:20px;color:var(--ink-soft);font-size:.95rem}
.btn-x{border:0;background:transparent;cursor:pointer;color:var(--ink-soft);
       font-size:1rem;opacity:.55;min-width:44px;min-height:44px}
.btn-x:hover{opacity:1;color:var(--terra-deep)}

/* ---------- TIME PICKER ----------
   A bare datetime-local is miserable on a phone, and nearly every feed is logged at or
   near "now" — so: one tap for the common cases, ±5m for a near miss, exact picker
   behind a disclosure. */
.timepick{margin-top:18px;padding:14px;background:var(--surface-2);
          border:1px solid var(--line-soft);border-radius:var(--radius-sm)}
.tp-label{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
          color:var(--ink-soft);font-weight:600;margin-bottom:10px}
.tp-main{display:flex;align-items:center;gap:10px}
.tp-step{
  flex:0 0 auto;min-width:62px;min-height:48px;cursor:pointer;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius-sm);font-family:inherit;font-size:.95rem;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.tp-step:hover{border-color:var(--sage)}
.tp-step:active{background:var(--sage-soft)}
.tp-val{flex:1;text-align:center;line-height:1.25}
.tp-val b{display:block;font-size:1.6rem;font-weight:600;font-variant-numeric:tabular-nums}
.tp-val span{font-size:.8rem;color:var(--ink-soft)}
.tp-future{margin-top:8px;font-size:.78rem;color:var(--terra-deep)}
.tp-chips{margin-top:12px}
.tp-exact{margin-top:12px}
.tp-exact summary{cursor:pointer;font-size:.8rem;font-weight:600;color:var(--ink-soft);
                  list-style:none;display:flex;align-items:center;min-height:44px}
.tp-exact summary::-webkit-details-marker{display:none}
.tp-exact summary::before{content:'▸ '}
.tp-exact[open] summary::before{content:'▾ '}

.feed-empty{text-align:center}
.feed-empty p{color:var(--ink-soft);margin:10px auto 20px;max-width:420px}
.feed-empty .btn-primary{flex:0 0 auto}

/* ---------- WEEK ---------- */
.wbars{display:flex;gap:8px;align-items:flex-end;margin:22px 0 4px}
.wbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.wbar .col{position:relative;width:100%;height:130px;background:var(--surface-2);
           border:1px solid var(--line);border-radius:8px;overflow:hidden}
.wbar .bar{position:absolute;left:0;right:0;bottom:0;z-index:1;background:var(--sage);
           border-radius:6px 6px 0 0;transition:height .25s ease}
.wbar.sel .bar{background:var(--sage-deep)}
/* The band sits ON TOP of the bar and is translucent — otherwise a tall bar paints
   over its own healthy range and you cannot see whether the day landed inside it. */
.wbar .zone{position:absolute;left:0;right:0;z-index:2;pointer-events:none;
            background:rgba(255,253,248,.34);
            border-top:1px dashed var(--sage-deep);border-bottom:1px dashed var(--sage-deep)}
.wbar .lbl{font-size:.72rem;color:var(--ink-soft);font-weight:600}
.wbar .val{font-size:.72rem;font-variant-numeric:tabular-nums;color:var(--ink-soft);min-height:1em}

/* ---------- GROWTH ---------- */
/* A 6-column table has a min-content width that no amount of CSS will shrink, so on a
   narrow phone it burst out of the card and pushed the whole page sideways. It scrolls
   inside its own box instead. */
.growth-scroll{overflow-x:auto;margin-top:16px;-webkit-overflow-scrolling:touch}
.growth{width:100%;min-width:380px;border-collapse:collapse}
.growth th{
  text-align:left;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;padding-bottom:8px;white-space:nowrap;
}
/* Figures never wrap mid-value ("3.20 / kg" over two lines reads as broken). */
.growth td{padding:12px 6px;border-top:1px solid var(--line-soft);font-size:.95rem;white-space:nowrap}
.growth .note{font-size:.82rem;color:var(--ink-soft);white-space:normal}

/* ---------- SETTINGS ---------- */
.setgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}
.setgrid label{display:block;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
               color:var(--ink-soft);font-weight:600}
.setgrid input{
  display:block;width:100%;margin-top:8px;min-height:48px;padding:0 12px;
  font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.setgrid input:focus{outline:2px solid var(--sage);outline-offset:-1px}

/* ---------- SHEET ---------- */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
       background:rgba(58,51,43,.42)}
/* An author `display` beats the UA's [hidden]{display:none}, so say it explicitly —
   without this the backdrop stays painted over the whole app. */
.sheet[hidden]{display:none}
.sheet-inner{
  width:100%;max-width:520px;max-height:92vh;overflow:auto;padding:24px 24px 32px;
  background:var(--surface);border-radius:var(--radius) var(--radius) 0 0;
  box-shadow:var(--shadow-lg);
}
.sheet-inner header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.sheet-inner h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.35rem}
.sheet-inner label{display:block;margin:16px 0 0;font-size:.78rem;letter-spacing:.04em;
                   text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.sheet-inner input{
  display:block;width:100%;margin-top:8px;min-height:50px;padding:0 12px;
  font-family:inherit;font-size:1.05rem;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.sheet-inner input:focus{outline:2px solid var(--sage);outline-offset:-1px}
.sheet-inner input.invalid{border-color:var(--terra);background:var(--terra-soft)}
.sheet-inner .btn-primary{width:100%;margin-top:22px}
/* The sheet is a form — the exact-time input inside the picker is not a top-level field. */
.timepick input{margin-top:8px}
.seg{display:flex;gap:10px;margin-top:16px}
.seg-btn{
  flex:1;min-height:50px;cursor:pointer;font-family:inherit;font-size:1rem;font-weight:600;
  background:var(--surface-2);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-sm);
}
.seg-btn.active{background:var(--sage-deep);color:#fff;border-color:transparent}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{
  flex:1 1 auto;min-width:60px;
  min-height:46px;padding:0 14px;cursor:pointer;font-family:inherit;font-size:.95rem;font-weight:600;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:23px;
}
.timepick .chip{background:var(--surface)}
.chip:hover{border-color:var(--sage)}
.chip.active{background:var(--sage-deep);color:#fff;border-color:transparent}
.hint{margin-top:12px;font-size:.82rem;color:var(--ink-soft)}

/* Below 1000px the two column wrappers vanish (display:contents) and every card
   stacks in DOM order — now, today, week, growth, settings — exactly as before. */
.fcol{display:contents}

/* On a wide screen: two INDEPENDENT columns, so a short card on the left doesn't
   leave a hole waiting for a tall card on the right (which is what a plain grid row
   would do). "Act now" cards left, reference cards right. */
@media(min-width:1000px){
  .feed-wrap{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    gap:0 20px;
    align-items:start;
  }
  .fcol{display:block;min-width:0}
  /* Prose stays at a readable measure even when the column is wide. */
  .pace,.est-note,.feed-alert,.timeline-hint{max-width:68ch}
  /* Four stat columns don't fit the narrower side column. */
  .fcol-side .fstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcol-side .setgrid{grid-template-columns:1fr}
}

.feed-disclaimer{
  position:relative;z-index:1;
  margin:0 auto;padding:6px 4px 56px;max-width:78ch;
  font-size:.82rem;line-height:1.6;color:var(--ink-soft);
}

@media(max-width:620px){
  .feed-card{padding:18px 16px}
  .feed-disclaimer{padding:6px 16px 48px}
  .fstats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .setgrid{grid-template-columns:1fr}
  .totals b{font-size:2rem}
  /* Drop the gap and note columns — time, what, and how much are what matter. */
  .trow{grid-template-columns:46px 1fr auto auto;gap:8px;padding:10px 4px}
  .trow .g,.trow .n{display:none}
  .trow .pen{padding:5px 8px;font-size:.7rem}
  .now-nappies{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .now-nappies .btn-ghost{font-size:.88rem;padding:0 4px}
  .tp-step{min-width:56px}
  .tp-val b{font-size:1.45rem}
  .sheet-inner{padding:20px 16px 28px}
}