/* Card intelligence: card text, art twins, reprint notes, chart events,
   power search, Reprint Radar and the Art pages (views/card_intel.py).
   Motion is transform/opacity only; everything honours reduced motion. */

:root {
  --ci-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  --ci-rim: inset 0 0 0 1px rgba(255, 255, 255, 0.075);
  --ci-rule: rgba(255, 255, 255, 0.07);
  --ci-dmg: #f2f6fc;
  --ci-ev-release: #bfe8f7;
  --ci-ev-reprint: #cec6f6;
  --ci-ev-rotation: #e6b54a;
  --ci-ev-move: #56c08a;
  --ci-ev-glitch: #e0736a;
}
:root[data-theme="light"] {
  --ci-surface: linear-gradient(180deg, #ffffff, #fbfaf6);
  --ci-rim: inset 0 0 0 1px rgba(20, 24, 28, 0.1);
  --ci-rule: rgba(20, 24, 28, 0.08);
  --ci-dmg: #1b2026;
  --ci-ev-release: #2f6f89;
  --ci-ev-reprint: #5b4bb0;
  --ci-ev-rotation: #8a5d00;
  --ci-ev-move: #2e8256;
  --ci-ev-glitch: #b8483f;
}

/* ------------------------------------------------------------ energy */
.ci-energy { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.22em; border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.ci-energy.is-inline { width: 1em; height: 1em; vertical-align: -0.16em; margin: 0 0.05em; }
.ci-energy.is-type { width: 1.35em; height: 1.35em; }

/* ------------------------------------------------------------ card text */
.ci-text { position: relative; margin-top: 1rem; padding: 0.95rem 1rem 0.9rem; border-radius: 18px;
  background: var(--ci-surface); box-shadow: var(--ci-rim); font-size: 0.88rem; line-height: 1.45; overflow: hidden; }
.ci-text::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--app-rainbow, var(--foil));
  opacity: 0.7; }
.ci-text-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.55rem;
  list-style: none; cursor: pointer; }
.ci-text-head::-webkit-details-marker { display: none; }
.ci-text:not([open]) .ci-text-head { margin-bottom: 0; }
.ci-text-toggle { flex: none; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px); transition: transform 0.2s var(--ease); margin-left: 0.2rem; }
.ci-text[open] .ci-text-toggle { transform: rotate(-135deg) translateY(-1px); }
.ci-text-head .ci-text-kind { flex: 1; }
.ci-text-kind { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; min-width: 0; }
.ci-stage { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.ci-evo { font-size: 0.78rem; color: var(--muted); }
.ci-evo a { color: var(--ink-dim); }
.ci-hp { display: flex; align-items: center; gap: 0.3rem; flex: none; }
.ci-hp small { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); }
.ci-hp b { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  margin-right: 0.15rem; }
.ci-ability, .ci-attack { padding: 0.55rem 0; border-top: 1px solid var(--ci-rule); }
.ci-move-head { display: flex; align-items: center; gap: 0.45rem; margin: 0; min-width: 0; }
.ci-cost { display: inline-flex; gap: 0.12rem; flex: none; }
.ci-free { display: inline-grid; place-items: center; width: 1.15em; color: var(--faint); }
.ci-move-name { flex: 1; min-width: 0; font-weight: 800; }
.ci-dmg { font-size: 1.05rem; font-weight: 900; color: var(--ci-dmg); font-variant-numeric: tabular-nums; flex: none; }
.ci-move-text { margin: 0.28rem 0 0; color: var(--ink-dim); font-size: 0.82rem; }
.ci-ab-tag { flex: none; padding: 0.08rem 0.45rem; border-radius: 999px; font-size: 0.62rem; font-weight: 900;
  letter-spacing: 0.06em; text-transform: uppercase; color: #1a1030;
  background: linear-gradient(100deg, #ffb1c9, #ffd88a 45%, #bfe8f7); }
.ci-effect { margin: 0.4rem 0 0; color: var(--ink-dim); }
.ci-rulebox { margin: 0.55rem 0 0; padding: 0.4rem 0.6rem; border-radius: 10px; font-size: 0.76rem; color: var(--muted);
  background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--ci-rule); }
:root[data-theme="light"] .ci-rulebox { background: rgba(20, 24, 28, 0.025); }
.ci-wrr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin: 0.6rem 0 0; padding-top: 0.55rem;
  border-top: 1px solid var(--ci-rule); }
.ci-wrr div { min-width: 0; }
.ci-wrr dt { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ci-wrr dd { display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem; margin: 0.2rem 0 0; font-weight: 800;
  font-size: 0.8rem; }
.ci-flavour { margin: 0.6rem 0 0; font-style: italic; font-size: 0.78rem; color: var(--muted); }
.ci-play { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.7rem; }
.ci-mark { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 6px;
  font-size: 0.78rem; font-weight: 900; color: var(--bg); background: var(--ink); }
.ci-legal { padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.72rem; color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--ci-rule); }
.ci-legal b { font-weight: 800; }
.ci-legal.is-legal b, .ci-legal.is-reprint b { color: var(--pos); }
.ci-legal.is-banned b, .ci-legal.is-illegal b { color: var(--neg); }

/* ------------------------------------------------------------ reprint note */
.ci-reprint-note { list-style: none; margin: -0.35rem 0 0.8rem; padding: 0; display: flex; flex-direction: column;
  gap: 0.15rem; font-size: 0.82rem; }
.ci-reprint-note li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.ci-reprint-note .ico { color: var(--lav); }

/* ------------------------------------------------------------ art twins */
.ci-twins { margin: 1.2rem 0; padding: 1rem 1.05rem 0.9rem; border-radius: 20px; background: var(--ci-surface);
  box-shadow: var(--ci-rim); }
.ci-twins-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.ci-twins-head h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 0.4rem; }
.ci-twins-line { margin: 0.45rem 0 0.8rem; font-size: 0.9rem; }
.ci-price { font-variant-numeric: tabular-nums; }
.ci-twin-row { list-style: none; margin: 0; padding: 0 0 0.3rem; display: grid; grid-auto-flow: column;
  grid-auto-columns: 112px; gap: 0.7rem; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.ci-twin { scroll-snap-align: start; min-width: 0; }
.ci-twin a { display: flex; flex-direction: column; gap: 0.12rem; color: var(--ink); text-decoration: none; }
.ci-twin-art { position: relative; display: block; border-radius: 7px; overflow: hidden; aspect-ratio: 63 / 88;
  background: var(--panel-2); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.8); transition: transform 0.25s var(--ease); }
.ci-twin a:hover .ci-twin-art, .ci-twin a:focus-visible .ci-twin-art { transform: translateY(-3px); }
.ci-twin-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ci-twin.is-cheapest .ci-twin-art { box-shadow: 0 0 0 2px var(--ice), 0 10px 26px -12px rgba(191, 232, 247, 0.55); }
.ci-owned { position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; font-size: 0.7rem; font-weight: 900; color: #0d0e11; background: var(--pos); }
.ci-twin-set { font-size: 0.72rem; font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; margin-top: 0.3rem; }
.ci-twin-meta { font-size: 0.66rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-twin-price { font-size: 0.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ci-twin-price small { display: block; font-size: 0.62rem; font-weight: 600; color: var(--muted); }
.ci-twins-how { margin: 0.5rem 0 0; }

/* ------------------------------------------------------------ chart events */
.ci-events { margin: 0.9rem 0 1.2rem; padding: 0.85rem 1rem; border-radius: 16px; background: var(--ci-surface);
  box-shadow: var(--ci-rim); }
.ci-events h3 { margin: 0 0 0.5rem; font-size: 0.92rem; display: flex; align-items: center; gap: 0.4rem; }
.ci-event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.ci-event { display: grid; grid-template-columns: 0.6rem 6.4rem 1fr; align-items: baseline; gap: 0.4rem; font-size: 0.82rem; }
.ci-event time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.76rem; }
.ci-dot { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg) translateY(-1px); background: var(--ci-ev-release); }
.ci-event.is-reprint .ci-dot, .ci-mk.is-reprint { --ci-c: var(--ci-ev-reprint); }
.ci-event.is-reprint .ci-dot { background: var(--ci-ev-reprint); }
.ci-event.is-rotation .ci-dot { background: var(--ci-ev-rotation); }
.ci-event.is-move .ci-dot { background: var(--ci-ev-move); }
.ci-event.is-glitch .ci-dot { background: var(--ci-ev-glitch); }
.ci-events .tiny { margin: 0.55rem 0 0; }
@media (max-width: 420px) {
  .ci-event { grid-template-columns: 0.6rem 1fr; }
  .ci-event span:last-child { grid-column: 2; }
}

/* markers over the Market Lab chart */
.ci-marks { position: absolute; left: 0; top: 0; right: 0; height: 200px; pointer-events: none; opacity: 0;
  transition: opacity 0.4s var(--ease); z-index: 3; }
.ci-marks.is-on { opacity: 1; }
.ci-mk { --ci-c: var(--ci-ev-release); position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.ci-mk.is-reprint { --ci-c: var(--ci-ev-reprint); }
.ci-mk.is-rotation { --ci-c: var(--ci-ev-rotation); }
.ci-mk.is-move { --ci-c: var(--ci-ev-move); }
.ci-mk.is-glitch { --ci-c: var(--ci-ev-glitch); }
.ci-mk > i { position: absolute; left: -0.5px; top: 0; bottom: 0; width: 1px; opacity: 0.5;
  background: repeating-linear-gradient(180deg, var(--ci-c) 0 3px, transparent 3px 6px); }
.ci-mk > b { position: absolute; left: -7px; bottom: -7px; width: 14px; height: 14px; pointer-events: auto; cursor: pointer; }
.ci-mk > b::after { content: ""; position: absolute; inset: 3px; border-radius: 2px; transform: rotate(45deg);
  background: var(--ci-c); box-shadow: 0 0 0 2px var(--ml-surface, var(--panel)); transition: transform 0.2s var(--ease); }
.ci-mk:hover > b::after, .ci-mk.is-open > b::after { transform: rotate(45deg) scale(1.35); }
.ci-mk-tip { position: absolute; left: 10px; bottom: 12px; min-width: 11rem; max-width: 16rem; padding: 0.5rem 0.65rem;
  border-radius: 12px; font-size: 0.74rem; line-height: 1.35; color: var(--ink); background: var(--elev);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.8), inset 0 0 0 1px var(--line); opacity: 0; transform: translateY(4px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); pointer-events: none; }
.ci-mk.tip-left .ci-mk-tip { left: auto; right: 10px; }
.ci-mk:hover .ci-mk-tip, .ci-mk.is-open .ci-mk-tip { opacity: 1; transform: none; }
.ci-mk-tip small { display: block; color: var(--muted); font-weight: 700; margin-bottom: 0.15rem; }
.ci-mk-row { display: block; }
.ci-mk-row + .ci-mk-row { margin-top: 0.2rem; }

/* ------------------------------------------------------------ search */
.ci-searchbar { display: flex; gap: 0.6rem; align-items: stretch; flex-wrap: wrap; }
.ci-q { flex: 1 1 260px; min-width: 0; position: relative; }
.ci-q input { width: 100%; font-family: var(--mono); font-size: 0.95rem; letter-spacing: -0.01em; }
.ci-q input.ci-written { animation: ci-flash 0.6s var(--ease); }
@keyframes ci-flash { from { opacity: 0.55; transform: translateY(1px); } to { opacity: 1; transform: none; } }
.ci-search-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; margin-top: 0.65rem;
  font-size: 0.8rem; color: var(--muted); }
.ci-search-links a { display: inline-flex; align-items: center; gap: 0.3rem; }
.ci-filters { margin-top: 0.8rem; border-top: 1px solid var(--line); padding-top: 0.7rem; }
.ci-filters > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 800; font-size: 0.86rem; color: var(--ink-dim); }
.ci-filters > summary::-webkit-details-marker { display: none; }
.ci-filters > summary::after { content: "▾"; font-size: 0.75rem; color: var(--muted); transition: transform 0.2s var(--ease); }
.ci-filters[open] > summary::after { transform: rotate(180deg); }
.ci-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 0.6rem 0.8rem; margin-top: 0.8rem; }
.ci-fgrid .field { margin: 0; min-width: 0; }
.ci-fgrid .field select, .ci-fgrid .field input { width: 100%; }
.ci-fprice { grid-column: span 2; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0.5rem; }
.ci-flags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.ci-flag { position: relative; }
.ci-flag input { position: absolute; opacity: 0; pointer-events: none; }
.ci-flag span { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.32rem 0.7rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; cursor: pointer; color: var(--ink-dim); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.ci-flag input:checked + span { color: #10131a; background: var(--foil); box-shadow: none; }
.ci-flag input:focus-visible + span { outline: 2px solid var(--ice); outline-offset: 2px; }
.ci-factions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.8rem; }
@media (max-width: 520px) { .ci-fprice { grid-column: 1 / -1; } }

.ci-result-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0 0 0.9rem;
  font-size: 0.82rem; color: var(--muted); }
.ci-chip { display: inline-flex; align-items: center; padding: 0.18rem 0.6rem; border-radius: 999px; font-size: 0.74rem;
  font-weight: 700; color: var(--ink-dim); background: rgba(191, 232, 247, 0.07); box-shadow: inset 0 0 0 1px rgba(191, 232, 247, 0.18); }
:root[data-theme="light"] .ci-chip { background: rgba(47, 111, 137, 0.06); box-shadow: inset 0 0 0 1px rgba(47, 111, 137, 0.2); }
.ci-error { margin: 0 0 1.2rem; padding: 0.9rem 1rem; border-radius: 16px; background: rgba(224, 115, 106, 0.08);
  box-shadow: inset 0 0 0 1px rgba(224, 115, 106, 0.32); }
.ci-error p { margin: 0; }
.ci-error .ci-err-msg { font-weight: 800; }
.ci-error code { font-family: var(--mono); font-size: 0.85rem; white-space: pre-wrap; word-break: break-all; }
.ci-error mark { color: inherit; background: rgba(224, 115, 106, 0.3); border-radius: 3px; padding: 0 1px; }
.ci-error .ci-err-hint { margin-top: 0.4rem; font-size: 0.85rem; color: var(--ink-dim); }

/* ------------------------------------------------------------ syntax guide */
.ci-syn-hero { position: relative; padding: clamp(1.2rem, 4vw, 2.2rem); border-radius: 24px; margin-bottom: 1.4rem;
  background: radial-gradient(120% 140% at 0% 0%, rgba(191, 232, 247, 0.12), transparent 55%),
              radial-gradient(90% 120% at 100% 100%, rgba(206, 198, 246, 0.12), transparent 60%), var(--panel);
  box-shadow: var(--ci-rim); overflow: hidden; }
.ci-syn-hero h1 { margin: 0.2rem 0 0.5rem; font-size: clamp(1.8rem, 5vw, 2.8rem); letter-spacing: -0.03em; }
.ci-syn-hero p { max-width: 42rem; color: var(--ink-dim); margin: 0 0 1rem; }
.ci-try { display: flex; gap: 0.5rem; flex-wrap: wrap; max-width: 44rem; }
.ci-try input { flex: 1 1 240px; min-width: 0; font-family: var(--mono); }
.ci-examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.7rem; margin: 0 0 1.6rem; }
.ci-example { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.8rem 0.9rem; border-radius: 16px;
  text-decoration: none; color: var(--ink); background: var(--ci-surface); box-shadow: var(--ci-rim);
  transition: transform 0.2s var(--ease); }
.ci-example:hover, .ci-example:focus-visible { transform: translateY(-2px); }
.ci-example code { font-family: var(--mono); font-size: 0.82rem; color: var(--gold); word-break: break-word; }
.ci-example span { font-size: 0.82rem; color: var(--muted); }
.ci-syn-sec { margin: 0 0 1.4rem; }
.ci-syn-sec h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.ci-syn-table { width: 100%; border-collapse: collapse; }
.ci-syn-table th, .ci-syn-table td { text-align: left; vertical-align: top; padding: 0.55rem 0.6rem;
  border-top: 1px solid var(--line); font-size: 0.86rem; }
.ci-syn-table th { width: 38%; font-weight: 400; }
.ci-syn-table th a { display: inline-block; margin: 0 0.25rem 0.3rem 0; text-decoration: none; }
.ci-syn-table code { display: inline-block; padding: 0.14rem 0.5rem; border-radius: 8px; font-family: var(--mono); font-size: 0.8rem;
  color: var(--gold); background: rgba(191, 232, 247, 0.07); box-shadow: inset 0 0 0 1px rgba(191, 232, 247, 0.14);
  white-space: pre-wrap; word-break: break-word; transition: background-color 0.2s var(--ease); }
.ci-syn-table a:hover code { background: rgba(191, 232, 247, 0.16); }
:root[data-theme="light"] .ci-syn-table code { background: rgba(47, 111, 137, 0.06); box-shadow: inset 0 0 0 1px rgba(47, 111, 137, 0.18); }
.ci-syn-table td { color: var(--ink-dim); }
@media (max-width: 560px) {
  .ci-syn-table, .ci-syn-table tbody, .ci-syn-table tr, .ci-syn-table th, .ci-syn-table td { display: block; width: 100%; }
  .ci-syn-table td { border-top: 0; padding-top: 0; }
}

/* ------------------------------------------------------------ Reprint Radar */
.ci-radar-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.2rem; }
.ci-radar-tabs a { padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; text-decoration: none;
  color: var(--ink-dim); box-shadow: inset 0 0 0 1px var(--line-2); }
.ci-radar-tabs a[aria-current] { color: #10131a; background: var(--foil); box-shadow: none; }
.ci-set { margin: 0 0 1.6rem; }
.ci-set-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 0.7rem; }
.ci-set-head h2 { margin: 0; font-size: 1.2rem; }
.ci-rp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.8rem; }
.ci-rp { display: grid; grid-template-columns: 76px 1fr; gap: 0.8rem; padding: 0.8rem; border-radius: 18px;
  background: var(--ci-surface); box-shadow: var(--ci-rim); min-width: 0; }
.ci-rp.is-mine { box-shadow: var(--ci-rim), 0 0 0 1px rgba(86, 192, 138, 0.45); }
.ci-rp-art { position: relative; display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 63 / 88; background: var(--panel-2); }
.ci-rp-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-rp-body { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ci-rp-title { margin: 0; font-weight: 800; font-size: 0.95rem; line-height: 1.25; }
.ci-rp-title a { color: var(--ink); }
.ci-kind { display: inline-block; padding: 0.06rem 0.45rem; border-radius: 999px; font-size: 0.64rem; font-weight: 900;
  letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 0.12em; }
.ci-kind.is-art { color: #10131a; background: var(--foil); }
.ci-kind.is-text { color: var(--ink-dim); box-shadow: inset 0 0 0 1px var(--line-2); }
.ci-rp-old { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ci-rp-old li { display: grid; grid-template-columns: 30px 1fr; gap: 0.5rem; align-items: center; font-size: 0.78rem; min-width: 0; }
.ci-rp-old img { width: 30px; border-radius: 3px; display: block; }
.ci-rp-old .ci-move { display: block; font-variant-numeric: tabular-nums; }
.ci-up { color: var(--pos); font-weight: 800; }
.ci-down { color: var(--neg); font-weight: 800; }

/* ------------------------------------------------------------ Art pages */
.ci-art-hero { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: clamp(1.2rem, 4vw, 2.6rem);
  align-items: center; margin-bottom: 1.8rem; }
@media (max-width: 700px) { .ci-art-hero { grid-template-columns: 1fr; } .ci-art-card { max-width: 240px; margin: 0 auto; } }
.ci-art-card { position: relative; display: block; border-radius: 4.6% / 3.35%; overflow: hidden; isolation: isolate;
  transform: rotate(-2.5deg); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.9), 0 0 60px -20px rgba(191, 232, 247, 0.4); }
.ci-art-card img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 825; object-fit: cover; }
.ci-art-card .ci-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.24) 46%, transparent 58%);
  transform: translateX(-70%); animation: ci-sweep 6.5s ease-in-out infinite; }
@keyframes ci-sweep { 0%, 55% { transform: translateX(-70%); } 85%, 100% { transform: translateX(70%); } }
.ci-art-copy h1 { margin: 0.2rem 0 0.4rem; font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: -0.03em; }
.ci-art-copy .ci-lede { color: var(--ink-dim); margin: 0 0 1rem; max-width: 40rem; }
.ci-art-stats { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.ci-art-stat { padding: 0.7rem 1rem; border-radius: 16px; background: var(--ci-surface); box-shadow: var(--ci-rim); font-size: 0.84rem; }
.ci-art-stat b { display: block; font-size: 1.3rem; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ci-art-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.ci-art-item { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.ci-art-item > a { display: block; position: relative; border-radius: 9px; overflow: hidden; aspect-ratio: 63 / 88;
  background: var(--panel-2); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.85); transition: transform 0.25s var(--ease); }
.ci-art-item > a:hover, .ci-art-item > a:focus-visible { transform: translateY(-4px); }
.ci-art-item > a img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-art-item.is-cheapest > a { box-shadow: 0 0 0 2px var(--ice), 0 16px 34px -14px rgba(191, 232, 247, 0.5); }
.ci-art-item h3 { margin: 0; font-size: 0.86rem; line-height: 1.25; }
.ci-art-item h3 a { color: var(--ink); }
.ci-art-item .ci-meta { font-size: 0.72rem; color: var(--muted); }
.ci-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.2rem; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.ci-quotes span { display: flex; flex-direction: column; padding: 0.3rem 0.35rem; border-radius: 8px; background: rgba(255, 255, 255, 0.03); }
:root[data-theme="light"] .ci-quotes span { background: rgba(20, 24, 28, 0.03); }
.ci-quotes small { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ci-best { align-self: flex-start; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.64rem; font-weight: 900;
  letter-spacing: 0.06em; text-transform: uppercase; color: #10131a; background: var(--foil); }
.ci-art-index { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.ci-art-index a { display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none; color: var(--ink); }
.ci-art-index .ci-stack { position: relative; display: block; aspect-ratio: 63 / 88; }
.ci-art-index .ci-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
  box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.85); }
.ci-art-index .ci-stack::before, .ci-art-index .ci-stack::after { content: ""; position: absolute; inset: 0; border-radius: 8px;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.ci-art-index .ci-stack::before { transform: rotate(-5deg) translate(-4px, 2px); }
.ci-art-index .ci-stack::after { transform: rotate(4deg) translate(4px, 1px); }
.ci-art-index .ci-stack img { z-index: 1; transition: transform 0.25s var(--ease); }
.ci-art-index a:hover .ci-stack img { transform: translateY(-3px) rotate(-1deg); }
.ci-art-index b { font-size: 0.84rem; line-height: 1.2; }
.ci-art-index small { font-size: 0.72rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .ci-art-card .ci-sheen { animation: none; opacity: 0; }
  .ci-q input.ci-written { animation: none; }
  .ci-twin-art, .ci-art-item > a, .ci-example, .ci-art-index .ci-stack img, .ci-mk-tip, .ci-marks { transition: none; }
}

/* ------------------------------------------------------------ saved searches */
.ci-saved { list-style: none; margin: 0 0 0.8rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.ci-saved-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
  padding: 0.8rem 1rem; border-radius: 16px; background: var(--ci-surface); box-shadow: var(--ci-rim); }
.ci-saved-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1 1 260px; }
.ci-saved-name { font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.ci-saved-q { font-family: var(--mono); font-size: 0.78rem; color: var(--gold); overflow-wrap: anywhere; }
.ci-saved-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ci-saved-actions form { margin: 0; }
.ci-save { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: -0.4rem 0 1rem; }
.ci-save form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.ci-save input[type=text] { min-width: 0; width: 15rem; max-width: 100%; }
.ci-savebox { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ci-savebox > summary { list-style: none; cursor: pointer; }
.ci-savebox > summary::-webkit-details-marker { display: none; }
.ci-savebox[open] > summary { box-shadow: inset 0 0 0 1px var(--ice); }
.ci-tpl-sec { margin: 1.8rem 0 0; }
.ci-tpl-sec h2 { font-size: 1.05rem; margin: 0 0 0.7rem; }
.ci-tpls { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.8rem; }
.ci-tpl form { height: 100%; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.9rem 1rem; border-radius: 18px;
  background: var(--ci-surface); box-shadow: var(--ci-rim); }
.ci-tpl-title { margin: 0; font-weight: 800; }
.ci-tpl-line { margin: 0; font-size: 0.82rem; color: var(--muted); }
.ci-tpl-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.5rem; }
.ci-tpl-fields input { width: 100%; }
.ci-tpl-foot { margin: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.3rem; }
.ci-tpl-foot code { font-family: var(--mono); font-size: 0.72rem; color: var(--gold); overflow-wrap: anywhere; }
.ci-alike { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--ci-rule); }
.ci-alike.is-alone { margin-top: 0; padding-top: 0; border-top: 0; }
.ci-alike h3 { margin: 0; font-size: 0.95rem; }
.ci-alike .tiny { margin: 0.2rem 0 0.6rem; }
.ci-alike-row { list-style: none; margin: 0; padding: 0 0 0.3rem; display: grid; grid-auto-flow: column; grid-auto-columns: 92px;
  gap: 0.6rem; overflow-x: auto; }
.ci-alike-row a { display: flex; flex-direction: column; gap: 0.1rem; color: var(--ink); text-decoration: none; }
.ci-alike-row a:hover .ci-twin-art, .ci-alike-row a:focus-visible .ci-twin-art { transform: translateY(-3px); }

/* ------------------------------------------------------------ search by picture */
.ci-pic { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin-top: 0.7rem; }
.ci-pic-btn { cursor: pointer; }
.ci-pic-btn:focus-within { outline: 2px solid var(--ice); outline-offset: 2px; }
.ci-pic-out { flex-basis: 100%; width: 100%; min-width: 0; margin-top: 0.4rem; padding: 0.8rem 0.9rem; border-radius: 16px; background: var(--ci-surface);
  box-shadow: var(--ci-rim); font-size: 0.86rem; }
.ci-pic-out h3 { margin: 0.2rem 0 0; font-size: 0.95rem; }
.ci-pic-out h3 + .tiny { margin: 0.15rem 0 0.5rem; }
.ci-pic-row { display: grid; grid-auto-flow: column; grid-auto-columns: 96px; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.4rem;
  margin-bottom: 0.4rem; }
.ci-pic-card { display: flex; flex-direction: column; gap: 0.1rem; color: var(--ink); text-decoration: none; min-width: 0; }
.ci-pic-card:hover .ci-twin-art, .ci-pic-card:focus-visible .ci-twin-art { transform: translateY(-3px); }

/* ------------------------------------------------------------ tags */
.ci-tags { list-style: none; margin: -0.3rem 0 0.9rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ci-tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.74rem;
  font-weight: 700; color: var(--ink-dim); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color 0.2s var(--ease); }
.ci-tag:hover, .ci-tag:focus-visible { background: var(--surface-2); }
.ci-tag.is-first { color: #10131a; background: var(--foil); box-shadow: none; }
.ci-tag.is-first:hover { background: var(--foil); filter: brightness(1.05); }
.ci-tag[class*="is-colour-"]::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ci-swatch, #888); }
.ci-tag.is-colour-red { --ci-swatch: #e05252; } .ci-tag.is-colour-orange { --ci-swatch: #ee8a3c; }
.ci-tag.is-colour-yellow { --ci-swatch: #efcf3e; } .ci-tag.is-colour-green { --ci-swatch: #58b368; }
.ci-tag.is-colour-teal { --ci-swatch: #3fb8b0; } .ci-tag.is-colour-blue { --ci-swatch: #3f86e0; }
.ci-tag.is-colour-purple { --ci-swatch: #9b61d6; } .ci-tag.is-colour-pink { --ci-swatch: #e888bf; }
.ci-tag.is-colour-neutral { --ci-swatch: linear-gradient(90deg, #fff, #111); }

/* scrolling rows: width 0 + min-width 100% keeps a long row from widening the
   page's grid column (its min-content would be every tile side by side) */
.ci-twin-row, .ci-alike-row, .ci-pic-row { width: 0; min-width: 100%; }