/* The food widget: today's calorie pace and the protein / fat / sugar rings.
   Shared by the food page and the Today area of the dashboard (food-widget.js). */
  .fday { margin: var(--space-5) 0 0; background: var(--surface); border: var(--border-width) solid var(--border);
         border-radius: var(--radius-panel); padding: var(--space-4) var(--space-3) var(--space-3); }
.rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2);
         margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-width) solid var(--border); }

.pace__head { margin: 0 var(--space-1); font-size: var(--text-lg); font-weight: var(--weight-bold);
              letter-spacing: var(--tracking-tight); }
.pace__sub { margin: 2px var(--space-1) 0; font-size: var(--text-sm); color: var(--ink-label); }
.pace__chart { display: block; width: 100%; height: auto; margin: var(--space-3) 0 0; overflow: visible; }
.pace__chart text { font-family: var(--font-sans); font-size: 10px; fill: var(--ink-subtle); }
.pace__chart .now-label { fill: var(--ink); font-weight: 700; }
.blocks { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-3) 0 0; }
.block { font-size: var(--text-xs); padding: 4px 8px; border-radius: var(--radius-row);
         background: var(--bg); color: var(--ink-label); white-space: nowrap; }
.block b { color: var(--ink); font-weight: var(--weight-medium); }
.block--now { background: color-mix(in srgb, var(--planned) 14%, transparent); color: var(--ink); }
.nudge { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-row);
         background: color-mix(in srgb, var(--planned) 10%, transparent); font-size: var(--text-sm); color: var(--ink-body); }
.ring { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.ring__dial { position: relative; width: 72px; height: 72px; }
.ring__dial svg { width: 72px; height: 72px; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--border); stroke-width: 7; }
.ring__bar { fill: none; stroke-width: 7; stroke-linecap: round;
             transition: stroke-dashoffset .6s var(--ease), stroke .3s; }
.ring__value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
               font-size: var(--text-md); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.ring__label { margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.ring__of { margin: 1px 0 0; font-size: var(--text-xs); color: var(--ink-label); }
.fday__sum { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: var(--border-width) solid var(--border);
              font-size: var(--text-sm); color: var(--ink-body); }
.fday__note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--ink-label); }

/* Touch-to-read on the chart. */
.pace__plot { position: relative; touch-action: pan-y; -webkit-user-select: none; user-select: none;
              -webkit-tap-highlight-color: transparent; cursor: crosshair; }
.pace__plot .hidden { display: none; }
.scrub__line { stroke: var(--ink); stroke-width: 1; }
.scrub__dot { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.pace__tip { position: absolute; top: -6px; transform: translate(-50%, -100%); pointer-events: none;
             display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; white-space: nowrap;
             background: var(--ink); color: var(--surface); border-radius: var(--radius-row);
             font-size: var(--text-xs); line-height: 1.35; font-variant-numeric: tabular-nums; z-index: 3; }
.pace__tip b { font-weight: var(--weight-bold); }
.pace__tipmeal { font-weight: var(--weight-medium); }
.pace__tipaim { opacity: .75; }
.pace__tipdiff { margin-left: 2px; color: var(--good); }
.pace__tipdiff--over { color: var(--warm); }