/* Pražská dílna (nefedov.cz DESIGN.md, převzato ze sign): betonový papír, grafitová tuš, jediný oranžový akcent jako výplň,
   Bricolage Grotesque v nadpisech, Geist v textu, Geist Mono na meta řádky. Hranaté plochy, 6 px jen ovládací prvky. */
:root {
  --paper: #f3f3f0; --surface: #ffffff; --ink: #151514; --muted: #595955; --line: #d9d9d3;
  --accent: #ff5a1f; --accent-ink: #151514; --accent-text: #b8400e; --band: #151514; --band-ink: #f3f3f0; --band-muted: #a3a39d;
  --danger: #b42318; --ok: #1f7a3a;
  --display: "Bricolage Grotesque", "Arial Black", Arial, sans-serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #121211; --surface: #1b1b1a; --ink: #ededea; --muted: #9d9d97; --line: #2d2d2b;
    --accent: #ff6a33; --accent-text: #ff8c5e; --band: #0b0b0a; --band-ink: #ededea; --band-muted: #9d9d97; --danger: #ff8a80; --ok: #6fd08c; color-scheme: dark; }
}
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--paper); color: var(--ink); font: 16px/1.625 var(--sans); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased }
[hidden] { display: none !important }
a { color: inherit }
.wrap { max-width: 1152px; width: 100%; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left, 0px)) }
.narrow { max-width: 760px }

.top { border-bottom: 1px solid var(--line); background: var(--paper) }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none }
.mark { display: inline-grid; place-items: center; width: 36px; height: 36px; background: var(--accent); color: var(--accent-ink); font: 800 14px/1 var(--display); letter-spacing: -.02em }
.brand-name { font: 700 18px/1.2 var(--display); letter-spacing: -.01em }
.who { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); min-width: 0 }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

main { padding: 36px 0 64px; flex: 1 }
h1 { font: 800 clamp(32px, 6vw, 48px)/1.04 var(--display); letter-spacing: -.03em; margin: 0; text-wrap: balance }
h2 { font: 700 24px/1.2 var(--display); letter-spacing: -.02em; margin: 0 }
h3 { font: 700 18px/1.3 var(--display); letter-spacing: -.01em; margin: 0 }
.hl { background: var(--accent); color: var(--accent-ink); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone }
.lede { margin: 0; color: var(--muted); font-size: 18px; max-width: 60ch }
.dim { color: var(--muted) }
.meta { font: 400 12.5px/1.6 var(--mono); color: var(--muted); overflow-wrap: anywhere }
.stack { display: grid; gap: 18px }
.stack-lg { display: grid; gap: 32px }

.panel { display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--line); padding: 24px }
@media (max-width: 480px) { .panel { padding: 16px } }
.lbl { display: block; font: 500 14px/1.4 var(--sans); margin-bottom: 6px }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=time], input[type=date], textarea, select {
  width: 100%; min-width: 0; font: 16px/1.5 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; }
textarea { resize: vertical; min-height: 84px }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) }

button, .btn { font: 600 15px/1.4 var(--sans); border-radius: 6px; padding: 11px 18px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; color: var(--ink) }
.primary { background: var(--accent); color: var(--accent-ink) }
.primary:hover { filter: brightness(.96) }
button:disabled { opacity: .55; cursor: not-allowed }
.ghost { background: transparent; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent) }
.ghost:hover { border-color: var(--ink) }
.danger { background: transparent; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent) }
.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--accent-text); text-decoration: underline; font-weight: 400; font-size: 14px }
.sm { min-height: 34px; padding: 6px 12px; font-size: 14px }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px }
.err { margin: 0; color: var(--danger); font-weight: 500 }
.okmsg { margin: 0; color: var(--ok); font-weight: 500 }
.note { margin: 0; background: var(--band); color: var(--band-ink); padding: 14px 16px; font-size: 15px }
.note a { color: var(--accent) }

/* seznam obálek */
.list { display: grid; border: 1px solid var(--line); background: var(--surface) }
.item { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 16px 20px; border-top: 1px solid var(--line); text-decoration: none }
.item:first-child { border-top: 0 }
.item:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)) }
.item .t { font: 700 17px/1.3 var(--display); letter-spacing: -.01em }
.item .s { font-size: 14px; color: var(--muted) }
.empty { padding: 28px 20px; color: var(--muted) }
.badge { display: inline-block; font: 500 12px/1 var(--sans); padding: 6px 8px; border: 1px solid var(--line); white-space: nowrap; align-self: start }
.badge.SENT { border-color: var(--accent); color: var(--accent-text) }
.badge.COMPLETED { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.badge.DECLINED, .badge.CANCELLED, .badge.EXPIRED { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent) }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 6px 16px; margin: 0; font-size: 15px }
.kv dt { color: var(--muted) }
.kv dd { margin: 0; overflow-wrap: anywhere }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr } .kv dd { margin-bottom: 8px } }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start }
@media (max-width: 900px) { .two { grid-template-columns: 1fr } }
.foot { padding: 18px 0 26px; border-top: 1px solid var(--line); font: 400 12px/1.6 var(--mono); color: var(--muted) }
.spinner { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; display: inline-block }
@keyframes spin { to { transform: rotate(360deg) } }

/* ----- rezervace ----- */
.narrow-lg { max-width: 980px }
.stack-sm { display: grid; gap: 10px }
.stack-xs { display: grid; gap: 4px; min-width: 0 }
.stack-sm > p, .stack-xs > p { margin: 0 }
.end { justify-items: end; align-content: start }
.tight { gap: 6px; flex-wrap: nowrap }

.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; font: 500 14px/1 var(--sans) }
.steps li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); color: var(--muted); background: var(--surface) }
.steps .n { display: inline-grid; place-items: center; width: 22px; height: 22px; font: 700 12px/1 var(--mono); border: 1px solid var(--line) }
.steps li.on { border-color: var(--ink); color: var(--ink) }
.steps li.on .n { background: var(--accent); color: var(--accent-ink); border-color: var(--accent) }
.steps li.done .n { background: var(--ink); color: var(--paper); border-color: var(--ink) }

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px }
.choice { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "big arrow" "desc arrow"; text-align: left; justify-content: stretch; gap: 6px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: 22px 22px 20px; min-height: 120px; font-weight: 400 }
.choice .big { grid-area: big; font: 700 20px/1.2 var(--display); letter-spacing: -.01em }
.choice .big b { font: 800 44px/1 var(--display); letter-spacing: -.03em; margin-right: 4px }
.choice .dim { grid-area: desc; font-size: 15px; line-height: 1.5 }
.choice .arrow { grid-area: arrow; align-self: center; font: 700 24px/1 var(--display); color: var(--accent-text) }
.choice:hover, .choice:focus-visible { border-color: var(--ink); box-shadow: inset 0 -4px 0 var(--accent) }

.picked { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; background: var(--band); color: var(--band-ink); font-size: 15px }
.picked .link { color: var(--accent) }

.booker { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start }
@media (max-width: 860px) { .booker { grid-template-columns: 1fr } }
.cal { display: grid; gap: 8px }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px }
.cal-head h3 { text-transform: capitalize }
.icon { min-height: 40px; width: 40px; padding: 0; font: 600 22px/1 var(--sans); background: transparent; border: 1px solid var(--line) }
.icon:not(:disabled):hover { border-color: var(--ink) }
.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px }
.grid.dow span { text-align: center; font: 400 12px/1.6 var(--mono); color: var(--muted) }
.day { display: grid; place-items: center; height: clamp(40px, 11vw, 52px); min-height: 0; padding: 0; border-radius: 6px; font: 400 15px/1 var(--sans); color: color-mix(in srgb, var(--muted) 70%, transparent) }
.day.pad { visibility: hidden }
button.day.free { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink); font-weight: 600; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent) }
button.day.free:hover { border-color: var(--accent) }
button.day.sel { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.side-slots { scroll-margin-top: 12px }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 420px; overflow: auto; padding: 2px }
@media (max-width: 860px) { .slots { max-height: none } }
.slot { background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); font: 600 16px/1 var(--mono); min-height: 46px }
.slot:hover, .slot:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.slots-empty { min-height: 120px; display: grid; align-content: center }
.slots-empty p { margin: 0 }

.summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px; border-left: 6px solid var(--accent); background: var(--paper) }
.summary p { margin: 0 }
.summary .when { font: 700 20px/1.25 var(--display); letter-spacing: -.01em; margin: 2px 0; text-transform: none }
.field { display: grid; gap: 4px; min-width: 0 }
.field .lbl { margin: 0 }
.field.inline { display: inline-grid }
.two-sm { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
@media (max-width: 640px) { .two-sm { grid-template-columns: 1fr } }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden }
.panel.done { border-top: 4px solid var(--accent) }
.confirm { margin: 0; font-weight: 600 }
.badge.CANCELLED { margin-left: 8px }

/* vložení do cizí stránky */
html.embed body { background: transparent; min-height: 0 }
html.embed .top, html.embed .foot { display: none }
html.embed main { padding: 8px 0 16px }
html.embed .wrap { padding: 0 2px }

/* ----- administrace ----- */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none }
.tabs a { padding: 10px 14px; text-decoration: none; font: 500 15px/1.2 var(--sans); color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap }
.tabs a[aria-current=page] { color: var(--ink); border-bottom-color: var(--accent) }
.item p { margin: 0 }
.item.hilite { box-shadow: inset 6px 0 0 var(--accent) }
.note-text { white-space: pre-wrap }
.msg { display: inline-block; margin: 2px 4px 0 0; padding: 1px 6px; border: 1px solid var(--line); font: 400 11.5px/1.5 var(--mono) }
.msg.sent { border-color: var(--ok); color: var(--ok) }
.msg.failed { border-color: var(--danger); color: var(--danger) }
.msg.pending, .msg.sending { border-color: var(--accent); color: var(--accent-text) }
.acc { display: grid; gap: 12px; border: 1px solid var(--line); padding: 16px; background: var(--paper) }
.acc h3 { overflow-wrap: anywhere }
.acc p { margin: 0 }
.cals { width: 100%; border-collapse: collapse; font-size: 15px }
.cals th { text-align: left; font: 500 12.5px/1.4 var(--mono); color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line) }
.cals td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere }
.cals tr:last-child td { border-bottom: 0 }
.cals .check { font-size: 14px }
.dot { display: inline-block; width: 10px; height: 10px; background: var(--c); margin-right: 8px; vertical-align: 1px }
@media (max-width: 640px) {
  .cals thead { display: none }
  .cals tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); padding: 6px 0 }
  .cals tr:last-child { border-bottom: 0 }
  .cals td { border: 0; padding: 4px 4px }
  .cals td:first-child { grid-column: 1 / -1; font-weight: 600 }
  .cals.mini td { grid-column: 1 / -1 }
}
.hours { display: grid; gap: 4px }
.hours-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 6px 0; border-bottom: 1px solid var(--line) }
.hours-row:last-child { border-bottom: 0 }
.hours-row .check { min-width: 130px }
.hours-row input[type=time] { width: 120px; padding: 8px 10px }
.grid-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px }
.unit { display: flex; align-items: center; gap: 8px }
.unit input { max-width: 120px }
.unit span { color: var(--muted); font-size: 14px }
pre.code { margin: 0; padding: 14px 16px; background: var(--band); color: var(--band-ink); font: 400 13px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line) }
.stat { display: grid; gap: 2px; padding: 14px 16px; background: var(--surface) }
.stat b { font: 800 32px/1 var(--display); letter-spacing: -.02em }
.stat span { font-size: 13px; color: var(--muted) }
.group { display: grid; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line) }
.group:first-child { border-top: 0 }
.panel.warn { border-left: 6px solid var(--danger) }
ul.plain { margin: 0; padding: 0 0 0 18px; display: grid; gap: 4px; font-size: 14px }
.panel > p, .panel > h2, .panel > h3 { margin: 0 }
.panel select { max-width: 460px }
.compact h1 { font-size: clamp(26px, 5vw, 34px) }
.hours-row input[type=time] { width: 136px }
@media (max-width: 640px) { .tabs { flex-wrap: wrap } .tabs a { padding: 8px 10px } }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr 1fr } .stat:last-child:nth-child(odd) { grid-column: 1 / -1 } }