/* Timzo Cook — the library, the books, the recipe and the cooking mode.
   Every rule is scoped by a .ck-* class (dialogs render outside the page's .ck-world), on Timzo's surfaces and ink;
   the module's terracotta is --tz-mod, set by the shell. Cook keeps a sub-style of its own: a bookish serif for
   titles, warm wood for the bookcase, and large type at the stove. Books don't wear: no decay, ever. */

.ck-world {
    --ck-font-title: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --ck-wood: #8E5E3B;
    --ck-wood-dark: #6B4329;
    --ck-wood-light: #B07A4F;
    --ck-wall: #F6EBDD;
    --ck-wall-2: #EFDFCB;
    color: var(--tz-ink-1);
}

html.tz-dark .ck-world {
    --ck-wood: #6E4A31;
    --ck-wood-dark: #4D3221;
    --ck-wood-light: #8A5F40;
    --ck-wall: #2A2420;
    --ck-wall-2: #241F1B;
}

/* ─── Shared bits ─────────────────────────────────────────────────────── */

.ck-icon {
    flex: none;
}

.ck-title {
    margin: 0;
    font-family: var(--ck-font-title, "Iowan Old Style", Georgia, serif);
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.ck-lede {
    margin: 6px 0 0;
    color: var(--tz-ink-2);
    max-width: 62ch;
}

.ck-hint {
    margin: 0;
    color: var(--tz-ink-3);
    font-size: 0.88rem;
}

.ck-page-head,
.ck-toc__head,
.ck-recipe__bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: var(--tz-space-4);
}

.ck-head-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.ck-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    background: var(--tz-mod);
    color: #FFFFFF;
    font: 650 0.95rem var(--tz-font);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--tz-transition), transform 120ms ease-out;
}

.ck-btn:hover {
    background: var(--tz-mod-strong);
}

.ck-btn:active {
    transform: scale(0.98);
}

.ck-btn:disabled,
.ck-btn--disabled {
    opacity: 0.5;
    pointer-events: none;
}

.ck-btn--soft {
    background: var(--tz-mod-wash-strong);
    color: var(--tz-mod-strong);
}

.ck-btn--soft:hover {
    background: var(--tz-mod-wash-strong);
    color: var(--tz-ink-1);
}

.ck-btn--ghost {
    background: transparent;
    color: var(--tz-ink-1);
    border: 1px solid var(--tz-line-strong);
}

.ck-btn--ghost:hover {
    background: var(--tz-surface-2);
}

.ck-btn--danger {
    color: #B4321F;
}

.ck-btn--small {
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.85rem;
    align-self: flex-start;
}

.ck-btn--big {
    min-height: 60px;
    padding: 0 28px;
    font-size: 1.15rem;
    border-radius: 18px;
}

.ck-link {
    border: 0;
    padding: 0;
    background: none;
    color: var(--tz-mod-strong);
    font: 600 0.92rem var(--tz-font);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ck-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--tz-space-3);
    color: var(--tz-ink-2);
    font-weight: 600;
    text-decoration: none;
}

.ck-back:hover {
    color: var(--tz-mod-strong);
}

.ck-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--tz-ink-3);
    cursor: pointer;
}

.ck-icon-btn:hover,
.ck-icon-btn--on {
    background: var(--tz-mod-wash);
    color: var(--tz-mod-strong);
}

.ck-round {
    width: 40px;
    height: 40px;
    border: 1px solid var(--tz-line-strong);
    border-radius: 50%;
    background: var(--tz-surface-1);
    color: var(--tz-ink-1);
    font: 700 1.2rem/1 var(--tz-font);
    cursor: pointer;
}

.ck-round:disabled {
    opacity: 0.4;
}

.ck-tags,
.ck-chips,
.ck-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ck-tag,
.ck-chip {
    padding: 4px 12px;
    border: 1px solid var(--tz-line);
    border-radius: var(--tz-radius-pill);
    background: var(--tz-surface-1);
    color: var(--tz-ink-2);
    font: 600 0.82rem var(--tz-font);
    cursor: pointer;
}

.ck-tag[aria-pressed="true"] {
    background: var(--tz-mod);
    border-color: var(--tz-mod);
    color: #FFFFFF;
}

.ck-tag--static {
    cursor: default;
    background: var(--tz-mod-wash);
    border-color: transparent;
    color: var(--tz-mod-strong);
}

.ck-chip {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.78rem;
    padding: 2px 9px;
}

.ck-chip:hover {
    border-color: var(--tz-mod);
    color: var(--tz-mod-strong);
}

.ck-missing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: var(--tz-space-6) 0;
}

.ck-danger {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: #B4321F;
    font-weight: 600;
}

.ck-dialog-title {
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 1.5rem;
}

.ck-form__label {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--tz-ink-2);
}

.ck-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 2px solid var(--tz-line);
    border-radius: 12px;
    background: var(--tz-surface-1);
    color: var(--tz-ink-1);
    font: 600 0.9rem var(--tz-font);
    cursor: pointer;
}

.ck-choice[aria-pressed="true"],
.ck-choice[aria-checked="true"] {
    border-color: var(--tz-mod);
    background: var(--tz-mod-wash);
}

.ck-choice--icon {
    width: 44px;
    padding: 0;
    justify-content: center;
}

.ck-choice--book {
    height: 72px;
    padding: 0 14px 0 8px;
}

.ck-choice__spine {
    display: flex;
    align-items: flex-end;
    height: 60px;
}

.ck-choice__spine .ck-spine {
    width: 22px !important;
    height: 60px !important;
}

.ck-choice__spine .ck-spine__title,
.ck-choice__spine .ck-spine__icon {
    display: none;
}

.ck-swatch {
    width: 36px;
    height: 36px;
    border: 3px solid var(--tz-surface-1);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--tz-line-strong);
    cursor: pointer;
}

.ck-swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 3px var(--tz-mod);
}

/* ─── The books: spine and cover, four bindings ──────────────────────── */

.ck-spine {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    box-sizing: border-box;
    background: var(--ck-book);
    color: var(--ck-book-ink);
    border-radius: 4px 4px 2px 2px;
    box-shadow:
        inset 4px 0 0 rgba(255, 255, 255, 0.12),
        inset -5px 0 0 rgba(0, 0, 0, 0.16),
        0 2px 4px rgba(30, 20, 10, 0.25);
    overflow: hidden;
}

.ck-spine__icon {
    display: flex;
    flex: none;
}

.ck-spine__title {
    flex: 1;
    min-height: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    aspect-ratio: 3 / 4;
    width: 100%;
    padding: 24px 18px;
    box-sizing: border-box;
    background: var(--ck-book);
    color: var(--ck-book-ink);
    border-radius: 6px 14px 14px 6px;
    box-shadow:
        inset 10px 0 0 rgba(0, 0, 0, 0.14),
        inset 12px 0 0 rgba(255, 255, 255, 0.08),
        0 18px 36px -14px rgba(30, 20, 10, 0.5);
    text-align: center;
    overflow: hidden;
}

.ck-cover__title {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.ck-cover__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 2px solid currentColor;
}

/* Leather: darker edges and two gold bands, gold lettering. */
.ck-binding--leather {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.22)),
        var(--ck-book);
}

.ck-spine.ck-binding--leather::before,
.ck-spine.ck-binding--leather::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    border-top: 1px solid #E8C26A;
    border-bottom: 1px solid #E8C26A;
}

.ck-spine.ck-binding--leather::before { top: 8px; }
.ck-spine.ck-binding--leather::after { bottom: 8px; }

.ck-binding--leather .ck-spine__title,
.ck-binding--leather .ck-cover__title,
.ck-binding--leather .ck-cover__icon,
.ck-binding--leather .ck-spine__icon {
    color: #F2D58A;
}

.ck-cover.ck-binding--leather::after {
    content: "";
    position: absolute;
    inset: 14px 14px 14px 22px;
    border: 1.5px solid rgba(242, 213, 138, 0.7);
    border-radius: 6px;
    pointer-events: none;
}

/* Modern: flat colour, a light band at the foot. */
.ck-spine.ck-binding--modern {
    box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.12), 0 2px 4px rgba(30, 20, 10, 0.2);
}

.ck-spine.ck-binding--modern::after,
.ck-cover.ck-binding--modern::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 16%;
    background: rgba(255, 255, 255, 0.85);
}

.ck-binding--modern .ck-spine__title,
.ck-binding--modern .ck-cover__title {
    font-family: var(--tz-font);
    letter-spacing: 0.04em;
}

.ck-binding--modern .ck-spine__title {
    margin-bottom: 18%;
}

/* Gingham for the kids' books: a checked cloth with a white label for the title. */
.ck-binding--checkered {
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.28) 0 6px, transparent 6px 12px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 6px, transparent 6px 12px),
        var(--ck-book);
}

.ck-binding--checkered .ck-spine__title,
.ck-binding--checkered .ck-cover__title {
    padding: 6px 4px;
    border-radius: 6px;
    background: #FFFDF8;
    color: #3A2A20;
}

.ck-binding--checkered .ck-cover__title {
    padding: 10px 14px;
    border-radius: 12px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.ck-binding--checkered .ck-cover__icon {
    background: #FFFDF8;
    color: #3A2A20;
    border-color: #FFFDF8;
}

/* Linen: a woven texture and a cream label. */
.ck-binding--linen {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 4px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 4px),
        var(--ck-book);
}

.ck-cover.ck-binding--linen .ck-cover__title {
    padding: 12px 16px;
    background: #F5ECD9;
    color: #3A2A20;
    border: 1px solid rgba(58, 42, 32, 0.25);
    border-radius: 4px;
}

.ck-spine.ck-binding--linen .ck-spine__title {
    padding: 8px 3px;
    background: #F5ECD9;
    color: #3A2A20;
    border-radius: 3px;
}

/* ─── The library ─────────────────────────────────────────────────────── */

.ck-offer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: var(--tz-space-4);
    padding: 18px 20px;
    border-radius: var(--tz-radius-lg);
    background: var(--tz-mod-wash);
    border: 1px solid var(--tz-mod-wash-strong);
    animation: ck-rise 420ms ease-out both;
}

.ck-offer h2 {
    margin: 0 0 4px;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 1.3rem;
}

.ck-offer p {
    margin: 0;
    color: var(--tz-ink-2);
}

.ck-offer__books {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 56px;
}

.ck-offer__books span {
    width: 12px;
    border-radius: 2px;
    box-shadow: inset -2px 0 0 rgba(0, 0, 0, 0.15);
}

.ck-offer__books span:nth-child(1) { height: 52px; }
.ck-offer__books span:nth-child(2) { height: 44px; }
.ck-offer__books span:nth-child(3) { height: 56px; }
.ck-offer__books span:nth-child(4) { height: 48px; }
.ck-offer__books span:nth-child(5) { height: 54px; }
.ck-offer__books span:nth-child(6) { height: 46px; }

.ck-offer__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ck-library {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 22px 22px;
    border-radius: 26px;
    background:
        radial-gradient(ellipse at 10% 0%, rgba(255, 214, 140, 0.4), transparent 55%),
        linear-gradient(180deg, var(--ck-wall), var(--ck-wall-2));
    overflow: hidden;
    isolation: isolate;
}

/* The season's light falls across the shelves from the top left: fresh in spring, warm and long in summer, golden
   and low in autumn, pale in winter. It drifts slowly, as light does. */
.ck-library__beam {
    position: absolute;
    top: -60px;
    left: -80px;
    width: 120%;
    height: 160%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(118deg, rgba(255, 236, 170, 0.34), rgba(255, 236, 170, 0) 52%);
    mix-blend-mode: soft-light;
    animation: ck-beam 14s ease-in-out infinite alternate;
}

.ck-library--summer .ck-library__beam { background: linear-gradient(118deg, rgba(255, 232, 150, 0.48), rgba(255, 232, 150, 0) 56%); }
.ck-library--autumn .ck-library__beam { background: linear-gradient(124deg, rgba(255, 176, 92, 0.44), rgba(255, 176, 92, 0) 50%); }
.ck-library--winter .ck-library__beam { background: linear-gradient(118deg, rgba(220, 235, 255, 0.4), rgba(220, 235, 255, 0) 46%); }

html.tz-dark .ck-library__beam {
    opacity: 0.5;
}

/* The bookcase: a dark wooden back, a frame, and shelves the books stand on. */
.ck-case {
    position: relative;
    padding: 20px 18px 0;
    border-radius: 16px 16px 10px 10px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent 60px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 46px),
        #5A3A25;
    box-shadow:
        inset 0 0 0 10px var(--ck-wood),
        inset 0 0 0 12px var(--ck-wood-dark),
        0 24px 36px -22px rgba(40, 24, 12, 0.6);
}

/* Rows of standing books on shelves. Each shelf is the row's own background — a lit top surface the books stand on,
   then its front edge — so it lines up with however many rows the books wrap into. */
.ck-shelf {
    --ck-row: 244px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 22px;
    min-height: var(--ck-row);
    padding: 0 18px;
    background: repeating-linear-gradient(
        180deg,
        transparent 0 calc(var(--ck-row) - 22px),
        var(--ck-wood-light) calc(var(--ck-row) - 22px) calc(var(--ck-row) - 13px),
        var(--ck-wood) calc(var(--ck-row) - 13px) calc(var(--ck-row) - 3px),
        var(--ck-wood-dark) calc(var(--ck-row) - 3px) var(--ck-row));
}

.ck-slot {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: var(--ck-row);
    padding-bottom: 16px;
    box-sizing: border-box;
}

.ck-book-btn {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 206px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    touch-action: manipulation;
    perspective: 900px;
    perspective-origin: 50% 30%;
}

.ck-book-btn:focus-visible {
    outline: 3px solid #FFE3A8;
    outline-offset: 6px;
    border-radius: 8px;
}

/* ─── A standing book in 3D: cover out, turned a little, spine and page edges showing ─── */

.ck-book3d {
    --ck-w: 142px;
    position: relative;
    display: block;
    width: var(--ck-w);
    height: var(--ck-h, 100%);
    transform-style: preserve-3d;
}

/* Its shadow on the shelf, outside the turned body so it stays flat. */
.ck-book3d::before {
    content: "";
    position: absolute;
    left: -4%;
    right: -10%;
    bottom: -7px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 45% 50%, rgba(0, 0, 0, 0.45), transparent 70%);
}

.ck-book3d__body {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateY(34deg);
    transition: transform 420ms cubic-bezier(.2, .8, .2, 1);
}

.ck-book-btn:hover .ck-book3d__body,
.ck-book-btn:focus-visible .ck-book3d__body {
    transform: rotateY(12deg) translateY(-8px);
}

.ck-book3d__face {
    position: absolute;
    top: 0;
    height: 100%;
    box-sizing: border-box;
}

.ck-book3d__front {
    left: 0;
    width: 100%;
    transform: translateZ(calc(var(--ck-d, 22px) / 2));
}

.ck-book3d__back {
    left: 0;
    width: 100%;
    border-radius: 8px 3px 3px 8px;
    background: var(--ck-book);
    filter: brightness(0.62);
    transform: rotateY(180deg) translateZ(calc(var(--ck-d, 22px) / 2));
}

.ck-book3d__spine {
    left: calc(50% - var(--ck-d, 22px) / 2);
    width: var(--ck-d, 22px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 3px;
    background: var(--ck-book);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    filter: brightness(0.8);
    transform: rotateY(-90deg) translateZ(calc(var(--ck-w) / 2));
}

.ck-book3d__spinetitle {
    max-height: 86%;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--ck-book-ink);
    font: 700 0.62rem/1 "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ck-book3d__spine.ck-binding--leather .ck-book3d__spinetitle { color: #F2D58A; }

.ck-book3d__pages {
    top: 2%;
    height: 96%;
    left: calc(50% - (var(--ck-d, 22px) - 4px) / 2);
    width: calc(var(--ck-d, 22px) - 4px);
    background: repeating-linear-gradient(90deg, #FBF6EC 0 2px, #E6DAC4 2px 3px);
    transform: rotateY(90deg) translateZ(calc(var(--ck-w) / 2 - 3px));
}

.ck-cover.ck-cover--standing {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    gap: 10px;
    padding: 16px 12px;
    border-radius: 3px 9px 9px 3px;
    box-shadow:
        inset 7px 0 0 rgba(0, 0, 0, 0.16),
        inset 8px 0 0 rgba(255, 255, 255, 0.08),
        inset -1px 0 0 rgba(255, 255, 255, 0.12);
}

.ck-cover--standing .ck-cover__icon {
    width: 52px;
    height: 52px;
}

.ck-cover--standing .ck-cover__title {
    font-size: 0.98rem;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ck-cover--standing.ck-binding--leather::after {
    inset: 9px 9px 9px 15px;
}

.ck-cover--standing.ck-binding--checkered .ck-cover__title,
.ck-cover--standing.ck-binding--linen .ck-cover__title {
    padding: 7px 9px;
}

/* Taken off the shelf before it opens: it turns to face you and comes forward. */
.ck-book-btn--out .ck-book3d__body {
    animation: ck-take 320ms cubic-bezier(.3, .7, .3, 1) forwards;
}

/* Just put on the shelf: it drops in and settles. */
.ck-book-btn--placed {
    animation: ck-place 620ms cubic-bezier(.34, 1.4, .64, 1) both;
}

.ck-book-btn[data-sort-dragging] {
    opacity: 0.25;
}

.ck-new-book {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 176px;
    border: 2px dashed rgba(255, 236, 210, 0.5);
    border-radius: 6px 10px 10px 6px;
    background: rgba(255, 255, 255, 0.05);
    color: #FFECD2;
    cursor: pointer;
}

.ck-new-book:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ck-new-book:disabled {
    opacity: 0.35;
}

.ck-library__empty,
.ck-library__hint {
    margin: 0;
    color: var(--tz-ink-3);
    font-size: 0.88rem;
}

.ck-library > .ck-link {
    align-self: flex-start;
}

@keyframes ck-take {
    0% { transform: rotateY(34deg); }
    55% { transform: rotateY(0) translateZ(60px) translateY(-14px); opacity: 1; }
    100% { transform: rotateY(-6deg) translateZ(120px) translateY(-20px); opacity: 0; }
}

@media (max-width: 640px) {
    .ck-library {
        padding: 14px;
    }

    .ck-shelf {
        --ck-row: 196px;
        gap: 0 14px;
        padding: 0 8px;
    }

    .ck-book-btn {
        height: 160px;
    }

    .ck-book3d {
        --ck-w: 108px;
    }

    .ck-cover.ck-cover--standing {
        padding: 10px 8px;
        gap: 6px;
    }

    .ck-cover--standing .ck-cover__icon {
        width: 40px;
        height: 40px;
    }

    .ck-cover--standing .ck-cover__title {
        font-size: 0.8rem;
    }

    .ck-new-book {
        width: 86px;
        height: 136px;
    }
}

.ck-cat {
    display: flex;
    align-items: flex-end;
    height: var(--ck-row);
    padding-bottom: 16px;
    box-sizing: border-box;
}

.ck-cat svg {
    width: 96px;
    height: auto;
}

.ck-cat__tail {
    transform-origin: 60px 38px;
    animation: ck-tail 4s ease-in-out infinite;
}

.ck-cat__z {
    animation: ck-z 3s ease-in-out infinite;
}

.ck-drag-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    pointer-events: none;
    opacity: 0.92;
    filter: drop-shadow(0 16px 20px rgba(30, 20, 10, 0.35));
}

.ck-drop-mark {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1999;
    pointer-events: none;
    background: var(--tz-mod, #C24E26);
    border-radius: 3px;
}

.ck-drop-mark--x { width: 4px; }
.ck-drop-mark--y { height: 4px; }

html.ck-dragging,
html.ck-dragging * {
    cursor: grabbing !important;
    user-select: none;
}

/* ─── An open book: cover and table of contents ──────────────────────── */

.ck-opened {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    perspective: 1400px;
}

.ck-opened__cover {
    position: sticky;
    top: 16px;
}

.ck-cover--opening {
    transform-origin: 0 50%;
    animation: ck-open 560ms cubic-bezier(.2, .7, .2, 1) both;
}

.ck-toc {
    padding: 26px 28px;
    border-radius: 6px 22px 22px 6px;
    background:
        linear-gradient(90deg, rgba(120, 80, 40, 0.10), transparent 24px),
        var(--tz-surface-1);
    border: 1px solid var(--tz-line);
    box-shadow: 0 18px 36px -24px rgba(30, 20, 10, 0.45);
    animation: ck-page-in 520ms 120ms ease-out both;
}

.ck-toc__find {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.ck-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--tz-line-strong);
    border-radius: 12px;
    background: var(--tz-surface-1);
    color: var(--tz-ink-3);
}

.ck-search input {
    flex: 1;
    min-width: 0;
    height: 42px;
    border: 0;
    background: transparent;
    color: var(--tz-ink-1);
    font: 500 1rem var(--tz-font);
    outline: none;
}

.ck-search:focus-within {
    outline: 2px solid var(--tz-mod);
}

.ck-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ck-toc__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 4px;
    border-bottom: 1px dashed var(--tz-line);
    border-radius: 8px;
    animation: ck-rise 320ms ease-out both;
}

.ck-toc__row:nth-child(2) { animation-delay: 30ms; }
.ck-toc__row:nth-child(3) { animation-delay: 60ms; }
.ck-toc__row:nth-child(4) { animation-delay: 90ms; }
.ck-toc__row:nth-child(n+5) { animation-delay: 120ms; }

.ck-toc__row[data-sort-id] {
    cursor: grab;
}

.ck-toc__row[data-sort-dragging] {
    opacity: 0.3;
}

.ck-toc__row:focus-visible {
    outline: 2px solid var(--tz-mod);
}

.ck-toc__grip {
    color: var(--tz-ink-3);
    align-self: center;
    display: flex;
}

.ck-toc__link {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--tz-ink-1);
    text-decoration: none;
}

.ck-toc__link:hover .ck-toc__title {
    color: var(--tz-mod-strong);
}

.ck-toc__title {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 1.12rem;
    font-weight: 600;
}

.ck-toc__tags {
    color: var(--tz-ink-3);
    font-size: 0.8rem;
}

.ck-toc__dots {
    flex: 1;
    min-width: 20px;
    border-bottom: 2px dotted var(--tz-line-strong);
    transform: translateY(-4px);
}

.ck-toc__page {
    font-family: "Iowan Old Style", Georgia, serif;
    font-variant-numeric: oldstyle-nums;
    color: var(--tz-ink-3);
}

.ck-toc__empty,
.ck-toc__none {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 0;
    color: var(--tz-ink-3);
    text-align: center;
}

/* ─── A recipe ────────────────────────────────────────────────────────── */

.ck-recipe {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1080px;
}

.ck-recipe__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: start;
}

.ck-recipe__heading {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ck-recipe__intro {
    margin: 0;
    color: var(--tz-ink-2);
    font-size: 1.05rem;
    max-width: 62ch;
}

.ck-recipe__source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tz-ink-3);
    font-size: 0.88rem;
}

.ck-recipe__photo {
    width: min(320px, 38vw);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: var(--tz-shadow-2);
    transform: rotate(1.2deg);
}

.ck-recipe__bar {
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--tz-radius-lg);
    background: var(--tz-surface-1);
    border: 1px solid var(--tz-line);
    margin: 0;
}

.ck-servings {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 600;
}

.ck-servings input {
    width: 84px;
    height: 44px;
    border: 1px solid var(--tz-line-strong);
    border-radius: 12px;
    background: var(--tz-surface-1);
    color: var(--tz-ink-1);
    text-align: center;
    font: 700 1.2rem var(--tz-font-numeric);
}

.ck-large {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--tz-surface-2);
    color: var(--tz-ink-2);
}

.ck-recipe__body {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.4fr);
    gap: 28px;
    align-items: start;
}

.ck-ingredients,
.ck-steps {
    padding: 20px 22px;
    border-radius: var(--tz-radius-lg);
    background: var(--tz-surface-1);
    border: 1px solid var(--tz-line);
}

.ck-ingredients h2,
.ck-steps h2,
.ck-editor__card h2 {
    margin: 0 0 10px;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 1.35rem;
}

.ck-ingredients ul,
.ck-steps ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ck-ingredients__part {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 6px;
    font-size: 0.95rem;
    font-weight: 750;
    color: var(--tz-mod-strong);
}

.ck-ingredient {
    display: grid;
    grid-template-columns: 6.5em minmax(0, 1fr) auto;
    gap: 10px;
    align-items: baseline;
    padding: 7px 0;
    border-bottom: 1px solid var(--tz-line);
}

.ck-ingredient__amount {
    font-family: var(--tz-font-numeric);
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    text-align: right;
    transition: color 300ms;
}

.ck-ingredient__note {
    color: var(--tz-ink-3);
}

.ck-behaviour {
    padding: 1px 8px;
    border-radius: var(--tz-radius-pill);
    background: var(--tz-surface-2);
    color: var(--tz-ink-3);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: lowercase;
}

.ck-behaviour--small {
    font-size: 0.68rem;
}

.ck-steps ol {
    counter-reset: ck-step;
}

.ck-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0 12px 44px;
    border-bottom: 1px solid var(--tz-line);
    line-height: 1.6;
    counter-increment: ck-step;
}

.ck-step::before {
    content: counter(ck-step);
    position: absolute;
    left: 0;
    top: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tz-mod-wash-strong);
    color: var(--tz-mod-strong);
    display: grid;
    place-items: center;
    font-weight: 800;
}

.ck-step__time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: var(--tz-radius-pill);
    background: var(--tz-surface-2);
    color: var(--tz-ink-2);
    font-weight: 700;
    font-size: 0.85rem;
}

.ck-recipe__manage {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-top: 6px;
}

.ck-send__bulk {
    display: flex;
    gap: 14px;
    margin: 10px 0 6px;
}

.ck-send {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ck-send__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 8px 2px;
    border-bottom: 1px solid var(--tz-line);
    cursor: pointer;
}

.ck-send__row input {
    width: 20px;
    height: 20px;
    accent-color: var(--tz-mod);
}

.ck-send__amount {
    color: var(--tz-ink-2);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ck-move__mode {
    margin-top: 14px;
}

/* ─── The editor ──────────────────────────────────────────────────────── */

.ck-editor {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 920px;
}

.ck-editor__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 22px;
    border-radius: var(--tz-radius-lg);
    background: var(--tz-surface-1);
    border: 1px solid var(--tz-line);
}

.ck-editor__row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 12px;
}

.ck-editor__photo {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ck-file {
    position: relative;
    overflow: hidden;
}

.ck-file input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.ck-in {
    min-width: 0;
    height: 42px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid var(--tz-line-strong);
    border-radius: 10px;
    background: var(--tz-surface-1);
    color: var(--tz-ink-1);
    font: 500 0.95rem var(--tz-font);
}

textarea.ck-in {
    height: auto;
    padding: 10px;
    resize: vertical;
    line-height: 1.5;
    width: 100%;
}

.ck-in:focus-visible {
    outline: 2px solid var(--tz-mod);
    outline-offset: 0;
}

.ck-part {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    background: var(--tz-surface-2);
}

.ck-part__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 240px) auto;
    gap: 8px;
}

.ck-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ck-line {
    display: grid;
    grid-template-columns: 90px 90px minmax(0, 1fr) auto auto;
    gap: 6px;
    align-items: center;
}

.ck-line__more {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-left: 3px solid var(--tz-mod);
    background: var(--tz-surface-1);
    border-radius: 0 10px 10px 0;
}

.ck-line__more .ck-hint {
    flex-basis: 100%;
}

.ck-scalefield {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--tz-ink-2);
}

.ck-scalefield .ck-in {
    width: 96px;
}

.ck-editsteps {
    margin: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ck-editstep {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ck-editstep__meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.ck-editstep__minutes {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tz-ink-2);
}

.ck-editstep__minutes .ck-in {
    width: 80px;
}

.ck-editor__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    max-width: 920px;
    margin-top: 18px;
    position: sticky;
    bottom: calc(12px + var(--tz-tabbar-height, 0px));
}

/* ─── Cooking ─────────────────────────────────────────────────────────── */

.ck-kitchen {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: calc(100dvh - 160px);
    max-width: 980px;
    margin: 0 auto;
}

.ck-kitchen__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ck-kitchen__what {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ck-kitchen__what strong {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 1.3rem;
}

.ck-kitchen__what span {
    color: var(--tz-ink-3);
}









.ck-kitchen__ingredients {
    padding: 16px 20px;
    border-radius: var(--tz-radius-lg);
    background: var(--tz-surface-1);
    border: 1px solid var(--tz-line);
    columns: 2 260px;
    animation: ck-rise 240ms ease-out both;
}

.ck-kitchen__ingredients h3 {
    margin: 6px 0;
    color: var(--tz-mod-strong);
    font-size: 0.95rem;
}

.ck-kitchen__ingredients ul {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.ck-kitchen__ingredients label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 1.1rem;
    cursor: pointer;
    break-inside: avoid;
}

.ck-kitchen__ingredients input {
    width: 22px;
    height: 22px;
    accent-color: var(--tz-mod);
}

.ck-ready {
    color: var(--tz-ink-3);
    text-decoration: line-through;
}

.ck-kitchen__progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ck-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 2px solid var(--tz-line-strong);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.ck-dot--done {
    background: var(--tz-mod-wash-strong);
    border-color: var(--tz-mod);
}

.ck-dot--now {
    width: 28px;
    border-radius: 999px;
    background: var(--tz-mod);
    border-color: var(--tz-mod);
}

.ck-kitchen__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: clamp(22px, 5vw, 48px);
    border-radius: 28px;
    background: var(--tz-surface-1);
    border: 1px solid var(--tz-line);
    box-shadow: var(--tz-shadow-2);
    animation: ck-turn 360ms cubic-bezier(.2, .8, .2, 1) both;
}

.ck-kitchen__step--done .ck-kitchen__text {
    color: var(--tz-ink-3);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.ck-kitchen__count {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
    color: var(--tz-ink-3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
}

.ck-kitchen__part {
    padding: 2px 10px;
    border-radius: var(--tz-radius-pill);
    background: var(--tz-mod-wash);
    color: var(--tz-mod-strong);
    text-transform: none;
    letter-spacing: 0;
}

.ck-kitchen__text {
    margin: 0;
    font-size: clamp(1.45rem, 3.6vw, 2.25rem);
    line-height: 1.45;
    font-weight: 560;
}

.ck-kitchen__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.ck-timer-start {
    min-height: 60px;
    padding: 0 22px;
    font-size: 1.15rem;
    border-radius: 18px;
}

.ck-timer-start [data-ck-timer-left] {
    font-variant-numeric: tabular-nums;
    min-width: 4ch;
}

.ck-timer-start--running {
    background: var(--tz-mod);
    color: #FFFFFF;
}

.ck-kitchen__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.ck-kitchen__enjoy {
    font-family: "Iowan Old Style", Georgia, serif;
    font-size: 1.3rem;
    color: var(--tz-mod-strong);
    animation: ck-rise 400ms ease-out both;
}

.ck-kitchen__none {
    color: var(--tz-ink-3);
}

/* ─── Movement ────────────────────────────────────────────────────────── */

@keyframes ck-place {
    0% { transform: translateY(-60px) rotate(-8deg); opacity: 0; }
    70% { transform: translateY(4px) rotate(1deg); opacity: 1; }
    100% { transform: none; }
}

@keyframes ck-open {
    from { transform: rotateY(-70deg); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
    to { transform: rotateY(0); }
}

@keyframes ck-page-in {
    from { opacity: 0; transform: translateX(-14px); }
    to { opacity: 1; transform: none; }
}

@keyframes ck-turn {
    from { opacity: 0; transform: perspective(1200px) rotateY(-14deg) translateX(18px); transform-origin: 0 50%; }
    to { opacity: 1; transform: none; }
}

@keyframes ck-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes ck-beam {
    from { transform: translateX(-12px) rotate(-1deg); opacity: 0.85; }
    to { transform: translateX(14px) rotate(1deg); opacity: 1; }
}

@keyframes ck-tail {
    0%, 70%, 100% { transform: rotate(0); }
    80% { transform: rotate(-14deg); }
    90% { transform: rotate(6deg); }
}

@keyframes ck-z {
    0%, 100% { opacity: 0; transform: translate(0, 4px); }
    50% { opacity: 1; transform: translate(4px, -4px); }
}

@keyframes ck-ring {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

/* ─── Narrow screens ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .ck-recipe__body,
    .ck-opened {
        grid-template-columns: minmax(0, 1fr);
    }

    .ck-opened__cover {
        position: static;
        max-width: 180px;
    }

    .ck-recipe__head {
        grid-template-columns: minmax(0, 1fr);
    }

    .ck-recipe__photo {
        width: 100%;
        transform: none;
    }
}

@media (max-width: 640px) {
    .ck-offer {
        grid-template-columns: minmax(0, 1fr);
    }

    .ck-offer__books {
        display: none;
    }

    .ck-toc {
        padding: 18px;
    }

    .ck-editor__row,
    .ck-part__head {
        grid-template-columns: minmax(0, 1fr);
    }

    .ck-line {
        grid-template-columns: 70px 70px minmax(0, 1fr) auto auto;
    }

    .ck-ingredient {
        grid-template-columns: 5.5em minmax(0, 1fr) auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ck-book-btn,
    .ck-book-btn--out,
    .ck-book-btn--placed,
    .ck-cover--opening,
    .ck-toc,
    .ck-toc__row,
    .ck-offer,
    .ck-kitchen__step,
    .ck-kitchen__ingredients,
    .ck-library__beam,
    .ck-book3d__body,
    .ck-book-btn--out .ck-book3d__body,
    .ck-cat__tail,
    .ck-cat__z,
    .ck-dock__timer--ringing {
        animation: none;
        transition: none;
    }
}

/* ─── Importing (paid) ────────────────────────────────────────────────── */

.ck-import {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 920px;
}

.ck-import__tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ck-import__row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.ck-import__row .ck-in {
    flex: 1;
    min-width: 220px;
}

.ck-import__busy {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tz-ink-2);
}

.ck-proposals {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.ck-proposal {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--tz-line-strong);
    border-radius: 16px;
    background: var(--tz-surface-1);
    color: var(--tz-ink-1);
    text-align: left;
    font: inherit;
    cursor: pointer;
    animation: ck-rise 300ms ease-out both;
}

.ck-proposal:hover {
    border-color: var(--tz-mod);
    box-shadow: var(--tz-shadow-2);
}

.ck-proposal strong {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 1.1rem;
}

.ck-proposal span,
.ck-proposal em {
    color: var(--tz-ink-3);
    font-size: 0.85rem;
}

.ck-proposed {
    max-width: 920px;
    margin-bottom: 16px;
    padding: 14px 18px;
    border-radius: var(--tz-radius-lg);
    background: var(--tz-mod-wash);
    border: 1px solid var(--tz-mod-wash-strong);
}

.ck-proposed h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.ck-proposed ul {
    margin: 0 0 6px;
    padding-left: 18px;
}

.ck-import__keep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-weight: 600;
}

.ck-import__keep input {
    width: 20px;
    height: 20px;
    accent-color: var(--tz-mod);
}

/* ─── Labels and the inspiration page ─────────────────────────────────── */

.ck-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ck-labelgroup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.ck-labelgroup__name {
    min-width: 5.5em;
    color: var(--tz-ink-3);
    font-size: 0.8rem;
    font-weight: 700;
}

.ck-label {
    padding: 3px 11px;
    border: 1px solid transparent;
    border-radius: var(--tz-radius-pill);
    font: 650 0.8rem var(--tz-font);
    line-height: 1.5;
}

.ck-label--diet { background: rgba(79, 122, 58, 0.14); color: #3C6A2C; }
.ck-label--course { background: var(--tz-mod-wash); color: var(--tz-mod-strong); }
.ck-label--kind { background: rgba(45, 95, 139, 0.12); color: #2D5F8B; }

html.tz-dark .ck-label--diet { color: #9FD48A; }
html.tz-dark .ck-label--kind { color: #8EC0EA; }

.ck-label--toggle {
    background: var(--tz-surface-1);
    border-color: var(--tz-line-strong);
    color: var(--tz-ink-2);
    cursor: pointer;
}

.ck-label--toggle[aria-pressed="true"].ck-label--diet { background: #4F7A3A; border-color: #4F7A3A; color: #FFFFFF; }
.ck-label--toggle[aria-pressed="true"].ck-label--course { background: var(--tz-mod); border-color: var(--tz-mod); color: #FFFFFF; }
.ck-label--toggle[aria-pressed="true"].ck-label--kind { background: #2D5F8B; border-color: #2D5F8B; color: #FFFFFF; }

.ck-labelfilter .ck-labelgroup {
    display: inline-flex;
    margin-right: 8px;
}

.ck-editor__labels .ck-form__label {
    margin-bottom: 6px;
}

.ck-inspire__find {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 920px;
    margin-bottom: var(--tz-space-5);
}

.ck-inspire__section {
    margin-bottom: var(--tz-space-6);
}

.ck-inspire__section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 1.4rem;
}

.ck-inspire__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 12px;
    margin-top: 10px;
}

.ck-inspire__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 16px;
    border-radius: 16px;
    background: var(--tz-surface-1);
    border: 1px solid var(--tz-line);
    border-top: 5px solid var(--ck-book, var(--tz-mod));
    color: var(--tz-ink-1);
    text-decoration: none;
    animation: ck-rise 280ms ease-out both;
}

a.ck-inspire__card:hover {
    box-shadow: var(--tz-shadow-2);
}

.ck-inspire__card strong {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 1.1rem;
}

.ck-inspire__card .ck-btn {
    margin-top: auto;
}

.ck-inspire__book {
    color: var(--tz-ink-3);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ck-inspire__add {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.ck-inspire__add .ck-in {
    flex: 1;
}

.ck-inspire__more {
    margin-top: 14px;
}

.ck-inspire__section > .ck-tags {
    margin: 10px 0 4px;
}

/* ─── The dock: the recipe on the go and its timers, on every page (js/cook/timers.js) ─── */

.ck-dock {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: min(360px, calc(100vw - 32px));
    padding: 10px;
    border-radius: 18px;
    background: var(--tz-surface-1, #FFFDF9);
    color: var(--tz-ink-1, #1E1B26);
    border: 1px solid var(--tz-line, #E6E1D8);
    border-top: 4px solid #C24E26;
    box-shadow: 0 18px 40px -16px rgba(30, 27, 38, 0.45);
    font-family: var(--tz-font, system-ui, sans-serif);
    animation: ck-dock-in 280ms cubic-bezier(.2, .8, .2, 1) both;
}

.ck-dock[hidden] {
    display: none;
}

.ck-dock__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ck-dock__what {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ck-dock__pan {
    font-size: 1.1rem;
}

.ck-dock__label {
    color: var(--tz-ink-3, #6E6878);
    font-size: 0.82rem;
    font-weight: 600;
}

.ck-dock__what strong {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ck-dock__back {
    padding: 6px 12px;
    border-radius: 999px;
    background: #C24E26;
    color: #FFFFFF;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ck-dock__end,
.ck-dock__btn {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    background: var(--tz-surface-2, #F3EFE8);
    color: inherit;
    font: 700 0.9rem var(--tz-font, system-ui, sans-serif);
    cursor: pointer;
}

.ck-dock__timer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 12px;
    border-radius: 999px;
    background: rgba(194, 78, 38, 0.08);
}

.ck-dock__timerlabel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
}

.ck-dock__time {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 1.1rem;
    color: #9A3B1B;
}

/* A timer that ran out: red, shaking, until it's switched off. */
.ck-dock__timer--ringing {
    background: #C24E26;
    color: #FFFFFF;
    animation: ck-ring 0.6s ease-in-out infinite;
}

.ck-dock__timer--ringing .ck-dock__time {
    color: #FFFFFF;
}

.ck-dock__btn--off {
    background: #FFFFFF;
    color: #9A3B1B;
    padding: 0 14px;
}

html.tz-dark .ck-dock__time { color: #F5A887; }

@keyframes ck-dock-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

/* Above the tab bar on a phone. */
@media (max-width: 900px) {
    .ck-dock {
        right: 8px;
        left: 8px;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        width: auto;
    }
}

.ck-inspire__title {
    color: inherit;
    text-decoration: none;
}

.ck-inspire__title:hover strong {
    color: var(--tz-mod-strong);
}

.ck-inspire__go {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ck-label--ingredient { background: rgba(140, 47, 27, 0.12); color: #8C2F1B; }
html.tz-dark .ck-label--ingredient { color: #F2A48C; }
.ck-label--toggle[aria-pressed="true"].ck-label--ingredient { background: #8C2F1B; border-color: #8C2F1B; color: #FFFFFF; }

/* Concepts the voice assistant looked up, waiting above the shelf to be looked at. */
.ck-drafts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--tz-space-4);
    padding: 10px 14px;
    border-radius: var(--tz-radius-lg);
    background: var(--tz-mod-wash);
    border: 1px dashed var(--tz-mod-wash-strong);
}

.ck-drafts__title {
    margin-right: 4px;
    font-weight: 600;
    font-size: 0.9rem;
}

.ck-drafts .ck-chip {
    text-decoration: none;
}

/* The inspiration page on a large screen: wider than the usual page, with more, smaller cards and small labels — the
   labels say something about a recipe, they aren't buttons. */
.tz-main:has(.ck-inspire__find) {
    max-width: min(1640px, 100%);
}

.ck-inspire__find {
    max-width: none;
}

.ck-inspire__find .ck-search {
    max-width: 760px;
}

.ck-inspire__find .ck-label--toggle {
    padding: 2px 10px;
    font-size: 0.76rem;
}

.ck-inspire__find .ck-labelgroup {
    gap: 5px;
    margin-bottom: 4px;
}

.ck-inspire__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr));
    gap: 10px;
}

.ck-inspire__card {
    gap: 6px;
    padding: 10px 12px 12px;
    border-radius: 12px;
    border-top-width: 4px;
}

.ck-inspire__card strong {
    font-size: 1rem;
    line-height: 1.25;
}

.ck-inspire__book {
    font-size: 0.68rem;
}

.ck-inspire__card .ck-labels {
    gap: 3px;
}

.ck-inspire__card .ck-label {
    padding: 0 7px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.6;
}

.ck-inspire__card .ck-hint {
    font-size: 0.78rem;
}

.ck-inspire__card .ck-btn--small {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 0.8rem;
}

/* The community's own labels, in a colour of their own; and the admin's page for the categories. */
.ck-label--own { background: rgba(107, 58, 110, 0.12); color: #6B3A6E; }
html.tz-dark .ck-label--own { color: #D7A6DA; }
.ck-label--toggle[aria-pressed="true"].ck-label--own { background: #6B3A6E; border-color: #6B3A6E; color: #FFFFFF; }

.ck-inspire__filteractions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.ck-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 14px;
    align-items: start;
}

.ck-cats__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
    border-radius: 16px;
    background: var(--tz-surface-1);
    border: 1px solid var(--tz-line);
}

.ck-cats__group--new {
    border-style: dashed;
    background: transparent;
}

.ck-cats__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ck-cats__groupname {
    flex: 1;
    font-weight: 700;
}

.ck-cats__labels {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ck-cats__labels li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.ck-cats__labels li.is-hidden .ck-in {
    opacity: 0.5;
    text-decoration: line-through;
}

.ck-cats__show input {
    width: 18px;
    height: 18px;
    accent-color: var(--tz-mod);
}

.ck-cats__own {
    font-size: 0.68rem;
}

.ck-cats__add {
    display: flex;
    gap: 8px;
}

.ck-cats__add .ck-in {
    flex: 1;
    min-width: 0;
}

.ck-cats__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: var(--tz-space-5) 0 8px;
}