/* ============================================================
   HARCOVNÍK web — podstránky kroků tábora (sdílené)
   Staví na styles.css + themes.css (theme-stopa). Z Claude Designu (tabor-krok.css).
   ============================================================ */
.ts-head { padding: clamp(28px, 4vw, 56px) 0 0; }
.ts-step { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.ts-step b { background: var(--accent); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 13px; }
.ts-head h1 { font-size: clamp(34px, 6vw, 60px); line-height: 1; margin-top: 14px; }
.ts-head h1 .script { font-family: var(--script); color: var(--accent); }
.ts-head .lede { margin-top: 14px; color: var(--muted); font-size: clamp(16px, 1.7vw, 20px); max-width: 60ch; line-height: 1.55; }

.ts-grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.ts-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 2.8vw, 34px); box-shadow: var(--shadow); }
.ts-card h2 { font-size: clamp(22px, 2.6vw, 30px); }
.ts-card h2.sm { font-size: 20px; }
.ts-rows { display: flex; flex-direction: column; margin-top: 8px; }
.ts-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px dashed var(--line); }
.ts-row:last-child { border-bottom: none; }
.ts-row .k { font-size: 15px; color: var(--ink); }
.ts-row .k small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.ts-row .v { font-family: var(--mono); font-size: 15px; font-weight: 500; text-align: right; white-space: nowrap; }
.ts-row .v.pos { color: var(--zelena); } .ts-row .v.neg { color: var(--cervena); }

.ts-steps { display: grid; gap: 12px; margin-top: 8px; }
.ts-stepitem { display: flex; gap: 14px; align-items: flex-start; }
.ts-stepitem .n { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--accent); color: #fff; font-family: var(--display); font-weight: 800; font-size: 15px; display: grid; place-items: center; margin-top: 1px; }
.ts-stepitem .t { font-size: 15px; line-height: 1.5; padding-top: 3px; }
.ts-stepitem .t b { font-family: var(--display); }

.ts-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; }
.ts-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.ts-list .ic { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 11%, var(--surface)); color: var(--accent); }
.ts-list .ic svg { width: 16px; height: 16px; }

.ts-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 90px; }
.ts-stat { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--surface-2); }
.ts-stat .l { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ts-stat .v { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3vw, 32px); line-height: 1.05; margin-top: 8px; }
.ts-stat .v small { font-size: .45em; color: var(--muted); }
.ts-bar { height: 9px; border-radius: 99px; background: color-mix(in oklab, var(--ink) 9%, transparent); overflow: hidden; margin-top: 12px; }
.ts-bar i { display: block; height: 100%; border-radius: 99px; }
.ts-note { font-size: 13px; color: var(--muted); margin-top: 8px; }
.ts-doc { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.ts-doc:hover { border-color: var(--accent); transform: translateY(-2px); }
.ts-doc .ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 11%, var(--surface)); color: var(--accent); }
.ts-doc .ic svg { width: 19px; height: 19px; }
.ts-doc b { font-family: var(--display); font-size: 15.5px; display: block; }
.ts-doc span { font-size: 12.5px; color: var(--muted); }

.ts-cta { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.ts-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 14.5px; color: var(--muted); text-decoration: none; margin-top: 30px; }
.ts-back:hover { color: var(--accent); }

.ts-warn { display: flex; gap: 11px; align-items: flex-start; padding: 14px 17px; border-radius: var(--radius); background: color-mix(in oklab, var(--zluta) 13%, var(--surface)); border: 1px solid color-mix(in oklab, var(--zluta) 32%, transparent); font-size: 14.5px; line-height: 1.55; margin-top: 16px; }
.ts-warn svg { width: 18px; height: 18px; color: #9a6b08; flex: none; margin-top: 1px; }
.ts-warn b { color: var(--ink); }

@media (max-width: 820px) { .ts-grid2 { grid-template-columns: 1fr; } .ts-aside { position: static; } }