/* ==========================================================================
   app.css — Unblokia (PWA)
   Themes on <html>: theme-dragon | theme-samurai | theme-tormenta | theme-brasas | theme-marea | theme-tinta | theme-lluvia
   (src/client/js/themes.js). A theme is a set of the variables below, a sky (--crt-sky) and, drawn on a canvas behind everything,
   a background (src/client/js/scenery.js). The variable names keep their old «crt» prefix: every rule below uses them.
   Panel effects: rhythm, feed and typos (src/client/js/fx.js); they belong to no theme.
   ========================================================================== */

/* ---------- Variables ---------- */
:root {
  /* Colour: the ink, what you type, the base, the sky behind everything and the soft dark patch behind the text.
     These are brasas, the default theme; every theme sets its own below. */
  --crt-fg: #efe7da;
  --crt-user: #f0a35e;                 /* what you type (the «>» and the prompt caret) */
  --crt-bg: #0b0e14;
  --crt-sky: radial-gradient(120% 80% at 50% 110%, #2a1a14 0%, #0b0e14 60%);
  --crt-scrim: rgba(0, 0, 0, 0.42);
  --crt-dim: color-mix(in srgb, var(--crt-fg) 50%, transparent);
  --crt-faint: color-mix(in srgb, var(--crt-fg) 8%, var(--crt-bg));

  /* Typography and reader: the text in the voice of the theme, the controls in a plain typeface */
  --crt-font: 'Cormorant Garamond', Georgia, serif;
  --crt-font-style: italic;
  --ui-font: 'Figtree', system-ui, sans-serif;
  --crt-reader-font-size: clamp(1.6rem, min(6.4vw, 26.37px), 2.1rem);
  --crt-reader-line-height: 1.5;
  --crt-reader-width: 24ch;
  --crt-reader-top: clamp(24px, 14vh, 150px);
  --crt-cursor-speed: 0.6s;
  --crt-glow: none;
}
@media (min-width: 820px) {
  :root { --crt-reader-width: 30ch; }
}

/* The seven themes */
html.theme-dragon {
  --crt-fg: #f0f3fa; --crt-user: #ff8a3d; --crt-bg: #070b16;
  --crt-sky: radial-gradient(110% 65% at 65% 20%, #3a5285 0%, #1a2747 45%, #080c18 100%);
  --crt-scrim: rgba(6, 10, 22, 0.62);
  --crt-font: 'Uncial Antiqua', Georgia, serif; --crt-font-style: normal;
  --crt-reader-font-size: clamp(1.15rem, min(4.9vw, 20.19px), 1.55rem);
}
html.theme-samurai {
  --crt-fg: #f6ebe6; --crt-user: #f1b3b8; --crt-bg: #17132a;
  --crt-sky: linear-gradient(180deg, #141127 0%, #2b2142 45%, #6e4660 70%, #c98a86 84%, #2a1d2c 100%);
  --crt-scrim: rgba(20, 17, 39, 0.55);
  --crt-font: 'Shippori Mincho', serif; --crt-font-style: normal;
  --crt-reader-font-size: clamp(1.3rem, min(5.4vw, 22.25px), 1.75rem);
}
html.theme-tormenta {
  --crt-fg: #f2f5f9; --crt-user: #b9d4ff; --crt-bg: #0a0d12;
  --crt-sky: linear-gradient(180deg, #07090d 0%, #141a24 60%, #0a0d12 100%);
  --crt-scrim: rgba(8, 10, 14, 0.7);
  --crt-font: 'Literata', Georgia, serif; --crt-font-style: normal;
  --crt-reader-font-size: clamp(1.3rem, min(5.4vw, 22.25px), 1.75rem);
}
html.theme-brasas { /* the defaults of :root */ }
html.theme-marea {
  --crt-fg: #f6efe7; --crt-user: #f2c39b; --crt-bg: #0f1b2c;
  --crt-sky: linear-gradient(180deg, #0b1424 0%, #22385a 42%, #8f7184 60%, #f0b48c 68%, #0d1a2c 100%);
  --crt-scrim: rgba(14, 24, 42, 0.55);
  --crt-font: 'Marcellus', Georgia, serif; --crt-font-style: normal;
  --crt-reader-font-size: clamp(1.3rem, min(5.4vw, 22.25px), 1.75rem);
}
html.theme-tinta {
  --crt-fg: #f2f4fa; --crt-user: #ff4f9a; --crt-bg: #04060c;
  --crt-sky: var(--crt-bg);                                   /* the fluid covers it (scene-ink.js) */
  --crt-scrim: rgba(4, 6, 12, 0.55);
  --crt-font: 'Instrument Serif', Georgia, serif;
  --crt-reader-font-size: clamp(1.75rem, min(7.2vw, 29.66px), 2.35rem);
}
html.nogl.theme-tinta { --crt-sky: radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--crt-user) 30%, var(--crt-bg)), var(--crt-bg)); }   /* no WebGL2: a glow instead of the fluid */
html.theme-lluvia {
  --crt-fg: #e9eef2; --crt-user: #ffc27a; --crt-bg: #10151c;
  --crt-sky: linear-gradient(180deg, #0e131b 0%, #1a1f2a 60%, #2a2128 100%);
  --crt-font: 'Lora', Georgia, serif;
  --crt-reader-font-size: clamp(1.4rem, min(5.8vw, 23.9px), 1.85rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { background: var(--crt-bg); color-scheme: dark; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--crt-sky);
  color: var(--crt-fg);
  font-family: var(--ui-font);
  overflow: hidden;
  height: 100dvh;
  user-select: none;
}

/* The background of the theme (src/client/js/scenery.js): a canvas behind everything and, for tinta, its own two (the fluid and its drops) */
#scene, #gl, #ov { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
html.theme-tinta #scene, html:not(.theme-tinta) :is(#gl, #ov) { display: none; }
/* The soft dark patch behind the text, so that it reads over any background */
body::before {
  content: "";
  position: fixed;
  left: 50%;
  top: calc(var(--crt-reader-top) + 130px);
  width: min(140vw, 620px);
  height: min(70vh, 440px);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--crt-scrim) 0%, var(--crt-scrim) 45%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
::selection { background: var(--crt-fg); color: var(--crt-bg); }
button { font: inherit; color: inherit; }

/* ---------- Reader ---------- */
#reader {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: max(48px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  cursor: default;
}
html.is-prompt #reader { display: none; }
html.is-login #btn-avatars { display: none; }          /* before signing in there are no characters to choose from */

/* ---------- Start screen and sign-in (src/client/js/intro.js, auth.js) ---------- */
/* The hint under «Despierta, humano.»: it lights up once the text is written (the next block clears it with the rest) */
.intro-hint {
  display: block;
  margin-top: 1.6em;
  font-size: 0.7em;
  color: color-mix(in srgb, var(--crt-fg) 62%, transparent);
  text-shadow: none;
  animation: intro-hint-in 1.2s ease-out both;
}
@keyframes intro-hint-in { from { opacity: 0; } to { opacity: 1; } }

/* The button at the very bottom, for those who already have an account */
#btn-login {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(32px, env(safe-area-inset-bottom));
  width: fit-content;                            /* centred with auto margins: «left: 50%» would leave it only half the screen to grow in */
  max-width: calc(100vw - 150px);                /* clear of the round buttons at the sides */
  margin: 0 auto;
  z-index: 30;
  padding: 10px 18px;
  border: 1px solid var(--crt-dim);
  background: transparent;
  color: var(--crt-fg);
  font-family: var(--ui-font);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-wrap: balance;                            /* on a phone it breaks in two even lines, not in three */
  opacity: 0.6;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#btn-login[hidden] { display: none; }
#btn-login:hover, #btn-login:focus-visible { opacity: 1; }

/* The form: the email and the send button, in the voice of the prompt (orange: it is you who writes) */
#login {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: min(30ch, 100%);
  margin: 1.2em auto 0;
  font-family: var(--crt-font);
  font-style: var(--crt-font-style);
  font-size: calc(var(--crt-reader-font-size) * var(--crt-text-scale, 1));
}
#login[hidden] { display: none; }
.reader-text:empty + #login { margin-top: 0; }   /* nothing above it: it sits where the text would start */
#login input {
  flex: 1 1 14ch;
  min-width: 0;
  padding: 0.15em 0.1em;
  border: 0;
  border-bottom: 1px solid var(--crt-dim);
  border-radius: 0;
  background: transparent;
  color: var(--crt-user);
  caret-color: var(--crt-user);
  font: inherit;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}
#login input::placeholder { color: var(--crt-dim); }
#login input:focus { border-bottom-color: var(--crt-user); }
#login button {
  padding: 0.1em 0.8em;
  border: 1px solid var(--crt-dim);
  background: transparent;
  color: var(--crt-fg);
  font: inherit;
  font-style: normal;
  cursor: pointer;
}
#login button:hover, #login button:focus-visible { border-color: var(--crt-fg); outline: none; }
#login button:disabled { opacity: 0.4; cursor: default; }

.reader-text {
  margin: var(--crt-reader-top) auto 0;
  flex-shrink: 0;
  width: min(var(--crt-reader-width), 100%);
  font-family: var(--crt-font);
  font-style: var(--crt-font-style);
  font-size: calc(var(--crt-reader-font-size) * var(--crt-text-scale, 1));       /* scales: the Aa and ≡ buttons */
  line-height: calc(var(--crt-reader-line-height) * var(--crt-lh-scale, 1));
  text-align: center;
  text-wrap: balance;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-shadow: var(--crt-glow);
  user-select: text;
}
.reader-text.kind-list, .reader-text.kind-quote { width: min(34ch, 100%); text-align: left; text-wrap: wrap; }
.reader-text.kind-code {
  width: min(80ch, 100%);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-style: normal;
  font-size: calc(var(--crt-reader-font-size) * var(--crt-text-scale, 1) * 0.6);
  text-align: left;
  text-wrap: wrap;
  padding: 0.6em 0.8em;
  border-left: 1px solid var(--crt-fg);
  background: var(--crt-faint);
}
.reader-end { display: block; margin-top: 0.8em; color: var(--crt-dim); }
.reader-error { color: var(--crt-fg); opacity: 0.85; }

/* Block cursor (reader and prompt) */
.crt-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 0.08em;
  vertical-align: -0.12em;
  background: var(--crt-fg);
  animation: crt-blink var(--crt-cursor-speed) steps(1) infinite;
}
#reader.is-typing .crt-cursor { animation: none; }
@keyframes crt-blink { 50% { opacity: 0; } }

/* Waiting for the reply: three round dots that light up one after another and go out in the same order */
.crt-dots { display: inline-flex; align-items: center; gap: 0.3em; height: 1em; vertical-align: -0.12em; }
.crt-dots i {
  width: 0.26em;
  height: 0.26em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.18;
  animation: crt-dot 1.2s steps(1) infinite;
}
.crt-dots i:nth-child(2) { animation-delay: 0.2s; }
.crt-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes crt-dot { 0% { opacity: 0.18; } 10% { opacity: 1; } 60% { opacity: 1; } 70% { opacity: 0.18; } }

/* ---------- Prompt (only the caret) ---------- */
#prompt {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  padding: max(48px, env(safe-area-inset-top)) 24px 24px;
  cursor: text;
}
html.is-prompt #prompt { display: flex; }
#prompt .reader-text { user-select: none; width: min(36ch, 100%); text-align: left; text-wrap: wrap; }
/* What you type has a «>» in front and an orange caret, to tell your voice from the assistant's */
#prompt .prompt-display::before {
  content: '> ';
  color: var(--crt-user);
}
#prompt .crt-cursor { background: var(--crt-user); }
#prompt-input {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  font-size: 16px;            /* avoids iOS zooming in on focus */
  resize: none;
}

/* ---------- Metadata and gear ---------- */
#meta {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: 40px;
  z-index: 30;
  font-family: var(--ui-font);
  font-size: 13px;
  color: var(--crt-dim);
  letter-spacing: 0.2em;
  pointer-events: none;
}
#meta.is-toast { color: var(--crt-fg); }

/* Accumulated cost of the conversation, bottom left */
#cost {
  position: fixed;
  left: 40px;
  bottom: max(32px, env(safe-area-inset-bottom));
  z-index: 30;
  font-family: var(--ui-font);
  font-size: 12px;
  color: var(--crt-dim);
  letter-spacing: 0.2em;
  white-space: pre;
}

/* Your messages when going through the history: a little dimmer than the assistant's */
.reader-text.is-user { opacity: 0.72; }

/* Column of round buttons at the bottom right: theme, type size, line spacing */
#dock {
  position: fixed;
  right: 40px;
  bottom: max(32px, env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
/* A single floating circle; tapping it unfolds the rest upwards (and it folds by itself) */
#dock-items { display: none; flex-direction: column; gap: 10px; }
#dock.is-open #dock-items { display: flex; animation: dock-appear 0.18s ease-out; }
@keyframes dock-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#btn-menu { opacity: 0.35; }
#dock.is-open #btn-menu { opacity: 0.9; }
#btn-menu .icon-close, #dock.is-open #btn-menu .icon-open { display: none; }
#dock.is-open #btn-menu .icon-close { display: block; }
#btn-settings { font-size: 19px; line-height: 1; padding: 0; }
.dock-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--crt-dim);
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  opacity: 0.55;
  cursor: pointer;
  color: var(--crt-fg);
  -webkit-tap-highlight-color: transparent;
}
.dock-btn:hover { opacity: 1; }
.dock-btn svg { width: 20px; height: 20px; }
#btn-size { font-family: var(--ui-font); font-size: 15px; line-height: 1; padding: 0; }
.dock-btn[hidden] { display: none; }

#gear {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  padding: 8px 6px 8px 8px;
  border: 1px solid var(--crt-dim);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  background: var(--crt-bg);
  color: var(--crt-fg);
  font-size: 18px;
  line-height: 1;
  opacity: 0.4;
  cursor: pointer;
}
#gear:hover, #gear:focus-visible { opacity: 1; outline: none; }
#gear { display: none; }   /* replaced by the ⚙ circle of the floating menu (the P key still opens the panel) */

/* ---------- Avatars: burger at the top left and a panel that slides in from that side ---------- */
#btn-avatars {
  position: fixed;
  left: 40px;
  top: max(12px, env(safe-area-inset-top));
  z-index: 50;                                  /* above the panel: it works as the close button */
}
#btn-avatars.is-open { opacity: 0.9; }
#btn-avatars .icon-close, #btn-avatars.is-open .icon-open { display: none; }
#btn-avatars.is-open .icon-close { display: block; }
#avatars-scrim {
  position: fixed;
  inset: 0;
  z-index: 44;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
#avatars-scrim.is-open { opacity: 1; pointer-events: auto; }
#avatars {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 45;
  width: min(280px, 80vw);
  padding: calc(max(12px, env(safe-area-inset-top)) + 60px) 0 24px;
  overflow-y: auto;
  background: var(--crt-bg);
  border-right: 1px solid var(--crt-dim);
  box-shadow: 6px 0 30px rgba(0, 0, 0, 0.35);
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform 0.2s ease-out, visibility 0s 0.2s;
}
#avatars.is-open { transform: none; visibility: visible; transition: transform 0.2s ease-out; }
.avatar-item {
  display: block;
  width: 100%;
  padding: 14px 24px;
  border: 0;
  background: transparent;
  color: var(--crt-fg);
  font-family: var(--ui-font);
  font-size: 17px;
  text-align: left;
  opacity: 0.6;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.avatar-item:hover, .avatar-item:focus-visible { opacity: 1; outline: none; }
.avatar-item.is-active { opacity: 1; }
.avatar-item.is-active::before { content: "▸ "; }
@media (prefers-reduced-motion: reduce) {
  #avatars, #avatars.is-open, #avatars-scrim { transition: none; }
}

/* ---------- Panel (settings + effects) ---------- */
#panel {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 40;
  width: min(460px, calc(100vw - 48px));
  max-height: min(78vh, calc(100dvh - 48px));
  overflow-y: auto;
  padding: 12px 14px 10px;
  background: var(--crt-bg);
  color: var(--crt-fg);
  border: 1px solid var(--crt-dim);
  font: 15px/1.35 var(--ui-font);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
  user-select: text;
}
#panel[hidden] { display: none; }
#panel h3 {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.18em;
  opacity: 0.6;
}
#panel .p-head {
  display: flex; justify-content: space-between; align-items: center;
  letter-spacing: 0.15em; font-size: 13px;
  padding-bottom: 6px; border-bottom: 1px solid var(--crt-dim);
}
#panel button { all: unset; cursor: pointer; font: inherit; }
#panel .p-close { font-size: 18px; padding: 0 4px; }
#panel label { display: block; margin: 6px 0 2px; font-size: 13px; opacity: 0.75; }
#panel input[type="text"], #panel input[type="password"], #panel select, #panel textarea {
  width: 100%;
  padding: 5px 7px;
  background: transparent;
  color: var(--crt-fg);
  border: 1px solid var(--crt-dim);
  border-radius: 0;
  font: 14px/1.3 var(--ui-font);
  user-select: text;
}
#panel select option { background: var(--crt-bg); color: var(--crt-fg); }
#panel textarea { min-height: 64px; resize: vertical; }
#panel .p-inline { display: flex; gap: 8px; align-items: center; }
#panel .p-inline > input, #panel .p-inline > select { flex: 1; }
#panel .p-themes { flex-wrap: wrap; }
#panel .p-knob { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 150px) 3.4rem; align-items: center; gap: 10px; padding: 3px 0; }
#panel .p-knob label { margin: 0; opacity: 1; }
#panel .p-knob output { text-align: right; font-variant-numeric: tabular-nums; opacity: 0.6; }
#panel .p-knob.is-changed output { color: var(--crt-user); opacity: 1; }
#panel .p-btn {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--crt-dim);
  font-size: 13px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
#panel .p-btn:hover, #panel .p-btn[aria-pressed="true"] { border-color: var(--crt-fg); }
#panel .p-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--crt-fg) 14%, transparent); }
#panel .p-row { display: grid; grid-template-columns: auto 1fr auto; column-gap: 8px; align-items: baseline; padding: 4px 0; }
#panel .p-desc { grid-column: 2 / 4; opacity: 0.55; font-size: 13px; }
#panel .fx-toggle { white-space: pre; }
#panel .fx-toggle[aria-pressed="false"] { opacity: 0.6; }
#panel .p-note { font-size: 12px; opacity: 0.55; margin-top: 4px; }
#panel .p-foot { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--crt-dim); opacity: 0.5; font-size: 12px; }
#panel input[type="range"] { width: 100%; accent-color: var(--crt-fg); }

@media (max-width: 600px) {
  #panel { left: 8px; right: 8px; bottom: 8px; width: auto; }
  #meta { right: 16px; }
  #cost { left: 16px; }
  #dock { right: 16px; }
  #btn-avatars { left: 16px; }
}

/* ==========================================================================
   Reader effects (panel)
   ========================================================================== */
/* Paper feed: the previous text slides down and fades while the next one is written */
.feed-ghost { position: fixed !important; pointer-events: none; animation: crt-feed 0.6s cubic-bezier(0.3, 0, 0.2, 1) forwards; }
@keyframes crt-feed { to { transform: translateY(3.2em); opacity: 0; filter: blur(0.6px); } }

/* ---------- Ideas under the reply (carousel) ---------- */
#ideas {
  position: fixed;
  left: 50%;
  bottom: calc(max(32px, env(safe-area-inset-bottom)) + 56px);       /* above the cost row and the round buttons */
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 12px;
  width: min(760px, calc(100vw - 48px));
  padding: 4px 2px 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--crt-dim) transparent;
  font-family: var(--crt-font);
  font-style: var(--crt-font-style);
  font-size: calc(var(--crt-reader-font-size) * var(--crt-text-scale, 1) * 0.72);
  line-height: 1.2;
}
#ideas[hidden] { display: none; }
html.has-ideas #reader { padding-bottom: calc(210px + env(safe-area-inset-bottom)); }   /* long text is not covered */
.idea {
  flex: 0 0 min(15em, 78%);
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 0.6em 0.8em;
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
  user-select: none;
  color: var(--crt-fg);
  text-shadow: var(--crt-glow);
  background: var(--crt-faint);
  border: 1px solid var(--crt-dim);
}
.idea:hover, .idea:focus-visible { border-color: var(--crt-fg); box-shadow: var(--crt-glow); outline: none; }
.idea-title { font-size: 1.15em; }
.idea-label { color: var(--crt-dim); font-family: var(--ui-font); font-size: 0.8em; letter-spacing: 0.2em; text-transform: uppercase; }
.idea-hook {
  font-size: 0.9em;
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ↻ at the end of the carousel: asks for new cards. A small button, not a card */
.idea-refresh {
  flex: 0 0 auto;
  align-self: center;
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  padding: 0;
  cursor: pointer;
  color: var(--crt-dim);
  background: transparent;
  border: 1px solid var(--crt-dim);
  border-radius: 50%;
}
.idea-refresh svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.idea-refresh:hover, .idea-refresh:focus-visible { color: var(--crt-fg); border-color: var(--crt-fg); box-shadow: var(--crt-glow); outline: none; }
/* While the new ones arrive: everything dimmed and the icon spinning */
#ideas.is-loading .idea, #ideas.is-loading .idea-refresh { opacity: 0.4; pointer-events: none; }
#ideas.is-loading .idea-refresh svg { animation: idea-spin 0.9s linear infinite; }
@keyframes idea-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  #ideas { width: calc(100vw - 32px); }
}