/* Sign-in after the customer's second reference: their own pool, blurred,
   filling the viewport, a frosted glass card on the right. The workspace is
   one tall card in mint on a soft colour backdrop.

   Two things the reference does not have to carry, and this does: the
   operator stands at the poolside on a phone — hence 52 px controls and real
   contrast on every piece of text. */

:root {
  /* The same two faces as the sign-in page: everything is Montserrat, and
     the headings are the condensed display face from the headline there. */
  --font: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --ink: #17181c;
  --ink-soft: #4b4f58;
  --muted: #6d7078;
  --hairline: rgba(20, 40, 60, 0.06);
  --accent: #17a184;
  --accent-deep: #0f7f6b;
  --accent-2: #2bc2a3;
  --wash: #f6fbfa;
  /* One corner for every box — the one the buttons wear. Only genuinely
     round things (avatars, dots) keep 50%. */
  --radius: 12px;
}

* { box-sizing: border-box; }

/* Must come first and must win: id and class selectors below set `display`
   on the same elements that carry `hidden`. Forgetting this leaves a dead,
   empty panel on screen — it happened. */
[hidden] { display: none !important; }

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

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

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(2.5vh, env(safe-area-inset-top)) 3vw max(2.5vh, env(safe-area-inset-bottom));
  font: 400 16px/1.5 var(--font);
  color: var(--ink);
  background: #c9d7ea;
  overflow-x: hidden;
}

/* Big soft blurred colour fields, like the mesh behind the reference frame. */
.backdrop { position: fixed; inset: -20%; z-index: -1; filter: blur(60px); }
.backdrop i { position: absolute; border-radius: 50%; }
.backdrop .b1 { width: 60vw; height: 60vw; left: -8vw;   top: -18vw;    background: #7ee8cf; }
.backdrop .b2 { width: 55vw; height: 55vw; left: 30vw;   top: -22vw;    background: #1e8d8a; }
.backdrop .b3 { width: 70vw; height: 70vw; right: -20vw; top: -10vw;    background: #a9cbe6; }
.backdrop .b4 { width: 70vw; height: 60vw; left: -10vw;  bottom: -30vw; background: #b9dbe3; }
.backdrop .b5 { width: 60vw; height: 60vw; right: -12vw; bottom: -28vw; background: #7fa9cf; }

/* ── Sign in: the photo is the page ────────────────────────────────── */

/* `place-items: center` has to go as well, not just `display: grid`:
   Chrome honours `justify-items` in block layout too, and a centred block
   child is sized shrink-to-fit — the photo then stopped short of both edges
   and left two dark bands. */
body[data-view='signin'] {
  display: block; place-items: stretch;
  padding: 0; background: #163a4a;
}
body[data-view='signin'] .backdrop { display: none; }

.signin {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(300px, 460px);
  justify-content: center;
  align-items: center;
  column-gap: clamp(48px, 7vw, 120px);
  padding: 100px clamp(32px, 9vw, 180px) 72px;
  font: 400 17px/1.5 'Montserrat', var(--font);
  color: #fff;
}
.signin > * { min-width: 0; }
/* The photo is only 1920 px wide and would look soft when stretched, so it
   is blurred on purpose — a blurred photo has no resolution. Oversized so the
   blur has no bright fringe at the edges. */
.signin::before {
  content: '';
  position: absolute; inset: -24px; z-index: -2;
  background: url('/pool.jpg') center 45% / cover no-repeat;
  filter: blur(9px) saturate(1.05);
  transform: scale(1.03);
}
/* Darkening like the reference: the ceiling stays light, the water goes deep. */
.signin::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,30,40,.18) 0%, rgba(10,30,40,.45) 55%, rgba(6,22,30,.72) 100%),
    linear-gradient(90deg, rgba(6,22,30,.22) 0%, rgba(6,22,30,0) 50%, rgba(6,22,30,.22) 100%);
}

/* Interface language: small pills in the top right corner. */
.lang {
  position: absolute; top: 26px; right: 30px;
  display: flex; gap: 4px; padding: 4px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}
.lang button {
  width: auto; height: 34px; min-width: 44px; padding: 0 12px;
  border-radius: var(--radius);
  background: transparent; color: rgba(255,255,255,.8);
  font: 600 13px/1 'Montserrat', var(--font);
  letter-spacing: .08em;
}
.lang button:hover { color: #fff; }
.lang button[aria-pressed='true'] { background: #fff; color: #14323d; }
.lang button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.copy { max-width: 520px; }
.logo { display: flex; align-items: center; gap: 16px; margin-bottom: 38px; }
.logo b { font: 700 42px/1 'Montserrat', var(--font); letter-spacing: .04em; }
.logo .mark { width: 72px; height: 72px; background: #fff; }

/* The real mark, one file for every size and every colour. It is drawn in
   one colour, so a mask paints it in whatever the place needs: white on the
   photo, mint on the white tile. An <img> could not do the second. */
.mark {
  display: block; flex: none;
  -webkit-mask: url('/logo.svg') center / contain no-repeat;
  mask: url('/logo.svg') center / contain no-repeat;
}

.signin h1 {
  margin: 0 0 26px;
  font: 400 clamp(76px, 9.5vw, 128px)/0.9 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif-condensed, sans-serif;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: pre-line;
  text-shadow: 0 6px 40px rgba(0,0,0,.25);
}
.tag { margin: 0 0 22px; font-size: clamp(21px, 2.1vw, 27px); font-weight: 500; line-height: 1.25; }
.lead { margin: 0; max-width: 40ch; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.92); }

.glass {
  border-radius: var(--radius);
  padding: 64px 52px;
  background: rgba(150,160,170,.28);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 40px 80px -40px rgba(0,0,0,.6);
}
.glass label { display: block; margin-bottom: 26px; }
.glass label > span { display: block; margin-bottom: 11px; font-size: 19px; font-weight: 500; }
.glass input {
  width: 100%; height: 66px;
  padding: 0 24px;
  border: 0; border-radius: var(--radius);
  background: #fff; color: #1a2a33;
  font: 400 19px 'Montserrat', var(--font);
}
.glass input::placeholder { color: #8b96a0; }
.glass input:focus { outline: 3px solid rgba(43,194,163,.8); outline-offset: 2px; }
#code { font-weight: 700; font-size: 26px; letter-spacing: 0.4em; }

.glass .btn {
  border-radius: var(--radius);
  background: var(--accent);
  font: 500 18px 'Montserrat', var(--font);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.glass .btn:hover:not(:disabled) { background: #159b7f; filter: none; }
.glass .btn.secondary {
  margin-top: 12px;
  background: rgba(255,255,255,.14); color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35);
}
.glass .btn.secondary:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.glass .hint { margin: 22px 0 0; text-align: center; font-size: 15px; color: rgba(255,255,255,.85); }

.sent {
  margin: 0 0 22px; padding: 14px 18px;
  border-radius: var(--radius); background: rgba(255,255,255,.16); color: #fff; font-size: 16px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25);
}
.error { margin: 22px 0 0; color: #ffd2cc; }

.tile {
  width: 76px; height: 76px; border-radius: var(--radius); background: #fff;
  display: grid; place-items: center; flex: none;
  box-shadow: 0 14px 30px -18px rgba(20,40,60,.45), 0 0 0 1px rgba(20,40,60,.04);
  margin-bottom: 42px;
}
.tile .mark { width: 46px; height: 46px; background: var(--accent-deep); }
.tile.small { width: 44px; height: 44px; border-radius: var(--radius); margin: 0; }
.tile.small .mark { width: 30px; height: 30px; }





.btn, button, .actions a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 66px;
  border: 0; border-radius: var(--radius);
  font: 500 17px var(--font); color: #fff;
  letter-spacing: .04em;
  background: var(--accent);
  cursor: pointer; text-decoration: none;
}
/* The sign-in says LOGIN-CODE ANFORDERN; the actions that publish or send
   are the same kind of button and say so the same way. */
#publish, #send, #requestCode, #enter { text-transform: uppercase; }
.btn:hover:not(:disabled), button:hover:not(:disabled) { background: #159b7f; filter: none; }
button:disabled { opacity: .45; cursor: not-allowed; }
.btn.secondary, button.secondary, .actions a {
  margin-top: 12px;
  background: #fff; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(20,40,60,.12);
}
.btn.secondary:hover:not(:disabled), button.secondary:hover:not(:disabled),
.actions a:hover { background: #fff; color: var(--accent-deep); }


/* A line at the foot of the screen with a way back. */
.toast {
  /* Bottom left, not centred: centred it sat on top of the send button. */
  position: fixed; left: 24px; bottom: 24px; max-width: calc(100vw - 48px);
  z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px 12px 18px;
  border-radius: var(--radius);
  background: var(--ink); color: #fff;
  box-shadow: 0 24px 50px -24px rgba(20, 33, 30, .9);
  font-size: 15px;
}
.toast button {
  width: auto; height: 34px; padding: 0 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.16); color: #fff;
  font: 600 14px var(--font);
}
.toast button:hover { background: rgba(255,255,255,.26); }

/* ── The workspace card ─────────────────────────────────────────────── */

/* The conversation and, beside it, what stands on the site. The notices and
   the short manual used to sit inside the thread, where they scrolled away
   and pushed the composer down — they are things to look at while writing,
   not turns in the conversation. */
/* The workspace, as an admin area: a bar across the top, a rail of places on
   the left, and the work itself filling the rest. Which place one is in is
   read in the rail, not guessed from what is on screen. */
.work {
  width: min(100%, 1480px);
  height: calc(100dvh - 5vh);
  display: grid;
  /* The right column is 400 wide for 360 of panel: it scrolls, and a scroll
     container clips what its children paint outside it — including their
     shadows, which ended in a hard vertical edge down both sides. The extra
     20 px on each side is the room those shadows need. */
  grid-template-columns: 250px minmax(0, 1fr) 360px;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 14px 16px;
}


/* ── The rail ─────────────────────────────────────────────────────────── */

.rail {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0; overflow-y: auto;
  padding: 16px 14px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 30px 80px -50px rgba(6, 22, 30, .8);
}
.rail-new {
  width: 100%; height: 44px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, #26b598 0%, var(--accent) 60%, #1a9a90 100%);
  color: #fff; font: 600 15px var(--font);
}
.rail-new:hover { filter: brightness(1.05); }
.rail-label {
  margin: 10px 6px 2px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.rail-items { display: flex; flex-direction: column; gap: 2px; }
.rail-item {
  width: 100%; height: 42px; padding: 0 12px;
  /* The global button rule centres its content; a menu reads down the left
     edge, so this one says otherwise. */
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  border-radius: var(--radius); background: transparent; color: var(--ink-soft);
  font: 500 15px var(--font); text-align: left;
}
.rail-item svg { width: 19px; height: 19px; flex: none; color: var(--muted); }
.rail-item:hover { background: var(--wash); color: var(--ink); }
.rail-item[aria-pressed='true'] { background: #e8f7f2; color: var(--accent-deep); font-weight: 600; }
.rail-item[aria-pressed='true'] svg { color: var(--accent-deep); }



/* The account sits at the bottom of the rail. It used to be pushed there by
   the history above it; with that gone it has to hold the floor itself. */
.rail-user {
  margin-top: auto;
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 8px; border-radius: var(--radius); background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.rail-avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, #fff 0 14%, rgba(255,255,255,.35) 22%, transparent 40%),
    linear-gradient(155deg, #6fe0c2 0%, var(--accent) 45%, #2b7fa8 100%);
}
.rail-who { min-width: 0; }
.rail-who b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.rail-who small {
  display: block; font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The bar spans both columns: it belongs to the workspace, not to the
   conversation — the language and the way out are not things one says to the
   agent. */
/* Frosted like the card on the sign-in. Only the chrome: text one reads for
   minutes at a time belongs on a solid surface. */
.topbar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 30px 70px -50px rgba(6, 22, 30, .8);
}
.topbar .title b { font: 400 26px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 40px 120px -40px rgba(20, 40, 60, 0.45);
}
/* The workspace stands on the same photo as the sign-in, blurred and dark.
   The two screens were built weeks apart and looked it; one background and
   one pair of faces is most of what they needed to belong together. */
body[data-view='work'] { place-items: stretch center; background: #163a4a; }
body[data-view='work'] .backdrop { display: none; }
body[data-view='work']::before {
  content: '';
  position: fixed; inset: -24px; z-index: -2;
  background: url('/pool.jpg') center 45% / cover no-repeat;
  filter: blur(9px) saturate(1.05);
  transform: scale(1.03);
}
body[data-view='work']::after {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,30,40,.35) 0%, rgba(10,30,40,.55) 55%, rgba(6,22,30,.72) 100%);
}

.side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
}
.panel {
  padding: 18px 18px 20px;
  border-radius: var(--radius);
  background: #fff;
  /* No horizontal spread: the column scrolls, and a scroll container clips
     whatever its children paint beyond it. A shadow that only falls downwards
     needs no room at the sides, so the panels sit flush with the bar. */
  box-shadow: 0 26px 50px -34px rgba(20, 40, 60, 0.5);
}
.panel-toggle {
  width: 100%; height: auto; padding: 0 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: transparent; color: var(--ink);
  font: 400 21px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; text-align: left;
}
.panel-toggle:hover { color: var(--accent-deep); }
.panel-toggle .chevron { color: var(--muted); transition: transform .15s; }
.panel-toggle[aria-expanded='false'] { padding-bottom: 0; }
.panel-toggle[aria-expanded='false'] .chevron { transform: rotate(-90deg); }

.panel h2 {
  margin: 0 0 4px;
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
}
.panel-sub { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.panel.warn, .board.warn { box-shadow: 0 26px 50px -34px rgba(20, 40, 60, 0.5), inset 0 0 0 2px #ece0b4; }


.title { min-width: 0; }
/* Brand on the left, language and the way out on the right. */
.topbar .tools { margin-left: auto; }
.title b { display: block; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
/* Two places, one bar. */
.views { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius); background: var(--wash); }
.views button {
  width: auto; height: 34px; padding: 0 14px;
  border-radius: var(--radius); background: transparent; color: var(--ink-soft);
  font: 600 14px var(--font);
}
.views button:hover { color: var(--accent-deep); }
.views button[aria-pressed='true'] { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--hairline); }

.tools { display: flex; align-items: center; gap: 8px; }
/* The language, as three flags. Flat and straight, the way a flag is
   printed — the emoji ones are drawn differently by every system. */
.flags { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius); background: var(--wash); }
.flag {
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border-radius: var(--radius); background: transparent;
}
.flag svg {
  width: 22px; height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(20, 40, 60, .12);
  opacity: .45;
  transition: opacity .12s;
}
.flag:hover svg { opacity: .8; }
.flag[aria-pressed='true'] { background: #fff; box-shadow: 0 0 0 1px var(--hairline); }
.flag[aria-pressed='true'] svg { opacity: 1; }
.icon-button {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 0; border-radius: var(--radius); background: var(--wash);
  box-shadow: 0 0 0 1px var(--hairline); color: var(--ink-soft); cursor: pointer;
}
.icon-button:hover { color: var(--accent-deep); }

/* Everything that can be read back scrolls together. Only the composer stays
   put, the way a conversation works everywhere else. Two scroll areas meant
   the lower half did not move and the history above stayed out of reach. */
.stream {
  flex: 1; min-height: 0; overflow-y: auto;
  border-radius: var(--radius) var(--radius) 0 0;
  background:
    radial-gradient(60% 40% at 0% 0%, #eefaf6 0%, rgba(238,250,246,0) 70%),
    radial-gradient(60% 40% at 100% 100%, #eef4fb 0%, rgba(238,244,251,0) 70%);
}
#conversation {
  padding: 22px 22px 8px;
  display: flex; flex-direction: column; gap: 4px;
}

.turn { display: flex; flex-direction: column; margin-bottom: 12px; }
.turn.user { align-items: flex-end; }
.turn.agent { align-items: flex-start; }
.line { display: flex; align-items: flex-end; gap: 10px; max-width: 100%; }

.avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, #fff 0 14%, rgba(255,255,255,.35) 22%, transparent 40%),
    linear-gradient(155deg, #6fe0c2 0%, var(--accent) 45%, #2b7fa8 100%);
  box-shadow: 0 6px 14px -8px rgba(20,33,30,.8);
}

.bubble {
  max-width: min(32rem, 78vw);
  padding: 14px 18px;
  font-size: 16px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.turn.user .bubble {
  border-radius: var(--radius); padding: 12px 20px;
  background: linear-gradient(90deg, #26b598, var(--accent) 60%, #1a9a90);
  color: #fff;
  box-shadow: 0 14px 26px -18px rgba(15,127,107,1);
}
.turn.user .bubble.long { border-radius: var(--radius); }
.turn.agent .bubble {
  border-radius: var(--radius); background: #fff;
  box-shadow: 0 10px 26px -20px rgba(20,33,30,.8), 0 0 0 1px var(--hairline);
}
/* Three dots while the agent is thinking. */
.bubble.dots { display: flex; align-items: center; gap: 6px; padding: 17px 18px; }
.bubble.dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  opacity: .3;
  animation: think 1.25s ease-in-out infinite;
}
.bubble.dots i:nth-child(2) { animation-delay: .16s; }
.bubble.dots i:nth-child(3) { animation-delay: .32s; }
@keyframes think {
  0%, 65%, 100% { opacity: .28; transform: translateY(0); }
  32% { opacity: 1; transform: translateY(-4px); }
}

.time { font-size: 12px; color: var(--muted); margin-top: 5px; }
.turn.agent .time { margin-left: 44px; }

/* ── The pictures, full width ─────────────────────────────────────────── */

.board {
  /* Beside the rail, never over it. This used to be `1 / -1` with an
     exception per area, listed by name — and the area added after that list
     silently took the rail's column with it. The rail collapsed to 32 px and
     nothing said why. Stated once, for every board there will ever be. */
  grid-column: 2 / -1;
  min-height: 0; overflow-y: auto;
  padding: 22px 24px 26px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 40px 120px -40px rgba(20, 40, 60, 0.45);
}
.board-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.board-head h2 {
  margin: 0 0 2px;
  font: 400 30px/1 var(--display); letter-spacing: .02em; text-transform: uppercase;
}
.board-empty { margin: 22px 0; text-align: center; font-size: 14px; color: var(--muted); }

/* ── What has gone live ───────────────────────────────────────────────── */

/* A day stands over the things that happened on it. Repeating the date on
   every line turned ten picture moves into ten identical stamps. */
.change-day {
  margin: 26px 0 8px;
  font: 400 21px/1 var(--display); letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink);
}
.change-day:first-child { margin-top: 4px; }
.change {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: baseline;
  gap: 12px; padding: 9px 12px;
  border-radius: var(--radius);
}
.change:nth-child(odd) { background: var(--wash); }
.change-at {
  font-size: 13px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.change-what { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }

@media (max-width: 700px) {
  .change { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 10px; }
}

/* ── The two groups ───────────────────────────────────────────────────── */

/* Side by side at every width, the phone included. Stacked, the store sat a
   screen and a half below the gallery, and a picture that has to travel that
   far is a picture nobody moves.

   They are told apart by their ground, not by a label: what is on the page
   stands on white and carries the mint mark, what waits stands on the wash
   and carries a grey one. The gutter between them is not empty — it holds
   the sign that these two exchange. */
.groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
}
.group {
  min-width: 0;
  padding: 13px 13px 15px;
  border-radius: var(--radius);
  outline: 2px dashed transparent; outline-offset: -2px;
  transition: background .15s, box-shadow .15s, outline-color .15s;
}
.group-live { background: #fff; box-shadow: inset 0 0 0 1px var(--hairline); }
.group-store { background: var(--wash); box-shadow: inset 0 0 0 1px var(--hairline); }
.group-head { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; }
.group-head h3 {
  margin: 0; min-width: 0;
  font: 400 clamp(17px, 2vw, 21px)/1 var(--display);
  letter-spacing: .02em; text-transform: uppercase;
}
.group-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.group-live .group-dot { background: var(--accent); box-shadow: 0 0 0 3px #e8f7f2; }
.group-store .group-dot { background: #c2c8cf; box-shadow: 0 0 0 3px #e7eaec; }
.group-count {
  margin-left: auto; flex: none;
  padding: 3px 9px; border-radius: 999px;
  font: 700 12px var(--font); font-variant-numeric: tabular-nums;
}
.group-live .group-count { background: #e8f7f2; color: var(--accent-deep); }
.group-store .group-count { background: #e7eaec; color: var(--muted); }
.group-hint { margin: 0 0 11px; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* The gutter says what it is for. */
.groups-split { position: relative; align-self: stretch; width: 46px; display: grid; place-items: center; }
.groups-split::before {
  content: ''; position: absolute; top: 8px; bottom: 8px; left: 50%;
  border-left: 2px dashed rgba(20, 40, 60, .14);
}
.groups-split span {
  position: relative; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--muted); font-size: 15px;
  box-shadow: 0 0 0 1px var(--hairline), 0 8px 16px -10px rgba(20, 40, 60, .6);
  transition: background .15s, color .15s;
}

/* While something is travelling, every place it could land says so: a dashed
   edge and a touch of grey. The one under the pointer says it in mint. */
body.is-dragging .group {
  background: #f1f4f6;
  outline-color: rgba(20, 40, 60, .22);
}
body.is-dragging .group.group-over {
  background: #e8f7f2;
  outline-color: var(--accent);
}
body.is-dragging .groups-split span { background: var(--accent); color: #fff; }

.chosen-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 10px 14px;
  border-radius: var(--radius); background: #e8f7f2; color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px rgba(23, 161, 132, .25);
  font-size: 14px; font-weight: 600;
}
.chosen-bar button {
  width: auto; height: 34px; padding: 0 14px;
  font: 500 13px var(--font); letter-spacing: 0;
}
.chosen-bar button.secondary { margin: 0 0 0 auto; }
.chosen-hint { font-weight: 400; opacity: .8; }
.chosen-hint::before { content: '· '; }

/* Two round marks on the picture itself: the tick on the right puts it in
   the selection, the bin on the left takes it off the page. Round is the one
   exception the corner rule allows — these are genuinely round things, not
   boxes. A labelled row of buttons under every tile turned a wall of
   photographs into a wall of forms. */
.shot-pick, .shot-bin {
  position: absolute; top: 8px;
  width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 0 0 1px rgba(20, 40, 60, .15), 0 2px 6px -2px rgba(20, 40, 60, .4);
  transition: background .15s, color .15s;
}
.shot-pick { right: 8px; color: var(--accent-deep); font: 700 15px var(--font); }
.shot-pick[aria-pressed='true'] { background: var(--accent); color: #fff; }
.shot-bin { left: 8px; color: #8a6560; }
.shot-bin svg { width: 16px; height: 16px; }
.shot-bin:hover:not(:disabled) { background: #b3261e; color: #fff; }
.shot-bin:disabled { opacity: .4; }
.shot-chosen .shot-frame { box-shadow: inset 0 0 0 3px var(--accent); }

/* Tiles, as many per row as fit. Each group has half the board, so the
   measure is smaller than it was across the full width. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}
.shot { margin: 0; }
.shot-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius); overflow: hidden; background: #e6eaec;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.shot-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The whole tile is the handle, in both groups. `pan-y` leaves scrolling to
   the browser: a board of twenty pictures is nothing but tiles on a phone,
   and a finger has to be able to get past them. The drag takes over after a
   short hold and cancels the scroll itself, see `startDrag`. */
.shot { cursor: grab; touch-action: pan-y; }
.shot img { -webkit-user-drag: none; user-drag: none; }
.shot:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: var(--radius); }

/* Out of the flow and under the finger. A card while it travels: without a
   ground of its own, the words underneath it showed through and two captions
   sat on top of each other. */
.shot-dragging {
  position: fixed; z-index: 40;
  margin: 0; pointer-events: none;
  cursor: grabbing;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--hairline), 0 30px 60px -22px rgba(20, 33, 30, .65);
  transform: rotate(1.5deg) scale(1.02);
}
.shot-dragging figcaption { padding: 8px 10px 10px; }
/* Several at once travel as a pile, with their number on it. */
.shot-stack {
  box-shadow:
    0 0 0 1px var(--hairline),
    7px 7px 0 -1px #fff, 7px 7px 0 0 var(--hairline),
    14px 14px 0 -1px #fff, 14px 14px 0 0 var(--hairline),
    0 30px 60px -22px rgba(20, 33, 30, .65);
}
.shot-count {
  position: absolute; left: -11px; top: -11px;
  min-width: 27px; height: 27px; padding: 0 8px;
  display: grid; place-items: center;
  border-radius: 999px; background: var(--accent); color: #fff;
  font: 700 13px var(--font);
  box-shadow: 0 3px 10px rgba(20, 33, 30, .4);
}
/* The rest of the pile is out of sight, not out of the list: calling the
   drag off has to put every picture back exactly where it stood. */
.shot-taken { display: none; }

/* The gap it would fall into — one per picture, so the space the dashed
   slots take is the space the pictures will take. */
.shot-gap {
  border-radius: var(--radius);
  border: 2px dashed var(--accent-2);
  background: #eefaf6;
}
body.is-dragging { cursor: grabbing; user-select: none; }
/* An empty group needs a surface to be dropped on at all. */
body.is-dragging .tiles { min-height: 88px; }
.shot-missing .shot-frame { box-shadow: inset 0 0 0 1px #f0c8c3; }
.shot-missing img { visibility: hidden; }
.shot figcaption { padding: 8px 2px 0; }
.shot-alt {
  width: 100%; height: auto; padding: 0; margin-bottom: 8px;
  background: transparent; color: var(--ink-soft);
  font: 400 14px/1.35 var(--font); text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shot-alt:hover { color: var(--accent-deep); }
.shot-alt-missing { color: #6d5c14; font-style: italic; }

.upload {
  display: flex; align-items: center; justify-content: center;
  width: auto; height: 44px; padding: 0 18px;
  border-radius: var(--radius); background: var(--wash); color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font: 500 14px var(--font); cursor: pointer;
}
.upload:hover, .upload.over { color: var(--accent-deep); box-shadow: inset 0 0 0 2px var(--accent-2); }
.panel-note { margin: 8px 2px 0; font-size: 13px; color: var(--muted); }

/* The short manual: three steps, beside the conversation rather than in it,
   so it is still there when someone comes back after a week. */
.howto { color: var(--ink-soft); }
.howto ol { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.howto li {
  counter-increment: step;
  position: relative;
  margin: 0 0 8px; padding: 12px 16px 12px 46px;
  border-radius: var(--radius); background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 15px; line-height: 1.45;
}
.howto li::before {
  content: counter(step);
  position: absolute; left: 14px; top: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: #e8f7f2; color: var(--accent-deep);
  font-size: 13px; font-weight: 700;
}
.howto-foot { margin: 10px 2px 0; font-size: 14px; color: var(--muted); }
.howto li:last-child { margin-bottom: 0; }

#proposal {
  margin: 8px 22px 18px; padding: 18px;
  border-radius: var(--radius); background: var(--wash);
  box-shadow: 0 0 0 1px var(--hairline);
}
#proposal h2 {
  margin: 0 0 14px;
  font: 400 22px/1 var(--display); letter-spacing: .02em; text-transform: uppercase;
}
.change {
  padding: 12px 14px 13px 16px; margin-bottom: 10px;
  border-radius: var(--radius); background: #fff;
  box-shadow: 0 0 0 1px var(--hairline);
  border-left: 4px solid #cdeee4;
}
.change .label { font-size: 14px; color: var(--muted); }
.numbers { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.numbers .before { color: var(--muted); text-decoration: line-through; font-size: 17px; }
.numbers .arrow { color: var(--accent-2); font-weight: 700; }
.numbers .after { font-weight: 800; font-size: 27px; line-height: 1.1; color: var(--accent-deep); }
.locale { display: grid; grid-template-columns: 38px 1fr; gap: 8px; margin-top: 7px; }
.locale .code {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-deep); background: #e8f7f2; border-radius: var(--radius);
  padding: 2px 0; text-align: center; height: fit-content;
}
.locale .back { color: var(--muted); font-size: 14px; }
.locale .back::before { content: '↩ '; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* `.actions a` also matches the 66 px rule above and beats `.actions > *` on
   specificity — which left the preview link a head taller than the two
   buttons beside it. Naming the link here settles it. */
.actions > *, .actions a { flex: 1 1 150px; height: 52px; margin-top: 0 !important; font-size: 16px; }
#publishNote { font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.problem {
  margin-top: 10px; padding: 11px 14px; border-radius: var(--radius);
  background: #fdf2f0; box-shadow: inset 0 0 0 1px #f2d3cd; color: #9d2b1f; font-size: 15px;
}

/* The notice list inside its panel. */
#noticeList { min-width: 0; }
.notice-warn {
  margin: 0 0 10px; padding: 10px 13px; border-radius: var(--radius);
  font-size: 14px; color: #6d5c14; background: #fdf8e6; box-shadow: inset 0 0 0 1px #ece0b4;
}
/* Collapsed, a banner is two lines: what it is and roughly what it says.
   Open, it shows the whole sentence, the period and what can be done with
   it. One at a time — a list of six unfolded banners is a wall. */
.notice {
  margin-bottom: 8px;
  border-radius: var(--radius); background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--hairline);
  overflow: hidden;
}
.notice-head {
  width: 100%; height: auto; padding: 10px 12px 6px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  background: transparent; color: var(--ink);
  font: 500 15px var(--font); text-align: left;
}
.notice-state {
  flex: none;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-deep); background: #e8f7f2; border-radius: var(--radius); padding: 2px 7px;
}
.notice-scheduled .notice-state { color: #3b5b8c; background: #e9eff9; }
.notice-draft .notice-state { color: #6d5c14; background: #fdf8e6; }
.notice-pending {
  flex: none;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #6d5c14; background: #fdf8e6; border-radius: var(--radius); padding: 2px 7px;
}
.notice-paused .notice-state { color: #6d5c14; background: #fdf8e6; }
.notice-expired .notice-state { color: var(--muted); background: #eceef0; }
.notice-name {
  flex: 1 0 40%; min-width: 0;
  font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notice .chevron { flex: none; color: var(--muted); transition: transform .15s; }
.notice.is-open .chevron { transform: rotate(180deg); }

.notice-text {
  margin: 0; padding: 0 12px 10px;
  font-size: 15px; line-height: 1.4; color: var(--ink-soft);
  cursor: pointer;
}
/* Two lines and no more, until it is opened. */
.notice:not(.is-open) .notice-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.notice-expired .notice-name, .notice-expired .notice-text { color: var(--muted); }

.notice-when { margin: 0; padding: 0 12px 10px; font-size: 13px; color: var(--muted); }
.notice-off { color: #6d5c14; }
.notice-actions { display: flex; gap: 8px; padding: 0 12px 12px; }
.notice:not(.is-open) .notice-when,
.notice:not(.is-open) .notice-actions { display: none; }

.notice-pause, .notice-remove {
  width: auto; height: 32px; padding: 0 12px;
  border-radius: var(--radius); background: #fff; color: var(--ink-soft);
  box-shadow: 0 0 0 1px var(--hairline);
  font: 500 13px var(--font);
}
.notice-pause:hover:not(:disabled) { color: var(--accent-deep); box-shadow: 0 0 0 1px var(--accent-2); }
.notice-remove:hover:not(:disabled) { color: #b3261e; box-shadow: 0 0 0 1px #f0c8c3; }

.notice-clean {
  width: auto; height: 40px; padding: 0 16px; margin-top: 2px;
  border-radius: var(--radius); background: #fff; color: var(--ink-soft);
  box-shadow: 0 0 0 1px var(--hairline);
  font: 500 14px var(--font);
}
.notice-clean:hover:not(:disabled) { color: var(--accent-deep); box-shadow: 0 0 0 1px var(--accent-2); }

.composer {
  margin: 14px 22px 22px; padding: 10px 10px 10px 16px;
  border-radius: var(--radius); background: #fff;
  box-shadow: 0 22px 44px -34px rgba(20,33,30,1), 0 0 0 1px var(--hairline);
}
.composer textarea {
  width: 100%; border: 0; background: transparent; resize: none;
  font: 400 16px var(--font); color: var(--ink); padding: 8px 0 6px;
}
.composer textarea::placeholder { color: #a3a7ae; }
.composer textarea:focus-visible { outline: 0; }
.composer-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.composer-row button { width: auto; height: 48px; padding: 0 26px; font-size: 16px; }

.note {
  margin: 14px 22px 0; padding: 12px 16px; border-radius: var(--radius);
  font-size: 14px; color: #6d5c14; background: #fdf8e6; box-shadow: inset 0 0 0 1px #ece0b4;
}

@media (max-width: 900px) {
  body { padding: 12px; }
  .signin { grid-template-columns: minmax(0, 1fr); padding: 84px 24px 36px; align-content: end; row-gap: 28px; }
  .lang { top: 18px; right: 18px; }
  .glass { padding: 40px 28px; }
  .signin h1 { font-size: clamp(48px, 18vw, 76px); }
  .logo b { font-size: 34px; }
  /* One column, and the chat card stops short of the screen: at full height
     it would hide the panels below it completely, and nobody scrolls past a
     screen of empty conversation to find out they exist. */
  /* One column: nothing scrolls on its own, so nothing clips a shadow. The
     rail becomes a row of places above the work. */
  /* `auto` for the rows as well, not just the columns. The base layout
     gives the second row `1fr` so the work fills the screen beside the
     rail; stacked, that row IS the rail, and a short board left it as a
     seven-hundred-pixel pane of frosted glass with four buttons at the
     top. */
  .work {
    height: auto; gap: 12px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    /* And the leftover space goes nowhere. A grid spreads it across its rows
       by default, which puffed the rail up again — half as far, but still. */
    align-content: start;
  }
  .board { grid-column: 1 / -1; }
  .rail { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px; }
  .rail-new { width: auto; padding: 0 16px; }
  .rail-label, .rail-user { display: none; }
  .rail-items { flex-direction: row; flex-wrap: wrap; }
  .side { padding: 0; max-height: none; overflow: visible; }
  .shell { height: auto; min-height: 72dvh; border-radius: var(--radius); }
  .topbar { border-radius: var(--radius); padding: 8px 12px; }
  .panel { border-radius: var(--radius); }
  .board { padding: 16px 12px 18px; }
}

/* On a phone the two groups still stand side by side — that is the whole
   point of them — so everything around the pictures has to give up its
   room: the gutter, the padding, and the sentence under each heading, which
   the summary above the board says once anyway. */
@media (max-width: 700px) {
  .groups-split { width: 20px; }
  .groups-split span { width: 22px; height: 22px; font-size: 11px; }
  .group { padding: 9px 7px 11px; }
  .group-head { gap: 6px; margin-bottom: 8px; }
  .group-dot { width: 7px; height: 7px; box-shadow: none; }
  .group-count { padding: 2px 7px; font-size: 11px; }
  .group-hint { display: none; }
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .shot figcaption { padding: 7px 0 0; }
  .shot-alt { margin-bottom: 6px; font-size: 13px; }
  .shot-pick, .shot-bin { top: 5px; width: 26px; height: 26px; }
  .shot-pick { right: 5px; }
  .shot-bin { left: 5px; }
}

/* Describing a picture: a window of its own, with the page behind it put
   out of the way. `prompt()` was one line in a system box, different on
   every platform, with the board still legible behind it — nothing about it
   said »this is the sentence that will be read out to someone who cannot
   see the picture«. */
.ask {
  width: min(520px, calc(100vw - 32px));
  padding: 0; border: 0;
  border-radius: var(--radius);
  background: #fff; color: var(--ink);
  box-shadow: 0 50px 90px -40px rgba(10, 30, 40, .75);
}
.ask::backdrop {
  background: rgba(10, 30, 40, .55);
  -webkit-backdrop-filter: blur(6px) saturate(.9);
  backdrop-filter: blur(6px) saturate(.9);
}
.ask form { padding: 22px 24px 20px; }
.ask h3 {
  margin: 0 0 4px;
  font: 400 26px/1 var(--display); letter-spacing: .02em; text-transform: uppercase;
}
.ask-sub { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--muted); }
/* The picture is in the window: a description written from memory of the
   thumbnail behind the box is a description of the wrong picture. */
.ask-shot {
  width: 100%; height: 160px; object-fit: cover;
  border-radius: var(--radius); background: #e6eaec;
  box-shadow: inset 0 0 0 1px var(--hairline);
  margin-bottom: 14px;
}
.ask textarea {
  width: 100%; padding: 12px 14px;
  border: 0; border-radius: var(--radius);
  background: var(--wash); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font: 400 16px/1.45 var(--font); resize: vertical;
}
.ask textarea:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--accent-2); }
.ask-left {
  margin: 7px 2px 0; text-align: right;
  font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.ask-left.is-tight { color: #6d5c14; font-weight: 600; }
.ask-actions { display: flex; gap: 10px; margin-top: 18px; }
.ask-actions button { flex: 1 1 0; height: 48px; margin: 0; font-size: 15px; }
/* The one button on this screen that takes something away says so. */
.ask-actions .danger { background: #b3261e; }
.ask-actions .danger:hover:not(:disabled) { background: #9d2b1f; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── Was sich im Gespräch ändern lässt ─────────────────────────────────────
   The list stands below an empty thread, which looks like "instead of" it —
   so hiding it is one sibling rule and there is no flag to keep in step. */
#conversation:not(:empty) + .caps { display: none; }

.caps { margin: 2px 22px 0; }
.caps h3 {
  margin: 0 0 10px;
  font: 400 21px/1 var(--display); letter-spacing: .02em; text-transform: uppercase;
}
.caps h3 + * { margin-top: 0; }
.caps dl { margin: 0 0 24px; }
.caps dt { font-size: 15px; font-weight: 600; line-height: 1.45; }
/* The example is quoted in the catalogue, not here: the quotation marks
   differ per language and the string is the only place that knows which. */
.caps dd { margin: 2px 0 14px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.caps .caps-not { margin: 0; padding-left: 20px; }
.caps .caps-not li { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* In the window the box already brings its own padding. */
.ask .caps { margin: 10px 0 0; }
.ask .caps h3 { font-size: 18px; }

/* The way back to the list once the thread has started. A link, not a button:
   next to "Send" it must not look like a second thing to press. */
.composer-row .caps-link {
  margin-right: auto;
  width: auto; height: auto; padding: 0;
  background: transparent; color: var(--muted);
  font: 400 14px var(--font); text-decoration: underline; text-underline-offset: 3px;
}
.composer-row .caps-link:hover { color: var(--accent-deep); }

/* ── Der Änderungsbereich: aufklappen und zurücksetzen ─────────────────────
   Scoped to #changesList on purpose: `.change` is also the name of the cards
   in the publish panel, and the two must not pull at each other. */
#changesList .change { padding: 0; overflow: hidden; }
#changesList .change-head {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) 18px;
  align-items: baseline; gap: 12px;
  width: 100%; height: auto; padding: 11px 14px 12px 16px;
  background: transparent; color: var(--ink-soft); text-align: left;
  font: 400 15px/1.45 var(--font);
}
#changesList .change-head:hover:not(:disabled) { background: var(--wash); }
#changesList .change-head:disabled { opacity: 1; cursor: default; }
#changesList .change-head .change-what { min-width: 0; overflow-wrap: anywhere; }
#changesList .change-head .chevron { color: var(--muted); transition: transform .15s; }
#changesList .change-head[aria-expanded='true'] .chevron { transform: rotate(180deg); }

#changesList .change-body { padding: 2px 14px 12px 16px; }

/* One changed thing: what it is, what it was, what it became, and the way
   back. The picture is there because "picture removed" without it is the
   whole complaint. */
.delta {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--hairline);
}
.delta-shot {
  width: 72px; height: 48px; object-fit: cover; flex: none;
  border-radius: var(--radius); background: #e6eaec;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.delta-body { flex: 1 1 220px; min-width: 0; }
.delta-label { margin: 0; font-size: 13px; color: var(--muted); }
.delta-values {
  margin: 2px 0 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere;
}
.delta-values s { color: var(--muted); }
.delta-values b { color: var(--accent-deep); }
.delta-undo {
  flex: none; width: auto; height: 34px; padding: 0 14px;
  font-size: 13px; background: #fff; color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px #cdeee4;
}
.delta-undo:hover:not(:disabled) { background: var(--wash); }
.delta-note { margin: 0; flex: 1 1 100%; font-size: 13px; color: var(--muted); }

@media (max-width: 700px) {
  #changesList .change-head { grid-template-columns: minmax(0, 1fr) 18px; gap: 2px 8px; }
  #changesList .change-head .change-at { grid-column: 1 / -1; }
}