/* log screens (webApp/.../web/log/): Log a brew, 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(--terracotta); 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(--caramel-text); 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(--caramel-text); }
.recipe-chooser .item[aria-pressed="true"] { background: var(--caramel-wash); }
.recipe-chooser .section-title { margin-top: 14px; }

/* Last brew */
.last-brew { display: grid; gap: 8px; }
.last-brew .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(--caramel-text); font-weight: 600; }
.last-recipe svg { width: 16px; height: 16px; }
.last-notes { color: var(--ink-2); font-size: 17px; }
.last-advice { color: var(--terracotta); font-weight: 600; }

/* Grind control */
.dial-card { display: grid; gap: 10px; padding: 18px 16px 14px; }
.grind { display: grid; gap: 8px; }
.grind-unit { text-align: center; }
.grind-row { justify-content: center; gap: 14px; }
.grind-step { width: 52px; height: 52px; font-size: 26px; font-weight: 700; }
.grind-value {
  width: 6.5ch; text-align: center; border: 0; background: none; outline: none;
  font-family: var(--mono); font-weight: 700; font-size: 56px; line-height: 1; color: var(--ink);
  padding: 4px 0; border-radius: 14px;
}
.grind-value:focus { background: var(--card-2); }
.grind-slider { width: 100%; accent-color: var(--brand); height: 28px; }
.grind-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(--caramel-text); padding: 1px 0; }

/* Suggestions */
.suggest { display: grid; gap: 10px; margin-top: 4px; }
.suggest-head { gap: 8px; }
.suggest-dial { display: grid; place-items: center; width: 26px; height: 26px; color: var(--caramel-text); }
.suggest-dial svg { width: 22px; height: 22px; transition: transform .2s ease; }
.suggest-dial.finer svg { transform: rotate(-35deg); }
.suggest-dial.coarser svg { transform: rotate(35deg); }
.suggest-advice { margin: 0; }
.suggest .btn.small { justify-self: start; }
.fix { display: grid; gap: 3px; }
.fix-symptom { font-weight: 700; }
.fix-source { color: var(--caramel-text); text-decoration: none; font-weight: 700; }
.fix-source:hover { text-decoration: underline; }

/* Rating and pin */
.rating-card { display: grid; gap: 4px; }
.perfect { color: var(--caramel-text); font-size: 19px; }
.pin-row svg { width: 22px; height: 22px; color: var(--sage); }
.pin-row .title { font-weight: 700; }
.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(--sage); }
.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; }
  .grind-value { font-size: 64px; }
}

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