/* Community portal on aycode.ai, in the look of the rest of the site: the board opens under a taped print of
   swallows on a wire (dusk in dark, dawn in light), votes are stamps, the team's answers are paper slips with
   tape and a stamp, and a thread runs down a dotted pencil line. The markup stays the cloud's
   (apps/cloud/src/communityPages.ts); everything here is CSS. New motion runs at 10 frames a second and
   stands still under "reduce motion". Grain stays the site's, once. */
.cm-page { width: min(100% - 2 * var(--gutter), 920px); margin-inline: auto; padding-bottom: 64px; }
.cm {
  --ink-strong: var(--ink);
  --line-strong: var(--line-2);
  --subtle: var(--faint);
  --good: var(--done);
  --danger: var(--look-ember);
  --num: var(--font-mono);
  --cm-shade: rgb(4 2 10 / 0.6);
  padding: 52px 0 28px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .cm { --cm-shade: rgb(60 40 70 / 0.26); }
}
:root[data-theme="light"] .cm { --cm-shade: rgb(60 40 70 / 0.26); }
.cm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; padding-bottom: 8px; }
.cm-head h1 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 460;
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 80;
  font-size: clamp(2.35rem, 1.35rem + 2.6vw, 3.45rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.cm-head p { margin: 10px 0 0; max-width: 38rem; color: var(--muted); font-size: 1.02rem; line-height: 1.55; text-wrap: pretty; }
.cm-me { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cm-me img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); }
.cm-me .who { color: var(--muted); font-size: 13.5px; }
.cm-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13.5px; color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.cm-link:hover { color: var(--ink-strong); text-decoration-color: var(--look-ember); }

/* ---------- the board's print: swallows on a wire, taped down askew, its foot torn off ---------- */
.cm:has(> .cm-bar) > .cm-head { position: relative; isolation: isolate; }
.cm:has(> .cm-bar) > .cm-head::before {
  content: ""; order: -1; flex: 1 0 100%; aspect-ratio: 3.3 / 1; margin-bottom: 8px;
  /* room for the tape on top, then the paper's margin; the torn foot eats the bottom margin */
  padding: 24px 9px 22px; rotate: -0.6deg;
  background:
    url("/assets/look/klebeband-a.webp") 50% 0 / clamp(96px, 14%, 132px) auto no-repeat,
    url("/assets/community/draht-abend-1200.webp") 50% 18% / cover no-repeat content-box,
    linear-gradient(var(--look-paper) 0 0) 0 16px / 100% calc(100% - 16px) no-repeat;
  background:
    url("/assets/look/klebeband-a.webp") 50% 0 / clamp(96px, 14%, 132px) auto no-repeat,
    image-set(url("/assets/community/draht-abend-1200.webp") 1x, url("/assets/community/draht-abend.webp") 2x) 50% 18% / cover no-repeat content-box,
    linear-gradient(var(--look-paper) 0 0) 0 16px / 100% calc(100% - 16px) no-repeat;
  -webkit-mask: url("/assets/look/riss-unten.png") bottom / 100% 20px no-repeat, linear-gradient(#000 0 0) top / 100% calc(100% - 19px) no-repeat;
  mask: url("/assets/look/riss-unten.png") bottom / 100% 20px no-repeat, linear-gradient(#000 0 0) top / 100% calc(100% - 19px) no-repeat;
  animation: cm-lay 0.5s steps(5) both;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .cm:has(> .cm-bar) > .cm-head::before {
    background-image: url("/assets/look/klebeband-a.webp"), url("/assets/community/draht-morgen-1200.webp"), linear-gradient(var(--look-paper) 0 0);
    background-image: url("/assets/look/klebeband-a.webp"), image-set(url("/assets/community/draht-morgen-1200.webp") 1x, url("/assets/community/draht-morgen.webp") 2x), linear-gradient(var(--look-paper) 0 0);
  }
}
:root[data-theme="light"] .cm:has(> .cm-bar) > .cm-head::before {
  background-image: url("/assets/look/klebeband-a.webp"), url("/assets/community/draht-morgen-1200.webp"), linear-gradient(var(--look-paper) 0 0);
  background-image: url("/assets/look/klebeband-a.webp"), image-set(url("/assets/community/draht-morgen-1200.webp") 1x, url("/assets/community/draht-morgen.webp") 2x), linear-gradient(var(--look-paper) 0 0);
}
/* the mask would cut a shadow off, so the print's shadow is its own soft shape underneath */
.cm:has(> .cm-bar) > .cm-head::after {
  content: ""; position: absolute; z-index: -1; left: 4%; top: 34px; width: 92%; aspect-ratio: 3.6 / 1;
  border-radius: 8px; background: var(--cm-shade); filter: blur(22px); translate: 0 16px; rotate: -0.6deg;
  animation: cm-lay 0.5s steps(5) both;
}
@keyframes cm-lay { from { opacity: 0; translate: 0 -10px; rotate: -2.2deg; } }

/* the board's and a new post's title get the site's pencil line, drawn once the page stands */
.cm:has(> .cm-bar) .cm-head h1, .cm:has(> .cm-form) .cm-head h1 { position: relative; width: fit-content; padding-right: 0.08em; }
.cm:has(> .cm-bar) .cm-head h1::after, .cm:has(> .cm-form) .cm-head h1::after {
  content: ""; position: absolute; left: 4%; right: 3%; bottom: -0.08em; height: 0.24em; background: var(--look-ember);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M5 15C48 7 98 19 142 12s78-6 93 1' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M5 15C48 7 98 19 142 12s78-6 93 1' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  clip-path: inset(-50% 100% -50% 0); animation: cm-ink 1s steps(10) 0.45s forwards;
}
@keyframes cm-ink { to { clip-path: inset(-50% -2% -50% 0); } }

/* ---------- the bars: kinds with a pencil underline, sort and status as small stamps ---------- */
.cm-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 18px 0 0; }
.cm-bar + .cm-bar { padding-top: 12px; }
.cm-bar > .cm-meta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; }
.cm-tabs { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.cm-tabs a {
  display: inline-block; padding: 6px 1px 5px; color: var(--muted); text-decoration: none;
  background: linear-gradient(var(--look-ember), var(--look-ember)) 0 100% / 0 1.5px no-repeat;
  transition: background-size 0.4s steps(4), color 0.2s ease;
}
.cm-tabs a:hover { color: var(--ink-strong); background-size: 100% 1.5px; }
.cm-tabs a[aria-current="page"] { color: var(--ink-strong); background-size: 100% 2px; }
.cm-tabs--small { gap: 6px; font: 600 11px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.cm-tabs--small a { padding: 6px 8px 5px; border: 1px dashed transparent; border-radius: 5px; background: none; transition: border-color 0.2s ease, color 0.2s ease; }
.cm-tabs--small a:hover { border-color: var(--line-2); }
.cm-tabs--small a[aria-current="page"] { border-color: var(--look-ember); color: var(--ink-strong); rotate: -1.5deg; }

/* ---------- posts on the board ---------- */
.cm-list { list-style: none; display: grid; gap: 12px; margin: 22px 0 0; padding: 0; }
.cm-row {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start;
  padding: 18px 20px 18px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
}
.cm-row:hover { border-color: var(--line-2); }
.cm-row--plain { grid-template-columns: auto minmax(0, 1fr); }
/* the whole card opens the post; the vote stays its own button above it */
.cm-row h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cm-row > form, .cm-row > .cm-vote { position: relative; z-index: 1; }
/* rows are laid down one after another as they come near (docs.js marks them; ten frames a second) */
.rises .cm-list > .cm-row { opacity: 0; translate: 0 12px; }
.rises .cm-list > .cm-row.is-in { opacity: 1; translate: none; transition: opacity 0.4s steps(4), translate 0.4s steps(4); }
/* a pinned post is taped to the board (the cloud marks its row cm-row--pinned). The strip stays inside the card's
   top padding so a long title never runs under it; it sticks once the row lies. */
.cm-row--pinned::before {
  content: ""; position: absolute; z-index: 2; top: -12px; right: 22px; width: 70px; aspect-ratio: 560 / 223; rotate: 5deg; opacity: 0.94;
  background: url("/assets/look/klebeband-b.webp") center / 100% 100% no-repeat; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.2));
}
.rises .cm-list > .cm-row--pinned.is-in::before { animation: look-stick 0.4s steps(4) 0.3s backwards; }

/* the vote is a stamp: the arrow hops when you reach for it, and once you have voted it sits stamped askew */
.cm-vote {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 54px; height: 60px; border-radius: 14px;
  border: 1px solid var(--line-strong); background: var(--bg);
  color: var(--ink); font: inherit; cursor: pointer; text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, rotate 0.2s steps(2);
}
.cm-vote:hover { border-color: var(--look-ember); color: var(--ink-strong); }
.cm-vote svg { display: block; transition: translate 0.2s steps(2); }
.cm-vote:hover svg, .cm-vote:focus-visible svg { translate: 0 -3px; }
.cm-vote b { font: 600 15px/1 var(--num); font-variant-numeric: tabular-nums; }
.cm-vote[aria-pressed="true"] {
  border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); rotate: -4deg;
  box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
}
.cm-vote:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* headlines in the serif; a pencil line draws under the one you point at */
.cm-row h2 { margin: 2px 0 8px; font-family: var(--font-serif); font-size: 1.24rem; font-weight: 500; font-variation-settings: "SOFT" 50, "opsz" 48; line-height: 1.25; letter-spacing: -0.015em; text-wrap: pretty; }
.cm-row h2 a {
  color: var(--ink-strong); text-decoration: none; padding-bottom: 2px;
  background: linear-gradient(var(--look-ember), var(--look-ember)) 0 100% / 0 1.5px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 0.4s steps(4), color 0.2s ease;
}
.cm-row h2 a:hover, .cm-row h2 a:focus-visible { color: var(--look-acc-ink); background-size: 100% 1.5px; }
.cm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; color: var(--subtle); font-size: 13px; }
.cm-kind { color: var(--muted); font: 600 10.5px/1.3 var(--num); letter-spacing: 0.08em; text-transform: uppercase; }
/* status as a small pill: planned is pencilled in, in progress breathes, done is green */
.cm-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border: 1px solid var(--line-2); border-radius: 99px;
  color: var(--muted); font: 600 10.5px/1.3 var(--num); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.cm-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.cm-status--planned { border-style: dashed; border-color: color-mix(in srgb, var(--accent-ink) 55%, transparent); color: var(--accent-ink); }
.cm-status--progress { border-color: transparent; background: var(--accent-soft); color: var(--accent-ink); }
.cm-status--progress::before { background: currentColor; animation: look-breathe 1.2s steps(12) infinite alternate; }
.cm-status--done { border-color: color-mix(in srgb, var(--good) 45%, transparent); color: var(--good); }
.cm-status--done::before { background: currentColor; }
.cm-status--declined, .cm-status--duplicate { color: var(--subtle); }
.cm-tag { font: 600 10.5px/1 var(--num); letter-spacing: 0.08em; text-transform: uppercase; color: var(--subtle); }
.cm-tag--new { color: var(--accent-ink); }
/* nothing here yet: a swallow keeps the place */
.cm-empty { margin-top: 18px; padding: 40px 20px 48px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); text-align: center; }
.cm-empty::before {
  content: ""; display: block; width: 64px; aspect-ratio: 251 / 280; margin: 0 auto 12px; background: var(--look-bird);
  -webkit-mask: url("/assets/look/vogel-flug.webp") 0 0 / 800% 100% no-repeat; mask: url("/assets/look/vogel-flug.webp") 0 0 / 800% 100% no-repeat;
  animation: look-drift 4.8s steps(48) infinite alternate;
}
.cm-note { margin: 28px 0 0; color: var(--subtle); font-size: 13px; max-width: 40rem; line-height: 1.5; }
.cm-note + .cm-note { margin-top: 10px; }

/* ---------- a post and its thread ---------- */
.cm-post {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px;
  padding: 26px 22px 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
}
/* pinned to the board with a strip of tape */
.cm-post::before {
  content: ""; position: absolute; top: -15px; left: 50%; width: clamp(92px, 16%, 124px); aspect-ratio: 560 / 169; translate: -50% 0; rotate: -3deg; opacity: 0.94;
  background: url("/assets/look/klebeband-a.webp") center / 100% 100% no-repeat; pointer-events: none;
}
.cm-post h1 {
  margin: 0 0 12px;
  color: var(--ink-strong);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 480;
  font-variation-settings: "SOFT" 70, "WONK" 1, "opsz" 60;
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.cm-text { margin: 18px 0 0; color: var(--ink); font-size: 15.5px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-tools { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; }
/* the thread hangs off a dotted pencil line: a dot for each answer, the line on to the next */
.cm-thread { list-style: none; display: grid; gap: 12px; margin: 22px 0 0; padding: 0 0 0 28px; }
.cm-comment { position: relative; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.cm-comment::after {
  content: ""; position: absolute; left: -24px; top: 19px; bottom: -32px; width: 11px; pointer-events: none;
  background:
    radial-gradient(circle at 50% 5.5px, var(--look-ember) 0 2.5px, transparent 3px) 0 0 / 11px 11px no-repeat,
    repeating-linear-gradient(var(--look-ember) 0 2px, transparent 2px 6px) 50% 15px / 1.5px calc(100% - 15px) no-repeat;
  opacity: 0.8;
}
.cm-comment:last-child::after { background-size: 11px 11px, 0 0; }
.cm-thread > li:not(.cm-comment) { position: relative; }
.cm-thread > li:not(.cm-comment)::before {
  content: ""; position: absolute; left: -24px; top: 4px; width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--look-ember); opacity: 0.8;
}
/* the team's answer is a paper slip: tinted paper, a strip of tape, the word "team" stamped on */
.cm-comment--team {
  --ink: #1c1820; --ink-2: #3d3644; --ink-strong: #1c1820; --muted: #5f5866; --subtle: #675f6d; --line-strong: rgb(40 30 44 / 0.22); --accent-ink: #5b2fc2;
  border: 0; border-radius: 2px; background: color-mix(in srgb, var(--look-paper) 90%, #c9b6ff); color: var(--ink);
  box-shadow: 0 14px 26px -12px var(--cm-shade); rotate: -0.35deg;
}
.cm-comment--team::before {
  content: ""; position: absolute; top: -13px; right: 44px; width: 92px; aspect-ratio: 560 / 223; rotate: 5deg; opacity: 0.92;
  background: url("/assets/look/klebeband-b.webp") center / 100% 100% no-repeat; pointer-events: none;
}
.cm-comment--team header .cm-tag--new {
  padding: 3px 6px 2px; border: 1.5px solid currentColor; border-radius: 4px; rotate: -4deg; color: #5b2fc2; font-weight: 700;
}
.cm-comment header { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 12px; padding: 0; border: 0; color: var(--subtle); font-size: 13px; background: none; }
.cm-comment header strong { color: var(--ink-strong); font-weight: 600; }
.cm-comment .cm-text { margin-top: 8px; }

/* ---------- forms ---------- */
.cm-form { display: grid; gap: 14px; max-width: 680px; }
.cm-thread .cm-form { padding: 0; }
.cm-form label { display: grid; gap: 6px; color: var(--ink-strong); font-size: 14px; font-weight: 600; }
.cm-form small { color: var(--subtle); font-weight: 400; font-size: 12.5px; }
.cm-form input[type=text], .cm-form textarea, .cm-form select {
  width: 100%; padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink-strong);
  font: inherit; font-size: 14.5px; font-weight: 400;
  transition: border-color 0.2s ease;
}
.cm-form input[type=text]:hover, .cm-form textarea:hover, .cm-form select:hover { border-color: color-mix(in srgb, var(--look-ember) 45%, var(--line-strong)); }
/* a text field is ruled like a notepad; the lines scroll with the words */
.cm-form textarea {
  min-height: 140px; resize: vertical; line-height: 1.55;
  background-image: repeating-linear-gradient(transparent 0 calc(1.55em - 1px), var(--line) calc(1.55em - 1px) 1.55em);
  background-position: 0 11px; background-attachment: local;
}
.cm-form input:focus-visible, .cm-form textarea:focus-visible, .cm-form select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cm-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border: 0; margin: 0; padding: 0; }
.cm-kinds legend { padding: 0 0 6px; color: var(--ink-strong); font-size: 14px; font-weight: 600; }
.cm-kinds label { position: relative; display: block; padding: 14px 34px 14px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); cursor: pointer; font-weight: 600; }
.cm-kinds label span { display: block; margin-top: 2px; color: var(--subtle); font-size: 12.5px; font-weight: 400; }
.cm-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.cm-kinds label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
/* the chosen kind gets a pencil tick */
.cm-kinds label:has(input:checked)::after {
  content: ""; position: absolute; top: 13px; right: 12px; width: 16px; height: 14px; background: var(--look-ember);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M2 7.5c1.6 1.1 2.8 2.4 3.9 4.1C7.8 7.4 10.4 4.2 14 1.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M2 7.5c1.6 1.1 2.8 2.4 3.9 4.1C7.8 7.4 10.4 4.2 14 1.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: cm-tick 0.4s steps(4) both;
}
@keyframes cm-tick { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.cm-kinds label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-error { margin: 0; color: var(--danger); font-size: 14px; }
.cm-ok { margin: 14px 0 0; color: var(--good); font-size: 14px; }
.cm-mod { margin: 22px 0 0; padding: 18px 18px 8px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.cm-mod h2 { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--subtle); font-family: var(--font-mono); }
.cm-mod form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 12px 10px 0; }
.cm-mod label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
.cm-help { margin: 0 0 14px; color: var(--subtle); font-size: 13px; max-width: 640px; }
.cm-mod select { padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink-strong); font: inherit; font-size: 13.5px; }
.cm-section { padding: 28px 0 6px; }
.cm-section > h2 { margin: 0 0 8px; font-family: var(--font-serif); font-style: italic; font-weight: 480; font-size: 1.35rem; color: var(--ink-strong); }
.cm-pre { margin: 10px 0 0; padding: 14px 16px; max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font: 12.5px/1.55 var(--num); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.cm details summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.cm .btn--sm { min-height: 0; padding: 7px 12px; font-size: 13.5px; border-radius: 10px; }
/* the plain buttons the site's sheet leaves to the browser: a quiet panel, and a red edge for bans and deletes */
.cm .btn:not(.btn--primary) { background: var(--panel); color: var(--ink-strong); border-color: var(--line-2); }
.cm .btn:not(.btn--primary):hover { border-color: var(--look-ember); }
.cm .btn.btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.cm .btn.btn--danger:hover { border-color: var(--danger); }
@media (max-width: 640px) {
  .cm { padding-top: 36px; }
  .cm:has(> .cm-bar) > .cm-head::before { aspect-ratio: 2.4 / 1; padding: 20px 6px 18px; background-size: 96px auto, cover, 100% calc(100% - 13px); background-position: 50% 0, 50% 18%, 0 13px; }
  .cm:has(> .cm-bar) > .cm-head::after { aspect-ratio: 2.7 / 1; top: 28px; }
  .cm-tabs { gap: 2px 14px; }
  .cm-row, .cm-post { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px 12px; }
  .cm-post { padding-top: 22px; }
  .cm-row--plain { grid-template-columns: auto minmax(0, 1fr); }
  .cm-vote { width: 44px; height: 50px; }
  .cm-thread { padding-left: 20px; }
  .cm-comment::after { left: -19px; }
  .cm-thread > li:not(.cm-comment)::before { left: -19px; }
  .cm-kinds { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-vote, .cm-vote svg, .cm-tabs a, .cm-row h2 a { transition: none; }
  .cm-vote:hover svg, .cm-vote:focus-visible svg { translate: none; }
  .cm:has(> .cm-bar) > .cm-head::before, .cm:has(> .cm-bar) > .cm-head::after, .cm-status--progress::before, .cm-empty::before, .cm-kinds label:has(input:checked)::after, .rises .cm-list > .cm-row--pinned.is-in::before { animation: none; }
  .cm:has(> .cm-bar) .cm-head h1::after, .cm:has(> .cm-form) .cm-head h1::after { animation: none; clip-path: none; }
  .rises .cm-list > .cm-row { opacity: 1; translate: none; transition: none; }
}