/* log screens (webApp/.../web/log/): Log a session, the promotion offer and fix suggestions.
   Uses the tokens and components in app.css. */

.log-form { gap: 18px; padding-bottom: 8px; }
.log-group { gap: 8px; }
.log-sub { margin-top: -2px; }
.log-trailing { color: var(--accent); font-weight: 700; }
.log-form .segmented button { font-size: 13px; padding: 10px 4px; }

/* Choice chips: an "add" chip reads as an action, not an option. */
.choice.add { border-style: dashed; color: var(--primary); background: none; }

/* Recipe row (opens the chooser) */
.recipe-choice { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; }
.recipe-choice .title { font-weight: 700; }
.recipe-choice svg { width: 22px; height: 22px; color: var(--primary); }
.recipe-chooser .item[aria-pressed="true"] { background: var(--primary-wash); }
.recipe-chooser .section-title { margin-top: 14px; }

/* Last session */
.last-session { display: grid; gap: 8px; }
.last-session .overline { margin-right: 4px; }
.last-main { align-items: center; gap: 14px; }
.last-main .big-num { font-size: 30px; min-width: 2.5ch; }
.last-recipe { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; }
.last-recipe svg { width: 16px; height: 16px; }
.last-notes { color: var(--ink-2); font-size: 17px; }
.last-advice { color: var(--accent); font-weight: 600; }

/* Steep dial */
.dial-card { display: grid; gap: 10px; padding: 18px 16px 14px; }
.dial { display: grid; gap: 8px; }
.dial-unit { text-align: center; }
.dial-row { justify-content: center; gap: 14px; }
.dial-step { width: 52px; height: 52px; font-size: 26px; font-weight: 700; background: var(--primary-wash); color: var(--primary); border-color: transparent; }
.dial-value {
  width: 5.5ch; text-align: center; border: 0; background: none; outline: none;
  font-family: var(--mono); font-weight: 700; font-size: 60px; line-height: 1; color: var(--ink);
  padding: 4px 0; border-radius: 14px;
}
.dial-value:focus { background: var(--card-2); }
.dial-slider { width: 100%; accent-color: var(--primary); height: 28px; }
.dial-ends { font-size: 12px; }
.dial-note { display: flex; justify-content: center; }
.dial-note .chip { white-space: normal; text-align: center; font-weight: 600; }

/* Tiles */
.log-form .tile input { font-size: 20px; }
.ratio-value { font-size: 20px; color: var(--primary); padding: 1px 0; }

/* Suggestions */
.suggest { display: grid; gap: 10px; margin-top: 4px; }
.suggest-head { gap: 8px; }
.suggest-way { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px 2px 4px; border-radius: 999px; background: var(--card); color: var(--primary); font-weight: 700; }
.suggest-way svg { width: 18px; height: 18px; }
.suggest-way.shorter { color: var(--accent); }
.suggest-advice { margin: 0; }
.suggest .btn.small { justify-self: start; }
.fix { display: grid; gap: 3px; }
.fix-title { font-weight: 800; }
.fix.headline .fix-title { font-size: 17px; }
.fix-source { color: var(--primary); text-decoration: none; font-weight: 700; }
.fix-source:hover { text-decoration: underline; }

/* Rating and pin */
.rating-card { display: grid; gap: 4px; }
.perfect { color: var(--primary); font-size: 19px; }
.switch {
  position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--line); transition: background .15s ease;
}
.switch .knob { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; }
.switch[aria-checked="true"] { background: var(--pin); }
.switch[aria-checked="true"] .knob { transform: translateX(20px); }

/* Promotion offer */
.promo-card .big-num { font-size: 40px; }
.promo-arrow { font-size: 26px; color: var(--ink-3); }

@media (min-width: 720px) {
  .log-form { gap: 20px; }
  .dial-value { font-size: 68px; }
}

/* While a sheet is open, the shell's toast moves to the top so it never covers the sheet's buttons. */

/* Steppers, ratio and the rest of the numbers */
.stepper { gap: 6px; }
.stepper-row { gap: 6px; }
.stepper-value { display: flex; align-items: baseline; justify-content: center; gap: 2px; min-width: 0; }
.stepper-value .num { font-size: 22px; }
.stepper-value input { text-align: center; font-size: 20px; min-width: 0; }
.step-btn { flex: none; width: 36px; height: 36px; border-radius: 999px; border: 0; background: var(--primary-wash); color: var(--primary); font: 700 20px var(--mono); cursor: pointer; display: grid; place-items: center; }
.step-btn.quick { width: auto; padding: 0 8px; font-size: 12px; background: var(--card-2); color: var(--ink-2); }
.tile.accent .step-btn { background: var(--card); }
.last-steep { display: grid; justify-items: center; }
.last-steep .unit { margin: 2px 0 0; font-size: 10px; }
.log-custom .input { font-size: 14px; }
.log-more-steeps { margin-top: -8px; }
.switch-row { padding: 12px 14px; }
.switch-row svg { width: 22px; height: 22px; color: var(--pin); }
.switch-row .title { font-weight: 700; }
.timer-start { border-style: dashed; color: var(--primary); }
.timer-start svg { width: 20px; height: 20px; }
@media (max-width: 420px) { .step-btn.quick { display: none; } }