/* ═══════════════════════════════════════════════════════════════════════════
   D1 — Intrinsic Sizing
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Inline kód ──────────────────────────────────────────────────────────── */

code {
  font-family: var(--font-stack-monospace);
  color: var(--text-brand-secondary);
}

/* ── Živá ukázka — přepínač hodnot ──────────────────────────────────────── */

.sizing-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--base);
  margin-bottom: var(--base-4);
}

.sizing-btn {
  padding: var(--base-h) var(--base-2);
  background: var(--surface-control);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-family: var(--font-stack-monospace);
  font-size: var(--font-size-s);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sizing-btn:hover {
  background: var(--surface-main-variant);
}

.sizing-btn[aria-pressed="true"] {
  background: var(--surface-brand-secondary-strong);
  color: var(--text-primary-on-surface-brand-secondary-strong);
  border-color: transparent;
}

/* ── Živá ukázka — data-atributy řídí šířku boxu ────────────────────────── */

.demo-box p {
  font-size: var(--font-size-base);
  color: var(--text-primary-on-surface-brand-primary-subtle);
  line-height: 1.5;
}

.demo-box p em {
  font-style: normal;
  color: var(--text-secondary-on-surface-brand-primary-subtle);
}

.demo-box[data-sizing="auto"]         { width: auto; }
.demo-box[data-sizing="min-content"]  { width: min-content; }
.demo-box[data-sizing="max-content"]  { width: max-content; }
.demo-box[data-sizing="fit-content"]  { width: fit-content; }

/* ── Živá ukázka — indikátor šířky ──────────────────────────────────────── */

.demo-section__sublabel {
  font-size: var(--font-size-s);
  color: var(--text-secondary);
  margin-bottom: var(--base-2);
}

.width-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--base);
  margin-top: var(--base-2);
  font-family: var(--font-stack-monospace);
  font-size: var(--font-size-s);
  color: var(--text-secondary);
}

.width-indicator__bar {
  flex: 1 0 100%;
  height: 2px;
  background: var(--surface-brand-primary-moderate);
  border-radius: var(--radius-circle);
  position: relative;
}

.width-indicator__bar::before,
.width-indicator__bar::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 2px;
  height: 10px;
  background: var(--surface-brand-primary-moderate);
}

.width-indicator__bar::before { left: 0; }
.width-indicator__bar::after  { right: 0; }

/* ── Srovnání — mřížka všech hodnot vedle sebe ───────────────────────────── */

.sizing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--base-3);
  margin-bottom: var(--base-4);
}

/* ── Intrinsic sizing v layoutu — společný obal ──────────────────────────── */

.layout-section {
  border-top: 1px solid var(--border);
  padding-top: var(--base-4);
  margin-top: var(--base-5);
  display: flex;
  flex-direction: column;
  gap: var(--base-5);
}

.layout-example {
  display: flex;
  flex-direction: column;
  gap: var(--base-2);
}

.layout-example__label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--base-h) var(--base);
  font-family: var(--font-stack-monospace);
  font-size: var(--font-size-s);
  color: var(--text-brand-primary);
}

.layout-example__label span {
  font-family: var(--font-stack-main);
  color: var(--text-secondary);
  font-size: var(--font-size-s);
}

/* ── Layout příklad 1 — fit-content + margin-inline: auto ───────────────── */

.ex-callout {
  width: fit-content;
  margin-inline: auto;
  margin-bottom: var(--base-2);
}
.ex-callout:last-child { margin-bottom: 0; }

/* ── Layout příklad 2 — max-content labels, 1fr vstupní pole ────────────── */

.ex-form-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--base-2) var(--base-3);
  align-items: center;
}

.ex-label {
  font-size: var(--font-size-s);
  color: var(--text-secondary);
  white-space: nowrap;
}

.ex-input {
  height: 32px;
  background: var(--surface-front);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

/* ── Layout příklad 3 — max-content 1fr max-content hlavička ────────────── */

.ex-header-grid {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: center;
  gap: var(--base-3);
  background: var(--surface-front);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--base-2) var(--base-3);
}

.ex-nav {
  font-size: var(--font-size-s);
  color: var(--text-secondary);
  white-space: nowrap;
}

.ex-page-title {
  font-family: var(--font-stack-headings);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  text-align: center;
}