/* Bryggboken – stilar för UI-komponenterna i Components/UI och Components/Charts.
   Bygger på tokens och klasser i classical.css. */

/* ══ Knappar ═══════════════════════════════════════════════════════════ */
.btn { min-height: 40px; touch-action: manipulation; }
.btn-full { width: 100%; }
.btn-large { min-height: 48px; padding: 12px; font-size: 16px; }
.btn-icon { width: 44px; height: 44px; min-height: 44px; }

/* ══ Taggar ════════════════════════════════════════════════════════════ */
.tag { gap: 6px; }
.tag-large { font-size: 13px; padding: 6px 10px; }
button.tag { font-family: inherit; cursor: pointer; border: 0; }
.tag-suggestion { border: 1px solid var(--color-divider); color: var(--color-text); background: transparent; }
button.tag-suggestion { border: 1px solid var(--color-divider); }
button.tag-suggestion:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.tag-remove {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -4px -6px -4px -2px;
  padding: 0; background: none; border: 0; color: inherit; cursor: pointer; border-radius: var(--radius-sm);
}
.tag-remove:hover { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* ══ Kort ══════════════════════════════════════════════════════════════ */
.card-highlighted { border-color: var(--color-accent); }
.card-subtle { border-color: transparent; }
a.card-link { color: inherit; text-decoration: none; }
a.card-link:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }

/* ══ Fält ══════════════════════════════════════════════════════════════ */
.field .input { min-height: 44px; font-size: 16px; } /* 16px hindrar iOS från att zooma vid fokus */
.field-hint { font-size: 12px; color: var(--color-neutral-700); margin: 5px 0 0; }
.input::placeholder { color: var(--color-neutral-500); font-style: italic; }

/* ══ Sektioner, rader, tillbaka ═════════════════════════════════════════ */
.section-action { font-size: 12px; color: var(--color-accent-700); }
.section-action a, .section-action button { color: inherit; text-decoration: none; }

.list-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; min-height: 48px;
  border-bottom: 1px solid var(--color-divider); color: inherit; text-decoration: none;
}
.list-row:hover .list-row-title { color: var(--color-accent-700); }
.list-row-leading { flex: none; display: flex; }
.list-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-row-title { font-family: var(--font-heading); font-weight: 600; font-size: 18px; line-height: 1.2; }
.list-row-meta { font-size: 12px; color: var(--color-neutral-700); }
.list-row-trailing { font-size: 13px; color: var(--color-neutral-700); text-align: right; }
.list-row-chevron { color: var(--color-neutral-500); }

.back-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: -12px 0 8px;
  color: var(--color-neutral-700); text-decoration: none; font-size: 15px;
}
.back-link:hover { color: var(--color-accent-700); }

/* ══ Bildplatta ════════════════════════════════════════════════════════ */
.plate { display: block; object-fit: cover; border-style: solid; aspect-ratio: auto; }
.plate-empty {
  display: block; min-height: 24px; filter: none;
  background: repeating-linear-gradient(135deg, var(--color-neutral-200) 0 6px, var(--color-neutral-300) 6px 7px);
}

/* ══ Stepper ═══════════════════════════════════════════════════════════ */
.stepper {
  display: inline-grid; grid-template-columns: 44px minmax(64px, 1fr) 44px; align-items: stretch;
  min-height: 44px; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.stepper-changed { border-color: var(--color-accent); }
.stepper-btn, .stepper-value {
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font: inherit;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.stepper-btn { font-size: 18px; color: var(--color-neutral-700); }
.stepper-btn:hover:not(:disabled) { color: var(--color-accent-700); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.stepper-btn:active:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 20%, transparent); }
.stepper-btn:disabled { opacity: 0.35; cursor: default; }
.stepper-value, .stepper-input {
  font-family: var(--font-heading); font-size: 20px; font-variant-numeric: tabular-nums; text-align: center;
  white-space: nowrap;
}
.stepper-value:disabled { cursor: default; color: inherit; }
.stepper-changed .stepper-value { color: var(--color-accent-700); }
.stepper-input {
  width: 100%; min-width: 0; border: 0; background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  color: var(--color-text); padding: 0 4px;
}
.stepper-input:focus-visible { outline: none; }

/* Rad i receptet: etikett · tidigare värde · stepper */
.recipe-row {
  display: grid; grid-template-columns: 1fr auto minmax(150px, 46%); align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--color-divider);
}
.recipe-row-label { font-size: 15px; }
.recipe-row-previous { font-size: 11px; color: var(--color-neutral-700); white-space: nowrap; font-variant-numeric: tabular-nums; }
.recipe-row .stepper { width: 100%; }
.recipe-row > .link-button { justify-self: end; }
.recipe-time { display: flex; align-items: center; gap: 6px; }
.recipe-time .link-button { flex: none; min-width: 32px; min-height: 44px; font-size: 20px; }

/* ══ Metodrutor ════════════════════════════════════════════════════════ */
.method-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.method-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 72px; padding: 10px 4px; background: none; cursor: pointer; color: var(--color-text);
  font: inherit; font-size: 12px; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  touch-action: manipulation;
}
.method-tile span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.method-tile:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.method-tile[aria-pressed='true'] { border-color: var(--color-accent); color: var(--color-accent-700); }

/* ══ Betyg (bönor) ═════════════════════════════════════════════════════ */
.bean-rating { display: inline-flex; align-items: center; gap: calc(var(--bean-size, 13px) * 0.25); color: var(--color-accent); }
.bean-rating-input { display: flex; justify-content: center; gap: 10px; }
.bean-rating-input button {
  display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0;
  background: none; border: 0; color: var(--color-accent); cursor: pointer; border-radius: var(--radius-md);
  touch-action: manipulation;
}
.bean-rating-input button:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.bean-rating-caption {
  text-align: center; font-family: var(--font-heading); font-size: 20px; margin: 8px 0 0;
}
.bean-rating-caption em { font-style: italic; }

/* ══ Dialog ════════════════════════════════════════════════════════════ */
.dialog-backdrop { z-index: 100; }
.dialog:focus { outline: none; }

/* ══ Diagram ═══════════════════════════════════════════════════════════ */
.rating-curve { color: var(--color-accent-700); }
.rating-curve svg { display: block; overflow: visible; }
.rating-curve-labels { position: relative; height: 16px; margin-top: 6px; }
.rating-curve-labels span {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  font-size: 10px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums;
}
.taste-radar { color: var(--color-accent-700); overflow: visible; display: block; }
.taste-radar text { font-size: 8px; fill: currentColor; font-family: var(--font-body); letter-spacing: 0.04em; }

/* ══ Värderutnät (Kaffe · Vatten · Malning · Temp · Tid) ═══════════════ */
.value-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); padding: 6px 0;
}
.value-grid dt { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.value-grid dd { margin: 0; font-family: var(--font-heading); font-size: 16px; font-variant-numeric: tabular-nums; }
.value-grid .changed dd { color: var(--color-accent-700); }

/* ══ Bryggningskort (journal) ══════════════════════════════════════════ */
.brew-card-head { display: flex; align-items: center; gap: 12px; }
.brew-card-nr {
  font-family: var(--font-heading); font-size: 24px; color: var(--color-accent-700);
  font-variant-numeric: tabular-nums; min-width: 1.2em;
}
.brew-card-method { flex: 1; display: flex; flex-direction: column; font-size: 14px; line-height: 1.25; }
.brew-card-method small { font-size: 11px; color: var(--color-neutral-700); }
.brew-card-tags { font-size: 12px; font-style: italic; color: var(--color-neutral-800); }
.brew-card-delta { font-size: 12px; color: var(--color-accent-700); }

/* Små textåtgärder ("+ Lägg till") får ändå en tryckyta på minst 44px. */
.section-action .link-button { min-height: 44px; padding: 0 6px; margin: -14px -6px; }