/* Home: the three steps, the food cost and how sure it is, and insights (pages/Home.tsx).
   Same marks as the rest of the app: highlighter for what needs a look, a checkmark for what's done. */

.home .lede { font-size: 18px; max-width: 640px; margin: 8px 0 24px; }

/* ---- the three steps ---- */
.journey { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.journey .step { display: flex; gap: 12px; padding: 16px; background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius); }
.journey .step-number { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  border: 2px solid var(--edge); color: var(--ink-soft); }
.journey .step.done .step-number { border-color: var(--done); }
.journey .step.in_progress .step-number, .journey .step.next .step-number, .journey .step.now .step-number { border-color: var(--ink); color: var(--ink); }
.journey .step.later { background: transparent; color: var(--ink-soft); }
.journey .step-body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.journey .step-body p { margin: 0; }
.journey .step-body .button, .journey .step-body button:not(.link) { justify-self: start; margin-top: 4px; }
.step-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.state { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.state.done { color: var(--done); }
.state.in_progress, .state.next { color: var(--ink); }
.improve { margin: 0; padding-left: 18px; color: var(--ink-soft); }
.improve li + li { margin-top: 2px; }

/* The first visit: one column, step 1 open */
.journey-start { grid-template-columns: minmax(0, 720px); }
.journey-start .step.now { border-color: var(--ink); padding: 20px; }
.journey-start h2 { margin: 0; font-size: 20px; }
.start-form { display: flex; gap: 8px; margin-top: 8px; }
.start-form input { flex: 1; }
.start-form button { flex: none; }
.or { color: var(--ink-soft); }

/* ---- food cost ---- */
.food-cost { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; padding: 20px; margin: 20px 0 8px; align-items: center; }
.food-cost-figure { display: grid; gap: 2px; max-width: 220px; }
.food-cost .big { font-size: 48px; font-weight: 700; line-height: 1; }
.sureness { display: grid; gap: 8px; }
.bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--walk-in); border: 1px solid var(--edge); }
.bar .seg { display: block; height: 100%; }
.seg.verified, .key.verified { background: var(--ok-edge); }
.seg.estimate, .key.estimate { background: var(--est-edge); }
.seg.needs_info, .key.needs_info { background: var(--no-edge); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.legend li { display: flex; align-items: center; gap: 6px; }
.key { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sure-next { margin: 0; }

/* ---- insights ---- */
.insight-group h2 { margin-bottom: 2px; }
.group-note { margin: 0 0 10px; }
.insights { list-style: none; padding: 0; margin: 10px 0 0; }
.insight { display: flex; gap: 12px; padding: 14px 16px; align-items: flex-start; }
.insight + .insight { border-top: 1px solid var(--edge); }
.insight .tone { flex: none; width: 20px; text-align: center; color: var(--ink-soft); line-height: 1.5; }
.insight.attention .tone { color: var(--ink); }
.insight-body { display: grid; gap: 2px; min-width: 0; }
.insight-title { margin: 0; font-weight: 600; }
.insight-title a { text-decoration: none; }
.insight-title a:hover { text-decoration: underline; }
.insight-body p.hint { margin: 0; }
.insight-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin-top: 2px; }
.insight-actions a { font-weight: 600; }

/* "See all": a peek of the list on hover or focus, the whole list in a sheet on click */
.peek { position: relative; display: inline-block; }
.peek .link { padding: 0; }
.peek-tip { display: none; position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); width: max-content; max-width: min(360px, 80vw);
  padding: 10px 12px; background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(0 0 0 / .12); font-size: 14px; }
.peek-tip > span { display: block; }
.peek:hover .peek-tip, .peek:focus-within .peek-tip { display: grid; gap: 2px; }
.insight-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; }
.insight-list a { font-weight: 600; }
.sheet .insight-list { max-height: 60vh; overflow: auto; }

@media (max-width: 760px) {
  .journey { grid-template-columns: minmax(0, 1fr); }
  .food-cost { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .food-cost .big { font-size: 40px; }
  .start-form { flex-direction: column; }
  .peek-tip { display: none !important; } /* touch: the sheet instead */
}

/* Home, while the numbers are worked out: a card that says what's happening, the page taking shape under it. */
.home-loading .loading-card { display: flex; gap: 20px; align-items: flex-start; padding: 22px; }
.loading-steps { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.loading-steps li { transition: color .3s, opacity .3s; }
.loading-steps .done { color: var(--ok-ink); }
.loading-steps .now { font-weight: 700; }
.loading-steps .later { opacity: .45; }
/* Three dots circling a plate. */
.plate-spin { position: relative; width: 56px; height: 56px; flex: none; border-radius: 50%; border: 3px solid var(--edge);
  animation: plate-turn 1.6s linear infinite; }
.plate-spin span { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); top: -6px; left: 20px; }
.plate-spin span:nth-child(2) { top: auto; bottom: -6px; background: var(--est-ink); }
.plate-spin span:nth-child(3) { top: 20px; left: -6px; background: var(--ok-ink); }
@keyframes plate-turn { to { transform: rotate(360deg); } }
.skeleton { height: 92px; margin-top: 14px; padding: 16px; display: grid; gap: 10px; }
.skeleton span { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--edge) 0%, var(--walk-in) 50%, var(--edge) 100%);
  background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.skeleton span:nth-child(1) { width: 45%; } .skeleton span:nth-child(2) { width: 80%; } .skeleton span:nth-child(3) { width: 60%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* Remembered numbers, being brought up to date. */
.updating { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-soft); margin: 0 0 6px; }
.updating .spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--edge); border-top-color: var(--ink); animation: plate-turn .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .plate-spin, .skeleton span, .updating .spinner { animation: none; } }