/* Additions of the platform's panel on top of panel.css (the stylesheet first written for Vendellek). */
.pmark { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--forest); color: #fff; font: 700 1.1rem var(--head); }
.pmark-lg { width: 72px; height: 72px; border-radius: 20px; font-size: 2.2rem; margin: 0 auto 10px; }
.muted { color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 34px 18px; }
.card-title { margin-top: 0; }
.field-error { color: var(--red); font-size: .86rem; margin: 4px 0 0; }
.toast-error { background: #7a221b; }
input[type=email], input[type=number] { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); min-height: 44px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--ink); }
.stat b { display: block; font: 700 1.5rem/1.2 var(--head); font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .86rem; }
.stat.pos b { color: #1f6a3a; } .stat.neg b { color: var(--red); }
.nums td, .nums th, .num { font-variant-numeric: tabular-nums; }
.list .num, .list.nums td:not(:first-child), .list.nums th:not(:first-child) { text-align: right; white-space: nowrap; width: auto; }
.gain { color: #1f6a3a; } .loss { color: var(--red); }
.list small.gain, .list small.loss { font-size: .78rem; }
.status-select { width: auto; min-height: 34px; padding: 4px 12px; border-radius: 999px; font: 600 .8rem var(--body); border: 0; cursor: pointer; background-color: #e7eaee; color: #3c4650; }
.status-select.badge-available { background-color: #d9efdf; color: #1f6a3a; } .status-select.badge-watch { background-color: #f5ead9; color: #83561c; }
.status-select.badge-reserved { background-color: #f3e4e1; color: #8a3d33; } .status-select.badge-stays { background-color: var(--forest-soft); color: var(--forest); }
.kit a { color: var(--ink); font-weight: 600; text-decoration: none; } .kit a:hover { text-decoration: underline; } .kit a.go { color: var(--forest); }
.narrow-input { max-width: 220px; }
.weigh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 14px; }
.weigh-cell { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; } .weigh-cell small { font-weight: 400; color: var(--muted); }
.cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .cal-head b { font: 700 1.2rem var(--head); min-width: 11ch; text-align: center; }
.cal { padding: 0; overflow: hidden; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-days span { padding: 8px; font: 600 .72rem var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.cal-cell { min-height: 92px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 3px; align-content: start; min-width: 0; }
.cal-grid .cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.is-out { background: var(--bg); }
.cal-num { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.is-today .cal-num { background: var(--forest); color: #fff; border-radius: 999px; width: 24px; height: 24px; display: grid; place-items: center; font-weight: 700; }
.cal-ev { display: block; font-size: .74rem; font-weight: 600; line-height: 1.25; padding: 3px 6px; border-radius: 6px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #e7eaee; color: #3c4650; }
.ev-health { background: #f3e4e1; color: #8a3d33; } .ev-breeding { background: #f5ead9; color: #83561c; } .ev-birth { background: #f5c542; color: #1d2721; }
.ev-litter, .ev-leave { background: var(--forest-soft); color: var(--forest); } .ev-pickup { background: #d9efdf; color: #1f6a3a; } .ev-show { background: #e4e0f3; color: #4a3d8a; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; } .legend .cal-ev { display: inline-block; }
.cal-date { display: grid; line-height: 1; justify-items: center; } .cal-date b { font: 700 1.05rem var(--head); } .cal-date small { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--forest); }
.soon-mark { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--forest-soft); color: var(--forest); }
.soon-mark svg { width: 44px; height: 44px; }
@media (max-width: 700px) { .cal-cell { min-height: 60px; padding: 4px; } .cal-ev { font-size: 0; padding: 0; height: 6px; } .legend .cal-ev { font-size: .72rem; height: auto; padding: 3px 6px; } }

/* platform console and help mode */
.support-bar { background: #f5c542; color: #1d2721; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: .92rem; }
.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; align-items: start; margin-top: 18px; }
.cols .card { margin-bottom: 0; }
.cols .card.form { max-width: none; }
.cols .card.form > .actions { position: static; margin: 16px 0 0; padding: 0; border-top: 0; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.inline-form input, .inline-form select { flex: 1 1 150px; width: auto; }
.st-live, .inv-paid { background: #d9efdf; color: #1f6a3a; }
.st-staging, .inv-draft { background: #f5ead9; color: #83561c; }
.st-suspended, .inv-cancelled { background: #e7eaee; color: #3c4650; }
.inv-issued { background: #f3e4e1; color: #8a3d33; }
.hrow h1 .badge { vertical-align: middle; margin-left: 8px; font-family: var(--body); }
.is-console .pbar { grid-template-columns: repeat(5, 1fr); }

/* accounts grouped by instance */
.filter { display: grid; grid-template-columns: minmax(180px, 280px) minmax(180px, 1fr) auto; gap: 0 14px; align-items: end; padding-top: 6px; }
.filter-actions { display: flex; gap: 8px; }
@media (max-width: 700px) { .filter { grid-template-columns: 1fr; } .filter-actions { margin-top: 14px; } }
.group .list.in-group td { padding-inline: 14px; }
.group-empty { padding: 12px 14px; margin: 0; }

/* website group: tags, photo order, gallery, library, look */
.tag-live { background: #d9efdf; color: #1f6a3a; border-color: #bfe0c9; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; cursor: pointer; }
.chk input { width: auto; min-height: 0; margin: 0; }
.flash-error { background: #f3e4e1; color: #8a3d33; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.sortable-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.sort-item { position: relative; margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 6px; min-width: 0; }
.sort-item.dragging { opacity: .45; }
.sort-item > img, .sort-item > .pdf { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.sort-item figcaption { display: grid; gap: 6px; margin-top: 6px; }
.sort-item figcaption input[name^="alt_"] { min-height: 34px; padding: 4px 8px; font-size: .85rem; }
.sort-tools { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.handle { position: absolute; top: 10px; left: 10px; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .9); cursor: grab; font-size: 1.1rem; user-select: none; }
.sec-list .handle { position: static; background: none; }
.mv { min-width: 32px; min-height: 30px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; cursor: pointer; }
.pdf { display: grid !important; place-items: center; align-content: center; gap: 4px; background: #f3e4e1; color: #8a3d33; font-weight: 700; text-decoration: none; text-align: center; padding: 8px; }
.pdf small { font-weight: 400; font-size: .72rem; word-break: break-all; }
.inline-pick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; font-size: .9rem; }
.inline-pick select { width: auto; min-height: 34px; }
.new-album .filter { grid-template-columns: minmax(180px, 1fr) minmax(160px, 240px) minmax(140px, 200px) auto; }
@media (max-width: 800px) { .new-album .filter { grid-template-columns: 1fr; } }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.album-card { display: grid; gap: 4px; padding: 10px; text-decoration: none; color: var(--ink); margin: 0; }
.album-card img, .album-empty { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.album-empty { display: grid; place-items: center; background: var(--bg); color: var(--muted); font-weight: 700; }
.album-card small { color: var(--muted); }
.seg-links { margin-bottom: 14px; }
.seg-links a { font: 600 .88rem var(--body); padding: 8px 16px; border-radius: 999px; color: var(--muted); text-decoration: none; }
.seg-links a[aria-current] { background: var(--forest); color: #fff; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.lib-item { margin: 0; padding: 8px; display: grid; gap: 6px; align-content: start; }
.lib-item img, .lib-item .pdf { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.lib-item figcaption { display: grid; gap: 2px; min-width: 0; }
.lib-item small { overflow-wrap: anywhere; font-size: .78rem; }
.lib-item form { margin-top: 4px; }
.look-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .look-cols { grid-template-columns: 1fr; } }
.look-preview { position: sticky; top: 76px; }
.look-preview iframe { width: 100%; height: 72vh; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.pending { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pick-field { margin-bottom: 14px; }
.thumb-contain { object-fit: contain; background: var(--bg); }
.thumb-wide { width: 200px; }
.picker summary { cursor: pointer; color: var(--forest); font-size: .9rem; margin-top: 8px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; margin-top: 8px; max-height: 260px; overflow: auto; }
.pick { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; opacity: 0; }
.pick img, .pick .nophoto { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 3px solid transparent; font-size: .7rem; }
.pick input:checked + img, .pick input:checked + .nophoto { border-color: var(--forest); }
.pick input:focus-visible + img { outline: 2px solid var(--forest); outline-offset: 2px; }
.color-in { width: 90px; height: 44px; padding: 2px; }
.sec-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.sec-list .sort-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; }
.sec-list .sort-tools { margin-left: auto; }
.upload-row { padding-bottom: 6px; }
@media (max-width: 600px) {
  .sortable-grid, .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sort-tools .chk { font-size: .82rem; }
  .inline-pick { margin-left: 0; }
}

/* photo in forms and lists */
.photo-pick .pf-row > div { min-width: 0; flex: 1; }
.photo-pick small { display: block; margin-top: 4px; }
.name-with-photo { display: inline-flex; align-items: center; gap: 10px; }
.mini-empty { display: inline-block; background: var(--forest-soft); }

/* Wygląd → strona główna motywu */
.theme-home { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.home-sec { padding-top: 6px; }
.home-sec > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.home-sec > summary::-webkit-details-marker { display: none; }
.home-sec > summary::before { content: "▸"; color: var(--forest); transition: transform .15s; }
.home-sec[open] > summary::before { transform: rotate(90deg); }
.home-sec > summary h2 { margin: 8px 0; font-size: 1.15rem; }
.home-sec h3 { margin: 22px 0 6px; font-size: 1rem; }
.tr-field { margin-bottom: 10px; min-width: 0; }
.tr-langs { display: grid; gap: 8px; }
.tr-langs.two { grid-template-columns: 1fr 1fr; }
.tr-lang { display: grid; gap: 2px; min-width: 0; }
.tr-lang small { font-size: .7rem; font-weight: 700; color: var(--muted); letter-spacing: .06em; }
@media (max-width: 700px) { .tr-langs.two { grid-template-columns: 1fr; } }
.home-rows { display: grid; gap: 10px; margin: 8px 0 10px; }
.home-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 10px; }
.home-row-tools { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.home-row-tools .handle { position: static; background: none; }
.home-row-tools .rm { font-size: .78rem; flex-direction: column; gap: 0; }
.home-row-body { display: grid; gap: 6px; min-width: 0; }
.asset-field { display: flex; align-items: center; gap: 10px; }
.asset-field img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.pick-dialog { width: min(980px, calc(100vw - 32px)); max-height: 86vh; border: 0; border-radius: 16px; padding: 18px; }
.pick-dialog::backdrop { background: rgba(29, 39, 33, .55); }
.pick-dialog input[type=search] { margin-bottom: 8px; }
.pick-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; max-height: 62vh; overflow: auto; }
.pick-item { display: grid; gap: 2px; border: 2px solid transparent; background: var(--bg); border-radius: 10px; padding: 4px; cursor: pointer; text-align: center; font: inherit; }
.pick-item:hover, .pick-item:focus-visible { border-color: var(--forest); }
.pick-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.pick-item small { font-size: .68rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-none { min-height: 112px; place-items: center; color: var(--muted); }
.sticky-actions { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; z-index: 3; }
@media (max-width: 899px) { .sticky-actions { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } }

/* bolder icons inside buttons (plus, calendar arrows) */
.btn .ico-bold { flex: none; margin-right: 6px; }
.btn-round { width: 44px; padding: 0; }
.btn-round .ico-bold { margin: 0; }
.btn-sm.btn-round { width: 38px; min-height: 38px; }
.cal-head .btn-round { border-width: 2px; }
/* status chosen from a list: its own arrow, clear of the rounded end */
.status-select { -webkit-appearance: none; appearance: none; padding: 6px 34px 6px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; }
.tag { white-space: nowrap; }
.home-sec > summary small { margin-left: auto; }
.ico-bold { vertical-align: -3px; }

/* kitten photo in the list of litters grows in place, like the parents on the site */
.zoomable { position: relative; cursor: zoom-in; transform-origin: left center; transition: transform .25s ease, box-shadow .2s;
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); object-position: center 25%; }
.zoomable:hover { box-shadow: 0 0 0 2px var(--forest); }
.zoomable.zoomed { transform: scale(3); z-index: 30; cursor: zoom-out; border-width: 1px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 6px 24px rgba(29, 39, 33, .35); }
.kit:has(.zoomed), .litter:has(.zoomed) { overflow: visible; position: relative; z-index: 30; }
/* Wygląd: list of home page sections — one even line per section */
.sec-list .sort-item { min-height: 48px; padding: 4px 8px 4px 6px; gap: 8px; }
.sec-list .chk { margin: 0; flex: 1; min-width: 0; min-height: 40px; }
.sec-list .handle { width: 28px; height: 40px; display: grid; place-items: center; }
.sec-list .sort-tools { gap: 6px; }
.sec-list .mv { min-height: 34px; min-width: 34px; }

.pdf-poster { position: relative; display: block; }
.pdf-poster img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 8px; }
.pdf-poster b { position: absolute; left: 6px; bottom: 6px; background: #8a3d33; color: #fff; font-size: .68rem; border-radius: 6px; padding: 1px 6px; }

/* ---- page builder (Strony → strona): blocks on the left, live preview on the right on wide screens */
.builder { display: grid; gap: 24px; align-items: start; }
.builder-form.form { max-width: none; min-width: 0; }
.builder-preview { display: none; }
@media (min-width: 1280px) {
  .builder { grid-template-columns: minmax(0, 1fr) minmax(400px, 44%); }
  .builder-preview { display: flex; flex-direction: column; position: sticky; top: calc(var(--top-h, 60px) + 12px);
    height: calc(100vh - var(--top-h, 60px) - 36px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
}
.pv-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.pv-bar .seg { margin-left: auto; }
.pv-bar .seg button { padding: 4px 10px; min-height: 32px; }
.pv-state { font-size: .8rem; }
.pv-frame { position: relative; flex: 1; overflow: hidden; background: var(--bg); }
.pv-frame iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; }
.blk-headrow { margin: 22px 0 6px; }
.blk-headrow h2 { margin: 0; font-size: 1.15rem; }
.blk-fold { display: flex; gap: 6px; }
.blk-list { display: grid; gap: 10px; }
.blk-ed { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.blk-ed.dragging { opacity: .5; }
.blk-ed[open] { box-shadow: 0 1px 2px rgba(29, 39, 33, .05), 0 6px 18px rgba(29, 39, 33, .06); }
.blk-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; list-style: none; min-height: 52px; }
.blk-head::-webkit-details-marker { display: none; }
.blk-head .handle { position: static; background: none; cursor: grab; color: var(--muted); font-size: 1.1rem; padding: 4px; }
.blk-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--forest-soft); color: var(--forest); }
.blk-ico .ico { width: 20px; height: 20px; }
.blk-name { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.blk-sum { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blk-ed[open] .blk-sum { display: none; }
.blk-tools { display: flex; gap: 2px; flex: none; }
.ib { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: none; color: var(--ink); cursor: pointer; padding: 0; }
.ib:hover, .ib:focus-visible { background: var(--forest-soft); color: var(--forest); }
.ib-danger:hover, .ib-danger:focus-visible { background: #f3e4e1; color: #8a3d33; }
.blk-body { display: grid; gap: 8px; padding: 4px 16px 16px; border-top: 1px solid var(--line); padding-top: 14px; min-width: 0; }
.blk-body > .fl, .blk-body .fl { margin-top: 4px; }
.blk-split { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: 16px; }
.blk-side { display: grid; gap: 6px; align-content: start; }
.blk-opts { display: flex; align-items: center; gap: 10px; justify-content: flex-end; font-size: .86rem; color: var(--muted); margin-top: 4px; }
.blk-opts select { width: auto; min-height: 36px; padding: 4px 30px 4px 10px; }
.blk-rows { display: grid; gap: 8px; }
.blk-rows-photo { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.blk-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); min-width: 0; }
.blk-row.dragging { opacity: .5; }
.blk-row-tools { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.blk-row-tools .handle { position: static; background: none; cursor: grab; color: var(--muted); }
.blk-row-tools .ib { width: 30px; height: 30px; }
.blk-row-body { display: grid; gap: 6px; min-width: 0; }
.blk-row-photo { grid-template-columns: 1fr; }
.blk-row-photo .blk-row-tools { flex-direction: row; justify-content: space-between; }
.blk-row-photo .asset-field { display: grid; gap: 6px; }
.blk-row-photo .pick-preview { width: 100%; aspect-ratio: 1; object-fit: cover; }
.bl-field { min-width: 0; }
.bl-field label { display: grid; gap: 4px; }
.blk-add-main { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 12px 0 4px; padding: 16px;
  border: 2px dashed var(--line); border-radius: var(--radius); background: none; color: var(--forest); font: 600 1rem var(--body, inherit); cursor: pointer; }
.blk-add-main:hover, .blk-add-main:focus-visible { border-color: var(--forest); background: var(--forest-soft); }
.blk-empty { text-align: center; padding: 24px 12px; }
.blk-dialog h3 { margin: 14px 0 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.blk-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.blk-kind { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; text-align: left; padding: 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); }
.blk-kind .blk-ico { grid-row: span 2; }
.blk-kind small { color: var(--muted); font-size: .8rem; line-height: 1.3; }
.blk-kind:hover, .blk-kind:focus-visible { border-color: var(--forest); background: var(--forest-soft); }
.hint.warn { color: #8a3d33; }
.layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 18px; }
.layout-card { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--ink); text-decoration: none; }
.layout-card:hover, .layout-card:focus-visible { border-color: var(--forest); box-shadow: 0 6px 18px rgba(29, 39, 33, .08); }
.layout-card small { color: var(--muted); }
.layout-mini { display: grid; gap: 4px; padding: 10px; margin-bottom: 8px; border-radius: 10px; background: var(--bg); min-height: 150px; align-content: start; }
.layout-mini span { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--forest-soft); color: var(--forest); }
.layout-mini .ico { width: 15px; height: 15px; }
.layout-mini span::after { content: ""; flex: 1; height: 5px; border-radius: 3px; background: currentColor; opacity: .25; }
@media (max-width: 640px) {
  .blk-split { grid-template-columns: 1fr; }
  .blk-tools .ib { width: 30px; height: 30px; }
  .blk-head { gap: 6px; padding: 6px; }
}
.theme-list { display: grid; gap: 6px; margin: 10px 0; }
.theme-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); }

/* first steps on the start page */
.steps { margin-bottom: 18px; }
.steps-count { font-weight: 700; color: var(--forest); }
.steps-track { display: block; height: 6px; border-radius: 99px; background: var(--forest-soft); overflow: hidden; margin: 4px 0 14px; }
.steps-bar { display: block; height: 100%; background: var(--forest); transform-origin: left; transform: scaleX(0); transition: transform .5s ease; }
.steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: step; }
.steps-list li { counter-increment: step; }
.steps-list a { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; border: 1px solid var(--line); }
.steps-list a::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--forest-soft); color: var(--forest); font-weight: 700; }
.steps-list a:hover { border-color: var(--forest); }
.steps-list small { color: var(--muted); }
.steps-list .is-done a { opacity: .6; border-style: dashed; }
.steps-list .is-done a::before { content: "\2713"; background: var(--forest); color: #fff; }
.card.empty p:first-child { max-width: 56ch; margin-inline: auto; }
@media (prefers-reduced-motion: no-preference) {
  .blk-ed.blk-new { animation: blk-new 1.6s ease; }
  @keyframes blk-new { 0%, 30% { box-shadow: 0 0 0 3px var(--forest), 0 6px 18px rgba(29, 39, 33, .12); } 100% { box-shadow: 0 0 0 0 transparent; } }
}
[aria-invalid="true"] { border-color: var(--red) !important; box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 18%, transparent); }

/* a kitten in the list of litters: the name and colour keep their room; on phones the status goes under them,
   across the whole row (it is the thing most often changed here) */
.kit .grow { flex: 1 1 8rem; min-width: 0; }
.kit .grow a { display: inline-block; padding: 8px 0; }
.kit .grow small { display: block; margin-top: -6px; color: var(--muted); }
.kit form.inline { flex: none; }
@media (max-width: 560px) {
  .kit { flex-wrap: wrap; row-gap: 4px; }
  .kit form.inline { flex: 1 1 100%; padding-left: 54px; }
  .kit .status-select { width: 100%; min-height: 44px; }
}
/* calendar on a phone: the picked day and its events in full under the month */
.cal-day { display: grid; gap: 6px; margin-top: 10px; padding: 12px 14px; }
.cal-day b { font-size: .95rem; }
.cal-ev.cal-ev-full { font-size: .92rem; height: auto; padding: 10px 12px; white-space: normal; border-radius: 10px; }
@media (max-width: 700px) {
  .cal-cell:has(.cal-ev) { cursor: pointer; }
  .cal-ev { height: 8px; border-radius: 99px; margin-top: 2px; }
  .cal-cell.is-picked { box-shadow: inset 0 0 0 2px var(--forest); }
}

.field-more > summary { cursor: pointer; color: var(--forest); font-weight: 600; padding: 10px 0; }
h2.label { font-size: .8rem; }
.cal-num { font-size: .85rem; }

/* page editor: the settings of the page fold into one line */
.page-settings > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.page-settings > summary::-webkit-details-marker { display: none; }
.page-settings > summary::before { content: "\25B8"; color: var(--forest); transition: transform .15s; }
.page-settings[open] > summary::before { transform: rotate(90deg); }
.page-settings[open] > summary { margin-bottom: 12px; }
.act-more, .blk-more { display: none; }
@media (max-width: 640px) {
  /* one row of buttons: the main one and "Więcej" (the rest shows after it) */
  .sticky-actions:has(.act-more) .btn:not(:first-child):not(.act-more) { display: none; }
  .sticky-actions.open .btn:not(.act-more) { display: inline-flex !important; }
  .sticky-actions .act-more { display: inline-flex; }
  .sticky-actions.open .act-more { display: none; }
  .sticky-actions:has(.act-more) { flex-wrap: wrap; }
  .sticky-actions:has(.act-more) .btn { flex: 1 1 auto; }
  /* a block's tools behind one button: its name keeps the room */
  .blk-head { flex-wrap: wrap; }
  .blk-tools .ib:not(.blk-more) { display: none; }
  .blk-tools .blk-more { display: inline-grid; }
  .blk-head.tools-open .blk-tools { flex-basis: 100%; justify-content: flex-end; gap: 6px; }
  .blk-head.tools-open .blk-tools .ib { display: inline-grid; width: 44px; height: 44px; background: var(--bg); }
  .blk-ico { width: 30px; height: 30px; }
}

/* reservations */
.res-filter { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; max-width: 420px; }
.res-filter .fl { margin: 0; }
.rsv-row { gap: 12px; }
.rsv-row .handle { cursor: grab; color: var(--muted); font-size: 1.1rem; padding: 4px; }
.res-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--forest-soft); color: var(--forest); font-weight: 700; font-size: .85rem; flex: none; }
.res-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; text-align: right; }
.res-meta small { color: var(--muted); }
.tag.res-new { background: #e7eaee; color: #3c4650; } .tag.res-talk { background: #f5ead9; color: #83561c; }
.tag.res-deposit { background: #e4e0f3; color: #4a3d8a; } .tag.res-assigned, .tag.res-contract { background: #f3e4e1; color: #8a3d33; }
.tag.res-done { background: #d9efdf; color: #1f6a3a; } .tag.res-dropped { background: #eee; color: #777; }
.res-more { margin-top: 14px; } .res-more > summary { cursor: pointer; font-weight: 600; }
.res-dialog form { display: grid; gap: 10px; }
.stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: st; }
.stepper li { counter-increment: st; }
.stepper button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: 600 .9rem var(--body); color: var(--muted); cursor: pointer; }
.stepper button::before { content: counter(st); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--bg); }
.stepper .is-past button { color: var(--forest); } .stepper .is-past button::before { content: "\2713"; background: var(--forest-soft); }
.stepper .is-now button { background: var(--forest); border-color: var(--forest); color: #fff; } .stepper .is-now button::before { background: rgba(255,255,255,.2); }
.res-steps .linkish { color: var(--forest); text-decoration: underline; font-weight: 600; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; margin: 14px 0; }
.res-grid .card { margin: 0; }
.res-money { font-size: 1.05rem; }
.res-answers { display: grid; gap: 8px; margin: 0; } .res-answers dt { font-weight: 600; font-size: .88rem; color: var(--muted); } .res-answers dd { margin: 0; }
.res-pay { display: grid; gap: 10px; margin-top: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .grid3 { grid-template-columns: 1fr 1fr; } .res-meta { display: none; } }

/* Dokumenty and the owner's portal link */
.copy-row { display: flex; gap: 8px; margin: 8px 0; }
.copy-row input { flex: 1; min-width: 0; font-size: .88rem; }
.tag.doc-draft { background: #e7eaee; color: #3c4650; } .tag.doc-sent { background: #f5ead9; color: #83561c; }
.tag.doc-accepted { background: #d9efdf; color: #1f6a3a; } .tag.doc-void { background: #f3e1de; color: #8a2a20; }
.doc-edit textarea { min-height: 55vh; font: .95rem/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace; }
.doc-hash { font-size: .78rem; word-break: break-all; }
.doc-read { max-width: 80ch; } .doc-read h3 { margin: 1.4em 0 .4em; font-size: 1rem; }
.doc-fields { margin: 10px 0; } .doc-fields > summary { cursor: pointer; font-weight: 600; color: var(--forest); }
.doc-fields dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 16px; margin: 10px 0 0; }
.doc-fields dl div { display: flex; gap: 8px; align-items: baseline; } .doc-fields dt { flex: none; } .doc-fields dd { margin: 0; color: var(--muted); font-size: .88rem; }
.doc-state p:first-child { margin-top: 0; }

/* Rodowody: the tree (positions generated: column = generation, rows = 16 >> generation) */
.ped-tree { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto repeat(16, minmax(44px, auto)); gap: 4px 10px; }
.ped-gen { grid-row: 1; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: 4px; }
.ped-gen-1 { grid-column: 1; } .ped-gen-2 { grid-column: 2; } .ped-gen-3 { grid-column: 3; } .ped-gen-4 { grid-column: 4; }
.ped-cell { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 6px 10px; border-radius: 10px;
  border: 1px solid var(--line); border-left: 4px solid #8fb3c9; background: var(--surface, #fff); }
.ped-dam { border-left-color: #d9a3b4; }
.ped-empty { background: transparent; border-style: dashed; }
.ped-label { font-size: .7rem; color: var(--muted); }
.ped-name { font-size: .9rem; overflow-wrap: anywhere; line-height: 1.25; }
.ped-cell small { color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.ped-none { color: var(--muted); }
.ped-editing .ped-cell input { width: 100%; min-height: 36px; padding: 4px 8px; font-size: .86rem; }
.ped-more { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ped-own { color: var(--forest) !important; }
.ped-tree .pos-s { grid-column: 1; grid-row: 2 / span 8; }
.ped-tree .pos-d { grid-column: 1; grid-row: 10 / span 8; }
.ped-tree .pos-ss { grid-column: 2; grid-row: 2 / span 4; }
.ped-tree .pos-sd { grid-column: 2; grid-row: 6 / span 4; }
.ped-tree .pos-ds { grid-column: 2; grid-row: 10 / span 4; }
.ped-tree .pos-dd { grid-column: 2; grid-row: 14 / span 4; }
.ped-tree .pos-sss { grid-column: 3; grid-row: 2 / span 2; }
.ped-tree .pos-ssd { grid-column: 3; grid-row: 4 / span 2; }
.ped-tree .pos-sds { grid-column: 3; grid-row: 6 / span 2; }
.ped-tree .pos-sdd { grid-column: 3; grid-row: 8 / span 2; }
.ped-tree .pos-dss { grid-column: 3; grid-row: 10 / span 2; }
.ped-tree .pos-dsd { grid-column: 3; grid-row: 12 / span 2; }
.ped-tree .pos-dds { grid-column: 3; grid-row: 14 / span 2; }
.ped-tree .pos-ddd { grid-column: 3; grid-row: 16 / span 2; }
.ped-tree .pos-ssss { grid-column: 4; grid-row: 2 / span 1; }
.ped-tree .pos-sssd { grid-column: 4; grid-row: 3 / span 1; }
.ped-tree .pos-ssds { grid-column: 4; grid-row: 4 / span 1; }
.ped-tree .pos-ssdd { grid-column: 4; grid-row: 5 / span 1; }
.ped-tree .pos-sdss { grid-column: 4; grid-row: 6 / span 1; }
.ped-tree .pos-sdsd { grid-column: 4; grid-row: 7 / span 1; }
.ped-tree .pos-sdds { grid-column: 4; grid-row: 8 / span 1; }
.ped-tree .pos-sddd { grid-column: 4; grid-row: 9 / span 1; }
.ped-tree .pos-dsss { grid-column: 4; grid-row: 10 / span 1; }
.ped-tree .pos-dssd { grid-column: 4; grid-row: 11 / span 1; }
.ped-tree .pos-dsds { grid-column: 4; grid-row: 12 / span 1; }
.ped-tree .pos-dsdd { grid-column: 4; grid-row: 13 / span 1; }
.ped-tree .pos-ddss { grid-column: 4; grid-row: 14 / span 1; }
.ped-tree .pos-ddsd { grid-column: 4; grid-row: 15 / span 1; }
.ped-tree .pos-ddds { grid-column: 4; grid-row: 16 / span 1; }
.ped-tree .pos-dddd { grid-column: 4; grid-row: 17 / span 1; }
.ped-summary .card-title { margin-top: 14px; }
.ped-coi { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ped-coi-num { font: 700 1.9rem/1 var(--display, inherit); padding: 10px 16px; border-radius: 12px; background: var(--forest-soft); color: var(--forest); }
.ped-coi-mid .ped-coi-num { background: #f5ead9; color: #83561c; }
.ped-coi-high .ped-coi-num, .ped-coi-very-high .ped-coi-num { background: #f3e1de; color: #8a2a20; }
.ped-bar meter { width: 90px; height: 8px; }
.hrow-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .ped-tree { display: flex; flex-direction: column; }
  .ped-gen { margin-top: 10px; }
  .ped-gen-1 { order: 0; } .ped-gen-2 { order: 2; } .ped-gen-3 { order: 4; } .ped-gen-4 { order: 6; }
  .ped-tree .pos-s { order: 1; }
  .ped-tree .pos-d { order: 1; }
  .ped-tree .pos-ss { order: 3; }
  .ped-tree .pos-sd { order: 3; }
  .ped-tree .pos-ds { order: 3; }
  .ped-tree .pos-dd { order: 3; }
  .ped-tree .pos-sss { order: 5; }
  .ped-tree .pos-ssd { order: 5; }
  .ped-tree .pos-sds { order: 5; }
  .ped-tree .pos-sdd { order: 5; }
  .ped-tree .pos-dss { order: 5; }
  .ped-tree .pos-dsd { order: 5; }
  .ped-tree .pos-dds { order: 5; }
  .ped-tree .pos-ddd { order: 5; }
  .ped-tree .pos-ssss { order: 7; }
  .ped-tree .pos-sssd { order: 7; }
  .ped-tree .pos-ssds { order: 7; }
  .ped-tree .pos-ssdd { order: 7; }
  .ped-tree .pos-sdss { order: 7; }
  .ped-tree .pos-sdsd { order: 7; }
  .ped-tree .pos-sdds { order: 7; }
  .ped-tree .pos-sddd { order: 7; }
  .ped-tree .pos-dsss { order: 7; }
  .ped-tree .pos-dssd { order: 7; }
  .ped-tree .pos-dsds { order: 7; }
  .ped-tree .pos-dsdd { order: 7; }
  .ped-tree .pos-ddss { order: 7; }
  .ped-tree .pos-ddsd { order: 7; }
  .ped-tree .pos-ddds { order: 7; }
  .ped-tree .pos-dddd { order: 7; }
  .ped-cell { min-height: 44px; }
}
/* the printed pedigree: one landscape sheet */
.ped-print { background: #fff; padding: 20px; }
.ped-print-head h1 { margin: 0 0 4px; font-size: 1.5rem; }
.ped-print-head p { margin: 0 0 4px; color: var(--muted); }
.ped-print-head { margin-bottom: 14px; }
.ped-print-bar { display: flex; justify-content: space-between; align-items: center; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .ped-print { padding: 0; }
  .ped-print-bar { display: none; }
  .ped-print .ped-tree { display: grid; grid-template-rows: auto repeat(16, minmax(0, auto)); gap: 2px 6px; }
  .ped-print .ped-cell { padding: 2px 6px; border-radius: 4px; break-inside: avoid; }
  .ped-print .ped-name { font-size: 8.5pt; } .ped-print .ped-cell small, .ped-print .ped-label { font-size: 6.5pt; }
}

/* Druki klubowe */
.club-link { margin-bottom: 16px; text-decoration: none; color: var(--ink); }
.tag.club-error { background: #f3e1de; color: #8a2a20; } .tag.club-warn { background: #f5ead9; color: #83561c; }
.tag.club-ok { background: #d9efdf; color: #1f6a3a; }

/* Zdrowie: weight alarms, the litter's weight chart, the tests of the cats */
.health-alerts ul { margin: 0 0 6px; padding-left: 20px; display: grid; gap: 4px; }
.ha-error { color: #8a2a20; font-weight: 600; } .ha-warn { color: #83561c; }
.wflag { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #fff; }
.wflag-error { background: #b5402f; } .wflag-warn { background: #c28a12; }
.wchart { margin: 0 0 12px; } .wchart svg { width: 100%; height: auto; display: block; }
.wc-grid { stroke: var(--line); stroke-width: 1; }
.wc-ylabel { font-size: 11px; fill: var(--muted); text-anchor: end; } .wc-xlabel { font-size: 11px; fill: var(--muted); text-anchor: middle; }
.wc-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.wc-dot { fill: #fff; stroke-width: 2; }
.wc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; }
.wc-legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: currentColor; }
.wc-line.ws-1, .wc-dot.ws-1 { stroke: #2e5a44; } .wc-legend .ws-1 { color: #2e5a44; }
.wc-line.ws-2, .wc-dot.ws-2 { stroke: #b5523b; } .wc-legend .ws-2 { color: #b5523b; }
.wc-line.ws-3, .wc-dot.ws-3 { stroke: #3b6fb5; } .wc-legend .ws-3 { color: #3b6fb5; }
.wc-line.ws-4, .wc-dot.ws-4 { stroke: #c28a12; } .wc-legend .ws-4 { color: #c28a12; }
.wc-line.ws-5, .wc-dot.ws-5 { stroke: #7a4fa3; } .wc-legend .ws-5 { color: #7a4fa3; }
.wc-line.ws-6, .wc-dot.ws-6 { stroke: #2f8f8f; } .wc-legend .ws-6 { color: #2f8f8f; }
.wc-line.ws-7, .wc-dot.ws-7 { stroke: #b5407a; } .wc-legend .ws-7 { color: #b5407a; }
.wc-line.ws-8, .wc-dot.ws-8 { stroke: #5f6b63; } .wc-legend .ws-8 { color: #5f6b63; }
.tests-row { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 8px 16px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tests-row:last-of-type { border-bottom: 0; }
.tests-cat { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.tests-list { display: flex; flex-wrap: wrap; gap: 6px; }
.test-chip { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .85rem; text-decoration: none; border: 1px solid transparent; }
.test-normal, .test-info { background: #d9efdf; color: #1f6a3a; } .test-carrier { background: #f5ead9; color: #83561c; }
.test-affected { background: #f3e1de; color: #8a2a20; } .test-equivocal { background: #e7eaee; color: #3c4650; }
.test-expired { background: #fff; color: #8a2a20; border-color: #e0b8b2; text-decoration: line-through; }
.test-expiring { border-color: #c28a12; }
@media (max-width: 640px) { .tests-row { grid-template-columns: 1fr; } .tests-cat { flex-direction: row; align-items: center; justify-content: space-between; } }

/* Wystawy → Tytuły */
.titles-ed { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.title-group { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 4px; min-width: 0; }
.title-group textarea { font-size: .92rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* console: the check of a breeder's domain */
.dns { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.dns h3 { margin: 0 0 8px; }
.dns-steps { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.dns-steps small { display: block; color: var(--muted); overflow-wrap: anywhere; }
.dns-state { font-size: .8rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; }
.dns-ok .dns-state { background: #d9efdf; color: #1f6a3a; } .dns-warn .dns-state { background: #f5ead9; color: #83561c; }
.dns-fail .dns-state { background: #f3e1de; color: #8a2a20; } .dns-skip .dns-state { background: #e7eaee; color: #3c4650; }
.dns-records code { overflow-wrap: anywhere; }

/* the colours of the panel (Moje konto → Kolory panelu); "las" is the default of panel.css */
html[data-theme="morze"] { --forest: #1d6b6b; --forest-soft: #e0efee; --bg: #eff4f3; --amber: #b07a1f; }
html[data-theme="sliwka"] { --forest: #6b3a5e; --forest-soft: #f2e6ee; --bg: #f6f1f4; --amber: #a8712a; }
html[data-theme="terakota"] { --forest: #9c4a2f; --forest-soft: #f6e7e0; --bg: #f6f0eb; --amber: #7a5a12; }
html[data-theme="grafit"] { --forest: #3a4250; --forest-soft: #e6e9ee; --bg: #f2f3f5; --amber: #a8712a; }
.theme-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.theme-pick label { display: grid; gap: 8px; padding: 10px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 600; }
.theme-pick label:has(input:checked) { border-color: var(--forest); }
.theme-pick input { position: absolute; opacity: 0; }
.theme-pick input:focus-visible + .swatch { outline: 2px solid var(--forest); outline-offset: 2px; }
.swatch { display: flex; height: 34px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.swatch i { flex: 1; }
.sw-las i:nth-child(1) { background: #2e5a44; } .sw-las i:nth-child(2) { background: #e5eee8; } .sw-las i:nth-child(3) { background: #f4f2ed; }
.sw-morze i:nth-child(1) { background: #1d6b6b; } .sw-morze i:nth-child(2) { background: #e0efee; } .sw-morze i:nth-child(3) { background: #eff4f3; }
.sw-sliwka i:nth-child(1) { background: #6b3a5e; } .sw-sliwka i:nth-child(2) { background: #f2e6ee; } .sw-sliwka i:nth-child(3) { background: #f6f1f4; }
.sw-terakota i:nth-child(1) { background: #9c4a2f; } .sw-terakota i:nth-child(2) { background: #f6e7e0; } .sw-terakota i:nth-child(3) { background: #f6f0eb; }
.sw-grafit i:nth-child(1) { background: #3a4250; } .sw-grafit i:nth-child(2) { background: #e6e9ee; } .sw-grafit i:nth-child(3) { background: #f2f3f5; }

/* the platform's console: navy, a dark top bar and the "Admin" badge, so it is never taken for a breeder's panel */
html[data-theme="console"] { --forest: #1f3a68; --forest-soft: #e3e9f4; --bg: #eceff4; --amber: #d29a2a; }
html[data-theme="console"] .ptop { background: #14213d; border-bottom-color: #14213d; }
html[data-theme="console"] .ptop, html[data-theme="console"] .pbrand, html[data-theme="console"] .pmenu-btn { color: #fff; }
html[data-theme="console"] .pbrand small { color: #b9c4d8; }
html[data-theme="console"] .pmenu-btn:hover, html[data-theme="console"] .pmenu.open .pmenu-btn { background: rgba(255, 255, 255, .12); color: #fff; }
.admin-badge { margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: #d29a2a; color: #14213d; font: 700 .7rem/1.2 var(--body);
  letter-spacing: .08em; text-transform: uppercase; }