/* Ask's guide answers (app/guide.js) and Your week. Uses the look's tokens from app.css; nothing here sets its own colors. */
.guide-hero { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: var(--r-card); background: var(--tile); }
.guide-hero-photo { flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: var(--r-control); background: var(--card); overflow: hidden; }
.guide-hero-photo .ph { width: 72px; height: 72px; }
.guide-hero-text { display: grid; gap: 4px; min-width: 0; }
.guide-hero-name { font: 400 22px/1.15 var(--display); }
.guide-hero-sub { font-size: 14px; color: var(--ink-2); }
.guide-hero .btn { justify-self: start; margin-top: 4px; }

.guide-plan, .guide-yours { display: grid; gap: 10px; }
.guide-plan .kicker, .guide-yours .kicker { color: var(--ink-3); }
.guide-plan-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-card); background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.guide-plan-card .grow { flex: 1; display: grid; gap: 3px; min-width: 0; }
.guide-plan-card .t { font-size: 17px; font-weight: 600; }
.guide-plan-card .days { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--good); }
.guide-plan-card .d { font-size: 14px; color: var(--ink-2); }
.guide-plan-card .btn { flex: none; }

.guide-row .grow { display: grid; gap: 2px; }
.guide-row .t { font-size: 16px; }
.guide-row .d { font-size: 14px; color: var(--ink-2); }
.guide-row .ph { flex: none; width: 44px; height: 44px; }

.guide-more { border-top: 1px solid var(--line); }
.guide-more summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; }
.guide-more summary::-webkit-details-marker { display: none; }
.guide-more summary svg { flex: none; width: 18px; height: 18px; color: var(--ink-3); transform: rotate(90deg); transition: transform 0.2s ease; }
.guide-more[open] summary svg { transform: rotate(-90deg); }
.guide-more > :not(summary) { margin-bottom: 14px; }

.guide-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.guide-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; counter-increment: step; }
.guide-steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--tile); font: 400 16px/1 var(--display); }
.guide-steps .t { font-size: 16px; font-weight: 600; }
.guide-steps .t small { font-weight: 500; color: var(--ink-3); }
.guide-steps .d { font-size: 15px; color: var(--ink-2); }

.guide-modes { display: grid; border-radius: var(--r-control); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.guide-mode { display: grid; grid-template-columns: minmax(84px, 0.8fr) 1.6fr minmax(80px, 0.9fr); gap: 10px; padding: 10px 12px; font-size: 14.5px; }
.guide-mode + .guide-mode { border-top: 1px solid var(--line); }
.guide-mode.head { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); background: var(--tile); }

.guide-unsure, .guide-sources { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--ink-2); }
.guide-unsure svg, .guide-sources svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ink-3); }
.guide-sources a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.guide-sources.dim { color: var(--ink-3); }

.week-day { margin-top: 26px; }
.week-day-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.week-day-head .d { font-size: 14px; color: var(--ink-3); }
.week-day.today .section-title { color: var(--good); }
.week-day .row .grow { display: grid; gap: 2px; }
.week-day .row .t { font-size: 16px; }
.week-day .row .d { font-size: 14px; color: var(--ink-2); }
.week-day .ph { flex: none; width: 40px; height: 40px; }
.week-extra .icon-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -8px -6px 0; border-radius: 50%; color: var(--ink-3); }
.week-extra .icon-btn svg { width: 18px; height: 18px; }
.guide-hero-text { min-width: 0; }
.guide-hero-name, .guide-plan-card .t, .guide-plan-card .d, .guide-row .d, .guide-steps .d, .guide-unsure span, .guide-sources span { overflow-wrap: anywhere; }
.answer-block .say.guide-say { font-size: 21px; line-height: 1.28; letter-spacing: 0; }