/* ==========================================================================
   Derech forums: "recipe cards on the family fridge".
   Uses design-system tokens (--dk-*) and classes; module classes are .dcf-*.
   Fridge-door classes (.dk-note, .dk-tape, .dk-polaroid, .dk-coin, .dk-hand, .dk-wiggle-hover)
   come from the theme; the zero-specificity fallbacks below only apply until it ships them.
   ========================================================================== */

.dcf-app { --dcf-color: var(--dk-clay); --dcf-ok: #2E7D4F; --dcf-hand: 'Amatic SC', 'Fredoka', var(--dk-font-display, system-ui), cursive; position: relative; }
.dcf { display: flex; flex-direction: column; gap: var(--dk-gap, 1rem); }
.dcf a { -webkit-tap-highlight-color: transparent; }

/* ---------- fridge fallbacks (theme wins: zero specificity) ---------- */
:where(.dcf-app) :where(.dk-tape) { position: absolute; top: -10px; inset-inline-start: 50%; width: 84px; height: 22px; transform: translateX(50%) rotate(-3deg); background: repeating-linear-gradient(45deg, rgba(227, 168, 53, .55) 0 8px, rgba(255, 246, 218, .65) 8px 16px); box-shadow: 0 1px 2px rgba(74, 52, 30, .15); border-radius: 2px; pointer-events: none; z-index: 2; }
:where(.dcf-app) :where(.dk-note) { position: relative; background: #FFF3B8; border-radius: 4px 4px 14px 4px; box-shadow: 0 10px 18px -12px rgba(74, 52, 30, .45), 0 1px 0 rgba(74, 52, 30, .06); padding: 1rem 1.1rem; }
:where(.dcf-app) :where(.dk-coin) { display: inline-flex; align-items: center; gap: .25em; padding: .15em .6em; border-radius: 999px; background: radial-gradient(circle at 30% 30%, #FFE79A, var(--dk-mustard, #E3A835)); color: #4A3200; font-weight: 800; font-size: .8rem; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), 0 2px 6px -2px rgba(160, 110, 0, .5); white-space: nowrap; }
:where(.dcf-app) :where(.dk-hand) { font-family: var(--dcf-hand); font-weight: 700; letter-spacing: .01em; }
:where(.dcf-app) :where(.dk-wiggle-hover) { transition: transform .25s var(--dk-ease-bounce, cubic-bezier(.34, 1.56, .64, 1)); }
/* Standalone tape strips: the theme's .dk-tape decorates a whole card through ::before, so here the strip
   is pinned absolutely (it never takes a flex slot or covers text) and the theme pseudo strip is dropped. */
.dcf-app span.dk-tape { position: absolute; z-index: 2; top: -10px; inset-inline-start: 50%; width: 84px; height: 22px; margin: 0; transform: translateX(50%) rotate(-3deg); background: var(--dk-tape, repeating-linear-gradient(45deg, rgba(227, 168, 53, .55) 0 8px, rgba(255, 246, 218, .65) 8px 16px)); border-radius: 3px; box-shadow: 0 1px 2px rgba(74, 52, 30, .15); opacity: .95; pointer-events: none; }
.dcf-app span.dk-tape::before { content: none; }

/* ---------- heroes ---------- */
.dcf-hero { position: relative; display: flex; align-items: center; gap: 1rem; padding: clamp(1rem, 3vw, 1.6rem); border-radius: var(--dk-r-lg, 26px); background: var(--dk-paper, #FFFDF8); background: color-mix(in srgb, var(--dcf-color) 10%, var(--dk-paper, #FFFDF8)); border: 1px solid color-mix(in srgb, var(--dcf-color) 22%, transparent); overflow: hidden; }
.dcf-hero::after { content: ''; position: absolute; inset-inline-end: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: color-mix(in srgb, var(--dcf-color) 14%, transparent); pointer-events: none; }
.dcf-hero__text { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }
.dcf-hero__text h1 { margin: .1rem 0 .35rem; }
.dcf-hero__desc { margin: 0 0 .35rem; color: var(--dk-ink-2, #4A403A); max-width: 60ch; }
.dcf-hero__emoji { flex: none; width: 72px; height: 72px; display: grid; place-items: center; font-size: 38px; border-radius: 24px; background: var(--dk-paper, #fff); box-shadow: var(--dk-shadow-sm, 0 4px 12px -6px rgba(0, 0, 0, .25)); transform: rotate(-6deg); position: relative; z-index: 1; }
.dcf-hero__actions { display: flex; flex-wrap: wrap; gap: .5rem; position: relative; z-index: 1; }
.dcf-hero__art { flex: none; width: 160px; position: relative; z-index: 1; }
.dcf-hero__art img { width: 100%; height: auto; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; box-shadow: var(--dk-shadow, 0 10px 30px -14px rgba(0, 0, 0, .35)); transform: rotate(3deg); }
.dcf-hero--index .dk-eyebrow { font-size: 1.35rem; color: var(--dk-clay-600, #A9431C); margin: 0; }
.dcf-hero__search { margin-top: .8rem; max-width: 460px; }
.dcf-hero--forum { flex-wrap: wrap; }
@media (max-width: 640px) {
	.dcf-hero { flex-wrap: wrap; }
	.dcf-hero__art { display: none; }
	.dcf-hero__emoji { width: 56px; height: 56px; font-size: 30px; border-radius: 18px; }
	.dcf-hero__actions { width: 100%; }
	.dcf-hero__actions .dk-btn--primary { flex: 1; }
}

/* ---------- crumbs ---------- */
.dcf-crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.dcf-crumbs li + li::before { content: '‹'; margin-inline-end: .35rem; color: var(--dk-muted, #7C6F66); }
.dcf-crumbs [aria-current] { color: var(--dk-ink-2, #4A403A); font-weight: 600; }

/* ---------- helper (sticky note) ---------- */
.dcf-helper { display: flex; align-items: center; gap: .9rem; transform: rotate(-.6deg); background: #E8F3DE; }
.dcf-helper__icon { font-size: 34px; flex: none; animation: dcf-bob 3.2s ease-in-out infinite; }
.dcf-helper__text { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.dcf-helper__text strong { font-size: 1.02rem; }
.dcf-helper .dk-muted { color: #5A4E45; }
@media (max-width: 520px) { .dcf-helper { flex-wrap: wrap; } .dcf-helper .dk-btn { width: 100%; } }

/* ---------- sections ---------- */
.dcf-section { display: flex; flex-direction: column; gap: .7rem; }
.dcf-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.dcf-section__head h2 { margin: 0; }
.dcf-section__head p { margin: 0; }

/* ---------- waiting questions (sticky notes strip) ---------- */
.dcf-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); gap: 1rem; overflow-x: auto; padding: 14px 4px 18px; margin-inline: -4px; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; }
.dcf-strip:focus-visible { box-shadow: var(--dk-ring); border-radius: var(--dk-r, 18px); }
.dcf-wait { scroll-snap-align: start; display: flex; flex-direction: column; gap: .55rem; min-height: 170px; transform: rotate(-1.2deg); }
.dcf-wait:nth-child(3n + 2) { background: #FFE2D3; transform: rotate(1deg); }
.dcf-wait:nth-child(3n + 3) { background: #DDF0F4; transform: rotate(-.4deg); }
.dcf-wait:hover, .dcf-wait:focus-within { transform: rotate(0) translateY(-3px); }
.dcf-wait::before { content: ''; position: absolute; top: -7px; inset-inline-start: 50%; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--dcf-color) 20%); box-shadow: 0 2px 3px rgba(0, 0, 0, .25); transform: translateX(50%); }
.dcf-wait__top { display: flex; align-items: center; justify-content: space-between; }
.dcf-wait__emoji { font-size: 22px; }
.dcf-wait__title { margin: 0; font-size: 1rem; line-height: 1.35; flex: 1; }
.dcf-wait__meta { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.dcf-wait__cta { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--dk-clay-600, #A9431C); font-size: .9rem; }
.dcf-wait__cta .dk-icon { width: 16px; height: 16px; }

/* ---------- forum cards (recipe cards pinned to the fridge) ---------- */
.dcf-forums { display: grid; grid-template-columns: 1fr; gap: 1.2rem 1rem; padding-top: 10px; }
@media (min-width: 680px) { .dcf-forums { grid-template-columns: 1fr 1fr; } }
.dcf-forum { position: relative; display: flex; align-items: flex-start; gap: .9rem; padding: 1.15rem 1rem 1rem; text-decoration: none; color: inherit; border-top: 6px solid var(--dcf-color); background-color: var(--dk-paper, #FFFDF8); background-image: repeating-linear-gradient(to bottom, transparent 0 27px, color-mix(in srgb, var(--dcf-color) 12%, transparent) 27px 28px); background-position: 0 44px; transform: rotate(-.5deg); }
.dcf-forum:nth-child(even) { transform: rotate(.6deg); }
.dcf-forum:hover, .dcf-forum:focus-visible { transform: rotate(0) translateY(-3px); box-shadow: var(--dk-shadow, 0 14px 28px -16px rgba(74, 52, 30, .5)); color: inherit; }
.dcf-forum:nth-child(3n) span.dcf-forum__tape { transform: translateX(50%) rotate(4deg); }
.dcf-forum:nth-child(even) span.dcf-forum__tape { background: var(--dk-tape-sage, repeating-linear-gradient(45deg, rgba(167, 188, 156, .6) 0 7px, rgba(226, 238, 218, .65) 7px 14px)); }
.dcf-forum__emoji { flex: none; width: 58px; height: 58px; display: grid; place-items: center; font-size: 30px; border-radius: 50%; background: color-mix(in srgb, var(--dcf-color) 16%, #fff); border: 2px dashed color-mix(in srgb, var(--dcf-color) 55%, transparent); transform: rotate(-8deg); transition: transform .3s var(--dk-ease-bounce, ease); }
.dcf-forum:hover .dcf-forum__emoji { transform: rotate(6deg) scale(1.08); }
.dcf-forum__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.dcf-forum__title { font-family: var(--dk-font-display, inherit); font-weight: 800; font-size: 1.08rem; color: var(--dk-teal, #1F4D4A); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.dcf-forum__desc { color: var(--dk-ink-2, #4A403A); font-size: .92rem; line-height: 1.5; }
.dcf-forum__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; color: #6B5F55; margin-top: .2rem; }
.dcf-forum__stats { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.dcf-forum__last { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.dcf-forum__last .dk-icon { width: 14px; height: 14px; opacity: .8; }
.dcf-forum__meta .dk-avatar-stack { margin-inline-end: .3rem; }
.dcf-forum__meta .dk-avatar { width: 24px; height: 24px; border: 2px solid var(--dk-paper, #fff); }
.dcf-forum__lock .dk-icon { width: 16px; height: 16px; color: var(--dk-muted, #7C6F66); }
.dcf-forum__chev { flex: none; align-self: center; color: var(--dk-muted, #7C6F66); width: 20px; height: 20px; }

/* ---------- split + widgets ---------- */
.dcf-split { align-items: start; }
.dcf-main { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.dcf-aside { display: flex; flex-direction: column; gap: 1rem; }
.dcf-widget { position: relative; padding: 1.1rem 1rem 1rem; }
.dcf-widget h2 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; }
.dcf-widget--hot h2 { font-size: 1.6rem; }
.dcf-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.dcf-mini li { display: flex; gap: .55rem; align-items: flex-start; }
.dcf-mini li > a, .dcf-mini__body > a { font-weight: 600; color: var(--dk-teal, #1F4D4A); text-decoration: none; line-height: 1.35; }
.dcf-mini li > a:hover, .dcf-mini__body > a:hover { text-decoration: underline; }
.dcf-mini li { flex-direction: column; gap: .1rem; }
.dcf-mini--hot li { flex-direction: row; }
.dcf-mini__rank { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--dk-clay-600, #A9431C); color: #fff; font-weight: 800; font-size: .85rem; transform: rotate(-8deg); }
.dcf-mini--hot li:nth-child(2) .dcf-mini__rank { background: var(--dk-mustard, #E3A835); color: #4A3200; }
.dcf-mini--hot li:nth-child(3) .dcf-mini__rank { background: var(--dk-moss, #5F7F4E); }
.dcf-mini__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.dcf-side { display: flex; flex-direction: column; gap: .8rem; }
.dcf-side-wait { border-top: 1px dashed var(--dk-line-2, #DCCBB2); padding-top: .6rem; }
.dcf-side-wait p { margin: 0 0 .35rem; }
.dcf-main--list { gap: 1rem; }
.dcf--forum .dcf-split, .dcf--topic .dcf-split { gap: 1.5rem; }
.dcf--topic .dcf-main { gap: 1rem; }
.dcf-about { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; border-top: 6px solid var(--dcf-color); }
.dcf-about h2 { margin: 0; }
.dcf-about h2 a { color: var(--dk-teal, #1F4D4A); text-decoration: none; }
.dcf-about h2 a:hover { text-decoration: underline; }
.dcf-about__emoji { width: 52px; height: 52px; display: grid; place-items: center; font-size: 28px; border-radius: 50%; background: color-mix(in srgb, var(--dcf-color) 16%, #fff); border: 2px dashed color-mix(in srgb, var(--dcf-color) 55%, transparent); transform: rotate(-8deg); }
.dcf-about__desc { margin: 0; color: var(--dk-ink-2, #4A403A); font-size: .92rem; line-height: 1.5; }
.dcf-about p.dk-small { margin: 0; }
.dcf-others { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.dcf-others a { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .25rem .4rem; border-radius: 14px; color: var(--dk-ink, #2A2420); text-decoration: none; font-weight: 600; }
.dcf-others a:hover { background: color-mix(in srgb, var(--dcf-color) 12%, #fff); color: var(--dk-teal, #1F4D4A); }
.dcf-others__emoji { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; background: color-mix(in srgb, var(--dcf-color) 16%, #fff); }
.dcf-others__name { min-width: 0; line-height: 1.3; }

/* ---------- toolbar ---------- */
.dcf-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; justify-content: space-between; }
.dcf-sorts { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.dcf-sorts::-webkit-scrollbar { display: none; }
.dcf-sorts .dk-segment__item { flex: none; display: inline-flex; align-items: center; padding: .4em 1em; border-radius: var(--dk-r-pill, 999px); font-weight: 600; font-size: var(--dk-fs-sm, .9rem); color: var(--dk-ink-2, #4A403A); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.dcf-sorts .dk-segment__item:hover { color: var(--dk-teal, #1F4D4A); }
.dcf-sorts .dk-segment__item.is-active { background: var(--dk-teal, #1F4D4A); color: #fff; box-shadow: 0 3px 8px -4px rgba(31, 77, 74, .6); }
.dcf-toolbar__search { flex: 1 1 220px; max-width: 340px; }
.dcf-sorts .dk-segment__item { min-height: 38px; justify-content: center; }
@media (max-width: 640px) {
	.dcf-toolbar__search { max-width: none; }
	.dcf-sorts { width: 100%; }
	.dcf-sorts .dk-segment__item { flex: 1 0 auto; padding-inline: .6em; }
}

/* ---------- topic rows ---------- */
.dcf-list { display: flex; flex-direction: column; gap: .6rem; }
.dcf-list[aria-busy="true"] { opacity: .5; transition: opacity .2s; }
.dcf-row { position: relative; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; border-inline-start: 4px solid transparent; }
.dcf-row:hover { transform: translateX(-2px); }
.dcf-row.is-waiting { border-inline-start-color: var(--dk-mustard, #E3A835); }
.dcf-row.is-pinned { border-inline-start-color: var(--dcf-color); }
.dcf-row__avatar .dk-avatar { width: 44px; height: 44px; }
.dcf-row__main { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.dcf-row__title { margin: 0; font-size: 1.02rem; line-height: 1.35; font-weight: 700; }
.dcf-row__link { color: var(--dk-teal, #1F4D4A); text-decoration: none; }
.dcf-row__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.dcf-row__link:focus-visible { box-shadow: none; outline: none; }
.dcf-row:focus-within { box-shadow: var(--dk-ring); }
.dcf-row__excerpt { margin: 0; color: var(--dk-ink-2, #4A403A); font-size: .9rem; line-height: 1.5; }
.dcf-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.dcf-row__forum { position: relative; z-index: 1; }
.dcf-row__flags { display: flex; flex-wrap: wrap; gap: .3rem; }
.dcf-row__stats { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; color: var(--dk-muted, #7C6F66); }
.dcf-row__last { display: flex; align-items: center; gap: .3rem; }
.dcf-row__last .dk-avatar { width: 24px; height: 24px; }
.dcf-stat { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; font-size: .85rem; color: var(--dk-teal-600, #2B6460); }
.dcf-stat .dk-icon { width: 16px; height: 16px; }
.dcf-stat--love { color: var(--dk-clay, #C8572B); }
@media (max-width: 560px) {
	.dcf-row { grid-template-columns: auto minmax(0, 1fr); }
	.dcf-row__stats { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: .7rem; }
	.dcf-row__avatar .dk-avatar { width: 36px; height: 36px; }
}
.dcf-chip { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; padding: .05em .55em; border-radius: 999px; font-size: .78rem; font-weight: 700; text-decoration: none; color: var(--dk-ink-2, #4A403A); background: color-mix(in srgb, var(--dcf-color) 14%, #fff); position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcf-chip:hover { color: var(--dk-ink, #2A2420); }

/* ---------- flags & stamps ---------- */
.dcf-flag { display: inline-flex; align-items: center; gap: .25rem; padding: .1em .55em; border-radius: 999px; font-size: .74rem; font-weight: 800; background: var(--dk-cream-2, #F5EAD6); color: var(--dk-ink-2, #4A403A); line-height: 1.6; }
.dcf-flag .dk-icon { width: 13px; height: 13px; }
.dcf-flag--pin { background: var(--dk-mustard-100, #FBEBC6); color: #7A5200; }
.dcf-flag--q { background: var(--dk-clay-50, #FDF0E9); color: var(--dk-clay-600, #A9431C); }
.dcf-flag--lock { background: #EEE8E1; color: #5E544C; }
.dcf-flag--faq { background: var(--dk-teal-50, #EDF5F2); color: var(--dk-teal-600, #2B6460); }
.dcf-stamp--mini { background: transparent; color: var(--dcf-ok); border: 2px solid var(--dcf-ok); border-radius: 6px; transform: rotate(-5deg); font-family: var(--dcf-hand); font-size: 1rem; letter-spacing: .02em; padding: 0 .45em; line-height: 1.25; }
.dcf-stamp { position: absolute; top: 14px; inset-inline-end: 16px; z-index: 3; padding: .05em .55em; border: 3px double var(--dcf-ok); border-radius: 10px; color: var(--dcf-ok); font-family: var(--dcf-hand); font-size: 2rem; font-weight: 700; line-height: 1.1; transform: rotate(-14deg); opacity: .88; background: rgba(255, 255, 255, .35); pointer-events: none; animation: dcf-stamp .45s var(--dk-ease-bounce, ease) both; }
.dcf-stamp--reply { position: static; display: inline-block; font-size: 1.35rem; margin-inline-start: auto; transform: rotate(-10deg); animation: none; }
.dcf-reply.is-stamped .dcf-stamp--reply { animation: dcf-stamp .5s var(--dk-ease-bounce, ease) both; }

/* ---------- original post ---------- */
.dcf-op { position: relative; padding: clamp(1rem, 3vw, 1.5rem); display: flex; flex-direction: column; gap: .7rem; }
.dcf-op span.dcf-op__tape { inset-inline-start: 28%; }
.dcf-op .dk-post__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.dcf-op__title { margin: 0; font-family: var(--dk-font-display, inherit); font-size: clamp(1.35rem, 4vw, 1.9rem); line-height: 1.25; color: var(--dk-teal, #1F4D4A); }
.dcf-op__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; border-top: 1px dashed var(--dk-line, #E9DDCB); padding-top: .6rem; }
.dcf-name { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.dcf-name .dk-user__name { font-weight: 700; color: var(--dk-ink, #2A2420); text-decoration: none; }
.dcf-name a.dk-user__name:hover { color: var(--dk-teal, #1F4D4A); text-decoration: underline; }
.dcf-level { font-size: .95rem; }
.dcf-ai-tag { background: #FFF6DA; color: #7A5200; }
.dcf-body { overflow-wrap: anywhere; }
.dcf-body p { margin: 0 0 .7em; }
.dcf-body p:last-child { margin-bottom: 0; }
.dcf-body ul, .dcf-body ol { margin: .3em 0 .8em; padding-inline-start: 1.3em; }
.dcf-body h3, .dcf-body h4 { margin: .8em 0 .3em; font-size: 1.05rem; color: var(--dk-teal, #1F4D4A); }
.dcf-body--teaser { -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); }
.dcf-follow.is-active { background: var(--dk-teal, #1F4D4A); color: #fff; }
.dcf-media { margin-top: .2rem; }
.dcf-media__item { padding: 0; border: 0; background: var(--dk-cream-2, #F5EAD6); cursor: zoom-in; display: block; }
.dcf-media__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcf-media[data-count="1"] .dcf-media__item img { aspect-ratio: auto; max-height: 520px; object-fit: contain; }
.dcf-media[data-count="2"], .dcf-media[data-count="4"] { grid-template-columns: 1fr 1fr; }
.dcf-media[data-count="3"] { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.dcf-media[data-count="3"] > :first-child { grid-row: span 2; }

/* ---------- menu ---------- */
.dcf-menu { position: relative; flex: none; }
.dcf-menu__list { position: absolute; top: calc(100% + 4px); inset-inline-end: 0; z-index: 60; min-width: 200px; }
.dcf-menu__list .is-danger { color: var(--dk-danger, #B3261E); }

/* ---------- reactions ---------- */
.dcf-react { position: relative; flex-wrap: wrap; }
.dcf-react__emoji { display: inline-block; transition: transform .2s var(--dk-ease-bounce, ease); }
.dk-react-btn.is-active .dcf-react__emoji { animation: dcf-pop .35s var(--dk-ease-bounce, ease); }
.dcf-react__more { padding-inline: .55em; }
.dcf-react__more .dk-icon { width: 18px; height: 18px; }
.dcf-react__picker { position: absolute; bottom: calc(100% + 6px); inset-inline-start: 0; z-index: 70; display: flex; gap: .1rem; padding: .3rem; background: var(--dk-paper, #fff); border: 1px solid var(--dk-line, #E9DDCB); border-radius: 999px; box-shadow: var(--dk-shadow-lg, 0 16px 40px -18px rgba(0, 0, 0, .4)); }
.dcf-react__picker button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; font-size: 24px; cursor: pointer; transition: transform .15s var(--dk-ease-bounce, ease); }
.dcf-react__picker button:hover, .dcf-react__picker button:focus-visible { transform: translateY(-5px) scale(1.25); }
.dcf-react__picker button.is-active { background: var(--dk-cream-2, #F5EAD6); }
.dcf-react__summary { display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; font-size: .85rem; color: var(--dk-muted, #7C6F66); }
.dcf-react__top { letter-spacing: -.15em; }

/* ---------- solution ---------- */
.dcf-solution { position: relative; padding: 1.1rem 1.1rem 1rem; background: #F1FAF3; border: 2px solid #BFE3CB; display: flex; flex-direction: column; gap: .5rem; overflow: visible; }
.dcf-solution__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-inline-end: 6.5rem; }
.dcf-solution__head h2 { margin: 0; }
.dcf-solution__check { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--dcf-ok); color: #fff; font-weight: 900; }
.dcf-nudge { margin: 0; }

/* ---------- replies ---------- */
.dcf-replies { display: flex; flex-direction: column; gap: .7rem; }
.dcf-replies__title { margin: .4rem 0 0; }
.dcf-replies__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.dcf-reply { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .7rem; padding: .9rem; background: var(--dk-paper, #FFFDF8); border: 1px solid var(--dk-line, #E9DDCB); border-radius: var(--dk-r, 18px); scroll-margin-top: calc(var(--dk-header-h, 64px) + 20px); transition: background .3s, box-shadow .3s, border-color .3s; }
.dcf-reply.is-op { background: color-mix(in srgb, var(--dk-sky, #DDEDF1) 45%, var(--dk-paper, #fff)); }
.dcf-reply.is-solution { border: 2px solid #9ED3B0; background: #F4FBF6; box-shadow: 0 10px 24px -18px rgba(46, 125, 79, .7); }
.dcf-reply.is-highlight { animation: dcf-flash 2.2s ease; }
.dcf-reply.is-deleted { display: block; padding: .6rem .9rem; background: transparent; border-style: dashed; }
.dcf-reply__deleted { display: flex; align-items: center; gap: .4rem; }
.dcf-reply__deleted .dk-icon { width: 15px; height: 15px; }
.dcf-reply__main { min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.dcf-reply__head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; }
.dcf-reply__head .dcf-menu { margin-inline-start: auto; }
.dcf-solution-badge { display: inline-flex; align-items: center; gap: .25rem; font-weight: 800; font-size: .8rem; color: var(--dcf-ok); }
.dcf-solution-badge .dk-icon { width: 16px; height: 16px; }
.dcf-reply__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.dcf-solve-btn { border: 1.5px dashed #9ED3B0; color: var(--dcf-ok); }
.dcf-solve-btn.is-active { background: var(--dcf-ok); color: #fff; border-style: solid; }
.dcf-quote { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .75rem; border-inline-start: 4px solid var(--dcf-color); background: var(--dk-cream, #FBF4E8); border-radius: 6px 14px 14px 6px; text-decoration: none; color: var(--dk-ink-2, #4A403A); font-size: .88rem; }
.dcf-quote:hover { background: var(--dk-cream-2, #F5EAD6); color: var(--dk-ink, #2A2420); }
.dcf-quote__who { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--dk-teal-600, #2B6460); }
.dcf-quote__who .dk-icon { width: 14px; height: 14px; }
.dcf-replies__empty .dk-empty { padding-block: 1rem; }
.dcf-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.dcf-pager__item { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--dk-line, #E9DDCB); background: var(--dk-paper, #fff); text-decoration: none; font-weight: 700; color: var(--dk-teal, #1F4D4A); }
.dcf-pager__item.is-active { background: var(--dk-teal, #1F4D4A); color: #fff; border-color: transparent; }

/* ---------- composer ---------- */
.dcf-composer { display: flex; flex-direction: column; gap: .55rem; padding: .85rem; scroll-margin-bottom: 120px; }
.dcf-composer__row { display: flex; align-items: flex-start; gap: .6rem; }
.dcf-composer__row .dk-avatar { flex: none; margin-top: .25rem; }
.dcf-composer textarea { flex: 1; min-height: 52px; resize: none; }
.dcf-composer__quote { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; background: var(--dk-cream, #FBF4E8); border-inline-start: 4px solid var(--dcf-color); border-radius: 8px; font-size: .86rem; }
.dcf-composer__quote-who { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; flex: none; }
.dcf-composer__quote-who .dk-icon { width: 14px; height: 14px; }
.dcf-composer__quote-text { flex: 1; min-width: 0; color: var(--dk-ink-2, #4A403A); }
.dcf-composer .dk-composer__tools { display: flex; align-items: center; gap: .4rem; }
.dcf-coin { font-size: .78rem; }
.dcf-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; }
.dcf-thumb { position: relative; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--dk-cream-2, #F5EAD6); transform: rotate(-2deg); box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .4); }
.dcf-thumb:nth-child(even) { transform: rotate(2deg); }
.dcf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dcf-thumb button { position: absolute; top: 4px; inset-inline-end: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(42, 36, 32, .7); color: #fff; display: grid; place-items: center; cursor: pointer; }
.dcf-thumb button .dk-icon { width: 14px; height: 14px; }
.dcf-locked-note { display: flex; align-items: center; gap: .5rem; }

/* ---------- new topic sheet ---------- */
.dcf-compose .dk-modal__dialog { width: min(640px, 100%); }
.dcf-compose__img { align-self: flex-start; cursor: pointer; }
.dcf-qtoggle { display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; border-radius: var(--dk-r, 18px); border: 2px dashed var(--dk-line-2, #DCCBB2); background: var(--dk-paper, #fff); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.dcf-qtoggle:focus-within { box-shadow: var(--dk-ring); }
.dcf-qtoggle.is-on { border-style: solid; border-color: var(--dk-clay, #C8572B); background: var(--dk-clay-50, #FDF0E9); transform: rotate(-.4deg); }
.dcf-qtoggle__emoji { font-size: 30px; flex: none; transition: transform .3s var(--dk-ease-bounce, ease); }
.dcf-qtoggle.is-on .dcf-qtoggle__emoji { transform: rotate(-12deg) scale(1.15); }
.dcf-qtoggle__text { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.dcf-qtoggle .dk-switch > span { width: 46px; height: 28px; border-radius: 99px; background: var(--dk-line-2, #DCCBB2); position: relative; display: block; transition: background .2s; }
.dcf-qtoggle .dk-switch > span::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .25s var(--dk-ease-bounce, ease); }
.dcf-qtoggle.is-on .dk-switch > span { background: var(--dk-clay, #C8572B); }
.dcf-qtoggle.is-on .dk-switch > span::after { transform: translateX(-18px); }
@media (max-width: 719px) {
	.dcf-compose, .dcf-modal { padding: 0; place-items: end center; }
	.dcf-compose .dk-modal__dialog, .dcf-modal .dk-modal__dialog { width: 100%; border-radius: var(--dk-r-xl, 28px) var(--dk-r-xl, 28px) 0 0; max-height: 92dvh; padding-bottom: var(--dk-safe-bottom, 0px); animation: dk-sheet-up .32s var(--dk-ease, ease); }
	.dcf-compose .dk-modal__dialog::before, .dcf-modal .dk-modal__dialog::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 9px; background: var(--dk-line-2, #DCCBB2); margin: .6rem auto 0; }
	.dcf-compose .dk-modal__footer { position: sticky; bottom: 0; background: var(--dk-paper, #fff); }
}
html.dk-no-scroll, html.dk-no-scroll body { overflow: hidden; }

/* ---------- lightbox ---------- */
.dcf-lightbox { background: rgba(20, 16, 14, .92); cursor: zoom-out; }
.dcf-lightbox img { max-width: min(96vw, 1200px); max-height: 88dvh; border-radius: 12px; object-fit: contain; box-shadow: 0 20px 60px -20px #000; }
.dcf-lightbox__close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); inset-inline-end: 12px; background: rgba(255, 255, 255, .15); color: #fff; }

/* ---------- walls, teaser, more, skeletons, FAB ---------- */
.dc-wall { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.2rem; }
.dc-wall__art { flex: none; width: 120px; }
.dc-wall__art img { width: 100%; height: auto; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; transform: rotate(-3deg); }
.dc-wall__body { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.dc-wall__body h3, .dc-wall__body p { margin: 0; }
@media (max-width: 520px) { .dc-wall { flex-direction: column; text-align: center; } .dc-wall .dk-row { justify-content: center; } }
.dcf-teaser-fade { height: 40px; margin-top: -48px; background: linear-gradient(to bottom, transparent, var(--dk-bg, var(--dk-cream, #FBF4E8))); position: relative; z-index: 1; pointer-events: none; }
.dcf-more { display: flex; justify-content: center; }
.dcf-skeletons { display: flex; flex-direction: column; gap: .6rem; }
.dcf-skel-row { height: 92px; }
/* The floating "new topic" button stacks right above the floating Guri (same corner), never on top of it. */
.dcf-fab { --dcf-guri: 64px; position: fixed; z-index: 550; inset-inline-start: calc(14px + (var(--dcf-guri) - 52px) / 2); bottom: calc(var(--dk-bottom-nav-h, 68px) + 20px + var(--dk-safe-bottom, 0px) + var(--dcf-guri) + 18px); width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--dk-paper, #fff); background: var(--dk-clay, #C8572B); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 0 var(--dk-clay-600, #A9431C), 0 14px 26px -12px rgba(169, 67, 28, .8); cursor: pointer; transform: rotate(-6deg); transition: transform .25s var(--dk-ease-bounce, ease); }
@media (min-width: 768px) { .dcf-fab { --dcf-guri: 82px; } }
.dcf-fab:hover, .dcf-fab:focus-visible { transform: rotate(0) scale(1.06); }
.dcf-fab .dk-icon { width: 26px; height: 26px; }
@media (min-width: 900px) { .dcf-fab { display: none; } }

/* ---------- YouTube click-to-load ---------- */
.dc-yt { margin-top: .5rem; border-radius: 14px; overflow: hidden; max-width: 560px; }
.dc-yt iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.dc-yt__card { width: 100%; display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid var(--dk-line, #E9DDCB); border-radius: 14px; background: var(--dk-paper, #fff); cursor: pointer; text-align: start; font: inherit; color: inherit; }
.dc-yt__card:hover { background: var(--dk-cream, #FBF4E8); }
.dc-yt__play { flex: none; width: 46px; height: 32px; border-radius: 10px; background: #D62C1F; color: #fff; display: grid; place-items: center; font-size: 14px; }
.dc-yt__text { display: flex; flex-direction: column; gap: .1rem; }

/* ---------- motion ---------- */
@keyframes dcf-stamp { 0% { opacity: 0; transform: rotate(-14deg) scale(2.2); } 60% { opacity: 1; transform: rotate(-14deg) scale(.92); } 100% { opacity: .88; transform: rotate(-14deg) scale(1); } }
@keyframes dcf-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes dcf-flash { 0%, 100% { box-shadow: none; } 15%, 60% { box-shadow: 0 0 0 4px var(--dk-mustard, #E3A835); } }
@keyframes dcf-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) {
	.dcf-app *, .dcf-app *::before, .dcf-app *::after { animation: none !important; transition: none !important; }
	.dcf-forum, .dcf-wait, .dcf-helper, .dcf-forum__emoji, .dcf-thumb, .dcf-fab { transform: none !important; }
}
@media (forced-colors: active) {
	.dcf-stamp, .dcf-stamp--mini { border-color: CanvasText; color: CanvasText; }
}

/* ---------- free tier counter ---------- */
.dcf-app .dc-free { margin: 0; display: block; align-self: flex-start; padding: .15rem .7rem; border-radius: 999px; background: var(--dk-mustard-100, #FBEBC6); color: #6A4A00; font-weight: 700; line-height: 1.6; }
@media (max-width: 600px) {
	.dcf-app .dc-free { align-self: stretch; text-align: center; padding: .35rem .8rem; border-radius: 14px; line-height: 1.45; }
}
.dcf-app .dc-free.is-out { background: var(--dk-clay-50, #FDF0E9); color: var(--dk-clay-600, #A9431C); }