/* Focaccia recipe calculator, time planner and step list.
   Every class is prefixed with "focaccia-" so nothing here can reach another page family.
   The palette maps onto the shared theme tokens from styles.css, so both themes follow the
   site theme without a second colour definition. */

.focaccia-page {
  --focaccia-surface: var(--card-bg);
  --focaccia-border: var(--line);
  --focaccia-text: var(--ink);
  --focaccia-muted: var(--muted);
  --focaccia-accent: var(--accent-solid);
  --focaccia-accent-soft: var(--accent-soft);
  --focaccia-dot-poolish: #35536c;
  --focaccia-dot-dough: #6d8396;
  --focaccia-dot-topping: #4b7d67;
  --focaccia-control-bg: rgba(53, 83, 108, 0.06);
  --focaccia-control-border: rgba(53, 83, 108, 0.7);
  width: min(1140px, 100% - 32px);
  margin: 0 auto;
  padding: 1.5rem 0 3rem;
  color: var(--focaccia-text);
  font-family: 'DM Sans', sans-serif;
}

[data-theme="dark"] .focaccia-page {
  --focaccia-dot-poolish: #8ec6e8;
  --focaccia-dot-dough: #6eaed5;
  --focaccia-dot-topping: #7dbb9f;
  --focaccia-control-bg: rgba(215, 235, 250, 0.08);
  --focaccia-control-border: rgba(215, 235, 250, 0.5);
}

/* ── Hero: decorative colour treatment instead of a photo ── */
.focaccia-hero-media {
  min-height: 380px;
  background-color: #efd9a0;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(122, 96, 34, 0.16) 0 14px, transparent 15px),
    radial-gradient(circle at 42% 62%, rgba(122, 96, 34, 0.14) 0 12px, transparent 13px),
    radial-gradient(circle at 66% 28%, rgba(122, 96, 34, 0.16) 0 15px, transparent 16px),
    radial-gradient(circle at 84% 58%, rgba(122, 96, 34, 0.14) 0 13px, transparent 14px),
    linear-gradient(135deg, #f7e7bd 0%, #ecd08a 50%, #d9b662 100%);
}

[data-theme="dark"] .focaccia-hero-media {
  background-color: #2b2a1d;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(238, 205, 120, 0.1) 0 14px, transparent 15px),
    radial-gradient(circle at 42% 62%, rgba(238, 205, 120, 0.08) 0 12px, transparent 13px),
    radial-gradient(circle at 66% 28%, rgba(238, 205, 120, 0.1) 0 15px, transparent 16px),
    radial-gradient(circle at 84% 58%, rgba(238, 205, 120, 0.08) 0 13px, transparent 14px),
    linear-gradient(135deg, #2f2d1e 0%, #292c22 50%, #1f2a2b 100%);
}

/* ── Layout ── */
.focaccia-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 1025px) {
  .focaccia-layout {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 2.5rem;
  }
}

@media (min-width: 1025px) and (min-height: 820px) {
  .focaccia-col-settings {
    position: sticky;
    top: calc(var(--thomaschristl-header-height, 140px) + 20px);
  }
}

.focaccia-heading {
  margin: 0 0 0.9rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.focaccia-section {
  margin-top: 2.5rem;
}

/* From 861px the site header is sticky, so anchor jumps keep clear of it like #thomaschristl-main does. */
@media (min-width: 861px) {
  .focaccia-layout,
  .focaccia-section {
    scroll-margin-top: calc(var(--thomaschristl-header-height, 140px) + 20px);
  }
}

.focaccia-lead {
  margin: 0 0 1rem;
  color: var(--focaccia-muted);
  font-size: 0.95rem;
}

/* ── Cards ── */
.focaccia-card,
.focaccia-block-card {
  margin-bottom: 1rem;
  overflow: hidden;
  background: var(--focaccia-surface);
  border: 1px solid var(--focaccia-border);
  border-radius: 16px;
}

.focaccia-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--focaccia-border);
}

.focaccia-counter-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
}

.focaccia-counter-hint {
  margin: 0.15rem 0 0;
  color: var(--focaccia-muted);
  font-size: 0.8rem;
}

.focaccia-counter-controls {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--focaccia-control-bg);
  border: 1px solid var(--focaccia-control-border);
  border-radius: 12px;
}

.focaccia-counter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  color: var(--focaccia-text);
  font-size: 1.3rem;
  background: none;
  border: none;
  cursor: pointer;
}

.focaccia-counter-btn:hover {
  background: var(--focaccia-accent-soft);
}

.focaccia-counter-val {
  width: 3rem;
  color: var(--focaccia-accent);
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  background: none;
  border: none;
  appearance: textfield;
  -moz-appearance: textfield;
}

.focaccia-counter-val::-webkit-outer-spin-button,
.focaccia-counter-val::-webkit-inner-spin-button,
.focaccia-row-input::-webkit-outer-spin-button,
.focaccia-row-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.focaccia-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.4rem;
  border-bottom: 1px solid var(--focaccia-border);
}

.focaccia-setting-row:last-child {
  border-bottom: none;
}

.focaccia-setting-label {
  display: block;
  font-size: 0.95rem;
}

.focaccia-setting-sub {
  margin: 0.15rem 0 0;
  color: var(--focaccia-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.focaccia-setting-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.3rem;
}

.focaccia-row-input,
.focaccia-select {
  min-height: 2.5rem;
  padding: 0.4rem 0.6rem;
  color: var(--focaccia-accent);
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  background: var(--focaccia-control-bg);
  border: 1px solid var(--focaccia-control-border);
  border-radius: 8px;
}

.focaccia-row-input {
  width: 5.5rem;
  text-align: right;
  appearance: textfield;
  -moz-appearance: textfield;
}

.focaccia-row-input[type="time"] {
  width: 9rem;
}

.focaccia-select {
  max-width: 100%;
}

.focaccia-row-unit {
  min-width: 1.5rem;
  color: var(--focaccia-muted);
  font-size: 0.85rem;
}

.focaccia-defaults-row {
  padding: 0.85rem 1.4rem;
  border-top: 1px solid var(--focaccia-border);
}

/* ── Buttons ── */
.focaccia-text-btn {
  padding: 0.45rem 1rem;
  color: var(--focaccia-text);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  background: none;
  border: 1px solid var(--focaccia-control-border);
  border-radius: 20px;
  cursor: pointer;
}

.focaccia-text-btn:hover {
  background: var(--focaccia-accent-soft);
}

/* ── Results ── */
.focaccia-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 1rem;
  padding: 1rem 0.5rem;
  background: var(--focaccia-surface);
  border: 1px solid var(--focaccia-border);
  border-radius: 16px;
}

.focaccia-summary-cell {
  padding: 0 0.9rem;
  border-right: 1px solid var(--focaccia-border);
}

.focaccia-summary-cell:last-child {
  border-right: none;
}

.focaccia-summary-label {
  margin: 0 0 0.25rem;
  color: var(--focaccia-muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.focaccia-summary-value {
  margin: 0;
  color: var(--focaccia-accent);
  font-size: 1.2rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.focaccia-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.focaccia-blocks .focaccia-block-card {
  margin-bottom: 0;
}

@media (min-width: 769px) {
  .focaccia-blocks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .focaccia-blocks .focaccia-block-card:last-child {
    grid-column: 1 / -1;
  }
}

.focaccia-block-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  border-bottom: 1px solid var(--focaccia-border);
}

.focaccia-block-dot {
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--focaccia-dot-poolish);
}

.focaccia-block-dot--dough {
  background: var(--focaccia-dot-dough);
}

.focaccia-block-dot--topping {
  background: var(--focaccia-dot-topping);
}

.focaccia-block-name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.focaccia-block-hint {
  margin: 0 0 0 auto;
  color: var(--focaccia-muted);
  font-size: 0.8rem;
  text-align: right;
}

.focaccia-ing-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.focaccia-ing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.4rem;
  border-bottom: 1px solid var(--focaccia-border);
}

.focaccia-ing-row:last-child {
  border-bottom: none;
}

.focaccia-ing-name {
  color: var(--focaccia-muted);
  font-size: 0.92rem;
}

.focaccia-ing-val {
  flex-shrink: 0;
  font-size: 1.1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.focaccia-ing-unit {
  color: var(--focaccia-muted);
  font-size: 0.8rem;
  font-weight: 400;
}

.focaccia-table-wrap {
  overflow-x: auto;
}

.focaccia-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.focaccia-table caption {
  padding: 0.85rem 1.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid var(--focaccia-border);
}

.focaccia-table th,
.focaccia-table td {
  padding: 0.7rem 1.4rem;
  text-align: left;
  border-bottom: 1px solid var(--focaccia-border);
}

@media (max-width: 768px) {
  .focaccia-table caption,
  .focaccia-table th,
  .focaccia-table td {
    padding-right: 0.8rem;
    padding-left: 0.8rem;
  }
}

.focaccia-table thead th {
  color: var(--focaccia-muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.focaccia-table tbody th {
  font-weight: 400;
}

.focaccia-table th:not(:first-child),
.focaccia-table td {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.focaccia-table tbody tr:last-child th,
.focaccia-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Time planner ── */
.focaccia-planner-hint {
  margin: 0;
  padding: 0.9rem 1.4rem;
  font-size: 0.95rem;
  border-top: 1px solid var(--focaccia-border);
}

/* ── Step list ── */
.focaccia-prep-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1rem;
}

.focaccia-steps,
.focaccia-substeps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.focaccia-steps {
  counter-reset: focaccia-step;
}

.focaccia-steps > li {
  counter-increment: focaccia-step;
  border-bottom: 1px solid var(--focaccia-border);
}

.focaccia-steps > li:last-child {
  border-bottom: none;
}

.focaccia-step {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.85rem 1.4rem;
  cursor: pointer;
}

.focaccia-step[hidden] {
  display: none;
}

.focaccia-step:hover {
  background: var(--focaccia-accent-soft);
}

.focaccia-steps > li > .focaccia-step::before {
  flex-shrink: 0;
  min-width: 1.6rem;
  margin-top: 0.15rem;
  color: var(--focaccia-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  content: counter(focaccia-step) ".";
}

.focaccia-substeps .focaccia-step {
  padding-left: 4rem;
}

.focaccia-step input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--focaccia-accent);
  cursor: pointer;
}

.focaccia-step-text {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.55;
}

.focaccia-step input[type="checkbox"]:checked ~ .focaccia-step-text {
  color: var(--focaccia-muted);
  text-decoration: line-through;
}

.focaccia-step-time {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.1rem;
  padding: 0.2rem 0.5rem;
  color: var(--focaccia-accent);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--focaccia-accent-soft);
  border: 1px solid var(--focaccia-control-border);
  border-radius: 6px;
}

.focaccia-notes {
  margin: 0;
  padding: 1rem 1.4rem 1rem 2.6rem;
  font-size: 0.92rem;
  line-height: 1.6;
}

.focaccia-notes li + li {
  margin-top: 0.5rem;
}

/* ── Flow charts ── */
.focaccia-flow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 769px) {
  .focaccia-flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.focaccia-flow-grid .focaccia-block-card {
  margin-bottom: 0;
}

.focaccia-flow-wrap {
  display: flex;
  justify-content: center;
  padding: 1.2rem 1.4rem;
  overflow-x: auto;
}

.focaccia-flow-wrap pre.mermaid {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

/* Until the diagram library has drawn the chart the raw source stays out of sight. The block is
   clipped rather than removed, because the library measures text inside it while drawing. */
.focaccia-flow-wrap[data-focaccia-flow-state="pending"] pre.mermaid,
.focaccia-flow-wrap[data-focaccia-flow-state="failed"] pre.mermaid {
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.focaccia-flow-wrap svg {
  max-width: 100%;
  height: auto;
}

.focaccia-flow-fallback {
  margin: 0;
  color: var(--focaccia-muted);
  font-size: 0.9rem;
}

.focaccia-flow-wrap:not([data-focaccia-flow-state="failed"]) .focaccia-flow-fallback {
  display: none;
}

/* ── Focus ──
   Inputs and selects keep the browser look, the compact counter controls draw the ring inside their
   own box because the group clips with overflow: hidden. */
.focaccia-counter-btn:focus-visible,
.focaccia-counter-val:focus-visible {
  outline: 2px solid var(--focaccia-accent);
  outline-offset: -2px;
}

.focaccia-row-input:focus-visible,
.focaccia-select:focus-visible,
.focaccia-text-btn:focus-visible,
.focaccia-step input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--focaccia-accent);
  outline-offset: 2px;
}

/* Motion only for visitors who did not ask for less of it (WCAG 2.3.3). */
@media (prefers-reduced-motion: no-preference) {
  .focaccia-counter-btn,
  .focaccia-text-btn,
  .focaccia-step {
    transition: background 0.15s;
  }
}