/* recepty.btx.cz — designový systém z mockupů:
   bílá, jedna šedá linka, jeden zelený akcent, rádius 16 / 14 / 12, bez stínů. */

:root {
  --bg:          #ffffff;
  --bg-soft:     #fbfbfc;
  --field:       #f2f2f5;
  --field-soft:  #fafafb;
  --line:        #e5e5ea;
  --line-strong: #d8d8de;
  --ink:         #111113;
  --ink-2:       #3a3a3c;
  --muted:       #8e8e93;
  --faint:       #c7c7cc;
  --accent:      #34c759;
  --accent-ink:  #12813c;
  --accent-dark: #0e6630;
  --accent-tint: #e8f8ed;
  --danger:      #c8281b;
  --danger-tint: #fdecea;

  --r-lg: 16px;
  --r-md: 14px;
  --r-sm: 12px;

  --pad: 20px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--accent-dark); }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* --- kostra ---------------------------------------------------------------- */

.shell { display: flex; align-items: flex-start; min-height: 100dvh; }
.sidebar, .main { width: 100%; min-width: 0; }

body.page-list .main { display: none; }
body.page-detail .sidebar,
body.page-form .sidebar { display: none; }

.sidebar { padding-bottom: 40px; }

/* --- hlavička seznamu ------------------------------------------------------ */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(18px, env(safe-area-inset-top)) var(--pad) 0;
}
.topbar__title { font-size: 34px; font-weight: 700; letter-spacing: -0.7px; line-height: 40px; }
.topbar__link { font-size: 16px; font-weight: 500; }

.btn-round {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--accent-ink); color: #fff;
}
.btn-round:hover { background: var(--accent-dark); color: #fff; }

/* --- hledání --------------------------------------------------------------- */

.search {
  display: flex; align-items: center; gap: 8px;
  height: 44px; margin: 16px var(--pad) 0; padding: 0 12px;
  background: var(--field); border-radius: var(--r-sm);
}
.search:focus-within { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--accent-ink); }
.search__icon { flex: 0 0 auto; color: var(--muted); }
.search:focus-within .search__icon { color: var(--accent-ink); }
.search__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; font: inherit; color: var(--ink);
  padding: 0; appearance: none;
}
.search__input::placeholder { color: var(--muted); }
.search__input:focus { outline: none; }
.search__input::-webkit-search-cancel-button { display: none; }
.search__clear {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--faint); color: #fff;
}
.search__clear:hover { background: var(--muted); color: #fff; }

/* --- štítky ---------------------------------------------------------------- */

.chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 16px var(--pad) 2px;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: flex; align-items: center; flex: 0 0 auto;
  height: 34px; padding: 0 15px; border-radius: 999px;
  background: var(--field); color: var(--ink-2);
  font-size: 15px; font-weight: 500;
}
.chip:hover { background: #e9e9ee; color: var(--ink-2); }
.chip.is-active { background: var(--accent-ink); color: #fff; }
.chip.is-active:hover { background: var(--accent-dark); color: #fff; }

.result-count {
  padding: 20px var(--pad) 0;
  font-size: 12px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--muted);
}

/* --- karty ----------------------------------------------------------------- */

.cards { display: flex; flex-direction: column; gap: 10px; padding: 14px var(--pad) 0; }

.card {
  display: flex; align-items: center; gap: 12px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg); color: var(--ink);
}
.card:hover { border-color: var(--line-strong); color: var(--ink); }
.card.is-open { border: 1.5px solid var(--accent-ink); padding: 9.5px; }
.card__thumb {
  flex: 0 0 auto; width: 64px; height: 64px;
  border-radius: var(--r-sm); object-fit: cover; background: var(--field);
}
.card__body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.card__title { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }
.card__meta {
  font-size: 13px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card__chevron { flex: 0 0 auto; margin-right: 4px; color: var(--faint); }

mark { background: #dff5e4; color: var(--accent-dark); font-weight: 600; border-radius: 4px; padding: 1px 2px; margin: 0 -2px; }

/* --- prázdné stavy --------------------------------------------------------- */

.empty {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 56px var(--pad) 40px; text-align: center;
}
.empty--page { min-height: 100dvh; justify-content: center; }
.empty__art { margin-bottom: 6px; }
.empty__title { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
.empty__text { max-width: 300px; font-size: 15px; line-height: 22px; color: var(--muted); text-wrap: pretty; }
.empty .btn { margin-top: 8px; }

.pane-hint {
  display: none; flex-direction: column; align-items: center; gap: 14px;
  justify-content: center; min-height: 100dvh; color: var(--muted); font-size: 15px;
}

/* --- detail receptu -------------------------------------------------------- */

.hero { position: relative; }
.hero__image { width: 100%; height: 252px; object-fit: cover; background: var(--field); }
.hero__image--empty { display: flex; align-items: center; justify-content: center; }
.hero__back {
  position: absolute; left: 16px; top: max(16px, env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); color: var(--ink);
  backdrop-filter: blur(8px);
}

.article { padding-bottom: 120px; }
.article__head { display: flex; flex-direction: column; gap: 12px; padding: 20px var(--pad) 0; }
.article__title { font-size: 28px; font-weight: 700; letter-spacing: -0.6px; line-height: 34px; text-wrap: pretty; }

.meta { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.meta__item { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--muted); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-ink);
  font-size: 13px; font-weight: 600;
}
.tag:hover { background: #d9f2e2; color: var(--accent-dark); }

.section { padding: 0 var(--pad); }
.section + .section { margin-top: 8px; }
.section__title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 22px 0 6px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 20px; font-weight: 700; letter-spacing: -0.3px;
}
.section__note { font-size: 13px; font-weight: 400; color: var(--muted); }

.ing { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.ing input { position: absolute; opacity: 0; width: 0; height: 0; }
.ing__box {
  flex: 0 0 auto; position: relative; width: 24px; height: 24px; border-radius: 999px;
  border: 1.8px solid var(--line-strong); transition: background-color .12s, border-color .12s;
}
.ing__box::after {
  content: ""; position: absolute; left: 8px; top: 4.5px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2.1px 2.1px 0;
  transform: rotate(45deg) scale(0); transition: transform .12s ease-out;
}
.ing input:checked + .ing__box { background: var(--accent-ink); border-color: var(--accent-ink); }
.ing input:checked + .ing__box::after { transform: rotate(45deg) scale(1); }
.ing input:focus-visible + .ing__box { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.ing__text { font-size: 17px; }
.ing__amount { margin-left: 8px; font-size: 14px; color: var(--muted); }
.ing input:checked ~ .ing__text { color: var(--muted); text-decoration: line-through; }

.steps { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; counter-reset: step; }
.steps li { display: flex; gap: 14px; }
.steps__num {
  counter-increment: step; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-top: 1px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-ink);
  font-size: 14px; font-weight: 700;
}
.steps__num::before { content: counter(step); }
.steps__text { font-size: 16px; line-height: 25px; text-wrap: pretty; }
.prose { margin-top: 14px; font-size: 16px; line-height: 25px; white-space: pre-line; text-wrap: pretty; }

/* --- tlačítka -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 22px; border: 0; border-radius: var(--r-md);
  font-size: 17px; font-weight: 600; cursor: pointer; text-align: center;
}
.btn--primary { background: var(--accent-ink); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); color: #fff; }
.btn--ghost { background: var(--field); color: var(--ink); }
.btn--ghost:hover { background: #e9e9ee; color: var(--ink); }
.btn--danger { width: 50px; padding: 0; background: var(--danger-tint); color: var(--danger); }
.btn--danger:hover { background: #fbdcd8; }
.btn--block, .btn--wide { width: 100%; }

.link-button {
  display: inline-block; margin: 24px auto 0; padding: 8px 12px;
  border: 0; background: none; color: var(--muted);
  font-size: 15px; cursor: pointer;
}
.link-button:hover { color: var(--ink); }
.signout { display: flex; justify-content: center; }

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; gap: 12px; align-items: center;
  padding: 12px var(--pad) max(12px, env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line);
}
.actionbar .btn--primary { flex: 1 1 auto; }
.actionbar--form .btn--ghost { flex: 0 0 34%; }
.actionbar--form .btn--wide { flex: 1 1 auto; width: auto; }

.flash {
  position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top)); z-index: 60;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px); padding: 11px 18px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 15px; text-align: center;
  animation: flash-out .3s ease-in 4s forwards;
}
@keyframes flash-out { to { opacity: 0; visibility: hidden; } }

.alert {
  margin: 16px var(--pad) 0; padding: 12px 16px; border-radius: var(--r-sm);
  background: var(--danger-tint); color: var(--danger); font-size: 15px;
}
.alert p + p { margin-top: 4px; }

/* --- formulář -------------------------------------------------------------- */

.formbar {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 var(--pad); margin-top: max(18px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
}
.formbar__back {
  position: absolute; left: var(--pad);
  display: flex; align-items: center; gap: 4px; font-size: 17px;
}
.formbar__title { font-size: 17px; font-weight: 600; }

.form__body { display: flex; flex-direction: column; gap: 18px; padding: 20px var(--pad) 140px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--muted);
}
.hint { font-size: 13px; color: var(--muted); }

.input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--field-soft); color: var(--ink);
  font: inherit; appearance: none;
}
.input::placeholder { color: var(--faint); }
.input:focus {
  outline: none; background: var(--bg);
  border-color: var(--accent-ink); box-shadow: inset 0 0 0 0.5px var(--accent-ink);
}
.textarea { min-height: 140px; line-height: 25px; resize: vertical; }

.photo { position: relative; }
.photo__preview { display: none; position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--field); }
.photo__image { width: 100%; height: 190px; object-fit: cover; }
.photo__controls { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; }
.pill {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; min-width: 32px; padding: 0 12px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); color: var(--ink);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.pill--remove { padding: 0; color: var(--danger); }

.photo__drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 150px; padding: 20px; cursor: pointer;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--field-soft); color: var(--muted);
}
.photo__drop:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.photo__label { font-size: 15px; font-weight: 600; }
.photo__hint { font-size: 12px; color: var(--faint); }

.photo.is-filled .photo__preview { display: block; }
.photo.is-filled .photo__drop { display: none; }
.photo.is-filled [data-photo-remove]:checked ~ .photo__preview { display: none; }
.photo.is-filled [data-photo-remove]:checked ~ .photo__drop { display: flex; }

.ing-rows { position: relative; display: flex; flex-direction: column; gap: 8px; }

/* Našeptávač surovin. Jediné místo se stínem — plave nad obsahem,
   a bílá karta na bílém podkladu by jinak nebyla poznat. */
.suggest {
  position: absolute; z-index: 30;
  padding: 6px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); box-shadow: 0 10px 28px rgba(17, 17, 19, 0.13);
}
.suggest__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 0 12px; border-radius: 9px;
  font-size: 16px; cursor: pointer;
}
.suggest__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__amount { flex: 0 0 auto; font-size: 13px; color: var(--muted); }
.suggest__item.is-active .suggest__amount { color: var(--accent-ink); }
.suggest__item.is-active { background: var(--accent-tint); color: var(--accent-ink); font-weight: 600; }
@media (hover: hover) {
  .suggest__item:hover { background: var(--accent-tint); color: var(--accent-ink); }
}
.ing-row { display: flex; align-items: center; gap: 7px; }
.ing-row .input { min-height: 46px; padding-left: 12px; padding-right: 12px; }
.ing-row__name   { flex: 1 1 0; width: auto; min-width: 0; }
/* Množství jsou krátká, tak úzko, jak dovolí „250 ml“ — nejdelší, co se
   běžně píše. Delší („6 stroužků“) se v políčku odroluje. */
.ing-row .ing-row__amount {
  flex: 0 0 66px; width: 66px; font-size: 15px;
  padding-left: 7px; padding-right: 7px;
}

.row-remove, .row-move {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  height: 46px; padding: 0; border: 0; background: none; cursor: pointer;
}
.row-remove { width: 34px; }
.row-remove:hover circle, .row-remove:hover path { stroke: var(--danger); }

/* Úchyt na přesouvání. touch-action: none je nutnost — bez něj by tažení
   prstem rolovalo stránku místo posunu řádku. */
.row-move { width: 28px; color: var(--faint); cursor: grab; touch-action: none; }
.row-move:hover { color: var(--muted); }

.ing-row.is-dragging {
  position: relative; z-index: 25;
  border-radius: var(--r-sm); background: var(--bg);
  box-shadow: 0 10px 24px rgba(17, 17, 19, 0.16);
}
.ing-row.is-dragging .row-move { color: var(--accent-ink); cursor: grabbing; }
body.is-reordering { user-select: none; -webkit-user-select: none; }

.add-row {
  display: flex; align-items: center; gap: 10px; align-self: flex-start;
  min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--accent-ink); font-size: 16px; font-weight: 600; cursor: pointer;
}

.tagbox {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  min-height: 48px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field-soft);
}
.tagbox:focus-within { background: var(--bg); border-color: var(--accent-ink); }
.tagbox__chip {
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 6px 0 12px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-ink);
  font-size: 14px; font-weight: 600;
}
.tagbox__x {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--accent-ink); cursor: pointer;
}
.tagbox__input {
  flex: 1 1 90px; min-width: 90px; height: 30px;
  border: 0; background: none; font: inherit; padding: 0 4px;
}
.tagbox__input:focus { outline: none; }
.tagbox__input::placeholder { color: var(--faint); }

/* --- přihlášení ------------------------------------------------------------ */

.login {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; max-width: 340px; min-height: 100dvh; margin: 0 auto;
  padding: 0 var(--pad); justify-content: center;
}
.login__mark { border-radius: 16px; }
.login__title { margin-top: 8px; font-size: 24px; font-weight: 700; letter-spacing: -0.4px; }
.login__text { font-size: 15px; line-height: 22px; color: var(--muted); text-wrap: pretty; }
.login__form { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 12px; }
.login .alert { width: 100%; margin: 0; }

/* --- velký displej --------------------------------------------------------- */

@media (min-width: 960px) {
  .sidebar {
    display: block !important;
    position: sticky; top: 0; flex: 0 0 380px; width: 380px;
    height: 100dvh; overflow-y: auto; padding-bottom: 24px;
    border-right: 1px solid var(--line); background: var(--bg-soft);
  }
  .main { display: block !important; flex: 1 1 auto; }
  .pane-hint { display: flex; }

  .topbar { padding-top: 28px; }
  .topbar__title { font-size: 28px; line-height: 34px; }
  .card__thumb { width: 56px; height: 56px; }
  .card__title { font-size: 16px; }

  .hero__back, .formbar__back { display: none; }
  .hero__image { height: 260px; }
  .formbar { justify-content: flex-start; margin-top: 0; }

  .article {
    padding-bottom: 60px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "hero hero" "head actions" "cols cols";
    align-content: start;
  }
  .hero { grid-area: hero; }
  .article__head { grid-area: head; padding: 32px 24px 0 40px; gap: 14px; }
  .article__columns { grid-area: cols; }
  .article .actionbar { grid-area: actions; align-self: start; justify-self: end; }
  .article__title { font-size: 34px; line-height: 40px; letter-spacing: -0.8px; }
  .meta { gap: 8px 20px; }

  .article__columns {
    display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0 48px;
    align-items: start; padding: 0 40px; margin-top: 6px;
  }
  .section { padding: 0; }
  .section + .section { margin-top: 0; }
  .article__columns .section__title { margin-top: 26px; }
  .ing { min-height: 36px; }
  .ing__text { font-size: 15px; }
  .ing__amount { font-size: 13px; }

  .actionbar {
    position: static; justify-content: flex-start;
    padding: 34px 40px 0; margin-top: 0; background: none; border-top: 0;
  }
  .actionbar .btn { min-height: 42px; padding: 0 18px; font-size: 15px; border-radius: var(--r-sm); }
  .actionbar .btn--danger { width: 42px; padding: 0; }
  .actionbar .btn--primary { flex: 0 0 auto; }
  .card__chevron { display: none; }
  .actionbar--form { padding: 28px 40px 40px; margin-top: 0; }
  .actionbar--form .btn { min-height: 50px; padding: 0 22px; font-size: 17px; border-radius: var(--r-md); }
  .actionbar--form .btn--ghost { flex: 0 0 auto; }
  .actionbar--form .btn--wide { flex: 0 0 auto; }

  .form__body { max-width: 640px; padding: 28px 40px 40px; }
  .formbar { padding: 0 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}