/* ═══════════════════════════════════════════════════════════════════════════
   cardamomtools.css - stylesheet for /cardamomtools/

   Deliberately standalone: this page does NOT link /style.css. The URL of this
   page goes into the shipped plugin metadata and cannot change, so the page must
   not inherit a stylesheet that the site redesign is going to rewrite underneath
   it. Tokens below are copied from the module artwork, not imported.

   Palette source: the panel SVGs. Paper #ECE5D3 is the panel cream, ink #2A241B
   is the printed ink, and --accent is set per item from its own artwork.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-v22-latin-500.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-v22-latin-600.ttf') format('truetype');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-v22-latin-700.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

:root {
  --paper:   #E7DFCC;   /* page stock, a shade deeper than the panels */
  --panel:   #ECE5D3;   /* the panel cream itself */
  --ink:     #2A241B;
  --ink-mid: #6B6354;
  --ink-dim: #9A9181;
  --rule:    rgba(42, 36, 27, .16);
  --rule-2:  rgba(42, 36, 27, .09);
  --accent:  #6B6A62;   /* replaced per item by main.js */
  --rr:      10px;
  --maxw:    1080px;
}

*, *::before, *::after { box-sizing: border-box; }

/* The strip is sticky, so any anchor landing would put the item name underneath
   it. This offset is the static fallback and applies before scripts run, which
   matters because the browser jumps to the fragment on load; main.js then
   refines it from the strip's measured height, which differs per collection. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 240px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* Visually hidden but read by screen readers and indexed. Used for headings whose
   visible form is artwork with the name drawn as outlines. */
.ct-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ── Nav ── */

.ct-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--rule-2);
}
.ct-brand {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--ink); text-decoration: none;
  font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
}
.ct-back {
  color: var(--ink-mid); text-decoration: none;
  font-size: .8rem; letter-spacing: .04em;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color .18s, border-color .18s;
}
.ct-back:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Hero ── */

.ct-hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.2rem, 6vw, 3.6rem) clamp(1rem, 4vw, 2.5rem) 0;
  text-align: center;
}
.ct-lede {
  max-width: 44ch; margin: 0 auto;
  color: var(--ink-mid); font-size: clamp(.95rem, 1.6vw, 1.06rem);
  text-wrap: balance;
}

/* ── Collection switcher ──
   Two lockups from design, side by side. They are the page's entry point, which
   is why there is no separate hero logo above them. */

.ct-switch {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1rem, 4vw, 2.5rem) clamp(1.2rem, 3vw, 2rem);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(.8rem, 2vw, 1.4rem);
}
/* No card, no chrome: the lockups stand on the paper and the live one is simply
   the one that is not faded. A bordered box around a logo reads as a stock
   template, and it would also fight the framed TOOLS band inside the lockup. */
.ct-switch-btn {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: clamp(.9rem, 2.2vw, 1.4rem) 1rem;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; color: var(--ink);
  opacity: .38;
  transition: opacity .22s;
}
.ct-switch-btn:hover { opacity: .68; }
.ct-switch-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.ct-switch-btn.on { opacity: 1; }

/* A short rule under the live lockup, in the wordmark's own red. */
.ct-switch-btn::after {
  content: ''; display: block;
  width: 0; height: 2px; margin-top: .25rem;
  background: #C7402E;
  transition: width .28s cubic-bezier(.22, .61, .36, 1);
}
.ct-switch-btn.on::after { width: 46px; }

/* One finished lockup per collection. Both files carry the same viewBox, so
   sizing by width alone is enough to keep the two marks in step. */
.ct-sw-logo {
  width: clamp(230px, 30vw, 330px); height: auto; display: block;
}

.ct-sw-count {
  font-size: .66rem; letter-spacing: .05em; color: var(--ink-dim);
}

.ct-collection-lede {
  max-width: 54ch; margin: 0 auto clamp(1.2rem, 3vw, 1.8rem);
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  color: var(--ink-mid); font-size: clamp(.95rem, 1.6vw, 1.04rem);
  text-align: center; text-wrap: balance;
}
.ct-collection-lede span { display: block; }

/* ── Strip ──
   One treatment for both collections: artwork lined up at a common height, the
   way a rack row reads. For modules that height gives the fourteen panels their
   true relative widths and comes to roughly 1300px, so a wide screen shows the
   whole collection at once and narrower ones scroll.
   The max-width on the artwork is a guard, not a design: plugin windows do not
   yet share an aspect ratio, and until they are re-exported to a common frame an
   uncapped one would run away with the row. */

.ct-strip-wrap {
  position: sticky; top: 0; z-index: 10;
  background: var(--paper);
  border-block: 1px solid var(--rule-2);
}
.ct-strip {
  display: flex; gap: 3px; align-items: flex-end; justify-content: center;
  padding: .85rem clamp(1rem, 4vw, 2.5rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
}
.ct-strip::-webkit-scrollbar { height: 5px; }
.ct-strip::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }

.ct-chip {
  flex: 0 0 auto;
  background: none; border: 0; padding: 0;
  cursor: pointer; line-height: 0;
  border-radius: 3px;
  transition: transform .22s cubic-bezier(.22, .61, .36, 1), filter .22s;
}
.ct-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ct-chip-panel {
  width: auto; height: 190px; max-width: 320px; object-fit: contain;
  display: block; border-radius: 2px;
  filter: saturate(.55) brightness(.94);
  transition: filter .22s, box-shadow .22s;
}
.ct-chip:hover { transform: translateY(-3px); }
.ct-chip:hover .ct-chip-panel { filter: saturate(.85) brightness(1); }
.ct-chip.on { transform: translateY(-6px); }
.ct-chip.on .ct-chip-panel {
  filter: none;
  box-shadow: 0 0 0 1px var(--accent), 0 8px 18px rgba(42, 36, 27, .22);
}

/* ── Detail: the expanding region ──
   grid-template-rows 0fr -> 1fr animates to the content's own height without a
   hardcoded max-height, so a long item and a short one both land correctly. */

.ct-detail {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.22, .61, .36, 1);
}
.ct-detail.open { grid-template-rows: 1fr; }
.ct-detail > * { overflow: hidden; min-height: 0; }

.ct-mod {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1rem, 4vw, 2.5rem) clamp(3rem, 6vw, 4.5rem);
  animation: ct-in .42s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes ct-in {
  from { opacity: 0; transform: translateY(14px); }
}

/* ── Item header ── */

.ct-mod-head {
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
  padding-bottom: 2rem; border-bottom: 1px solid var(--rule-2);
}
.ct-plug-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.ct-title-art {
  display: block; width: auto; height: clamp(74px, 9vw, 104px);
  margin-left: -2px;
}
.ct-plug-name {
  margin: 0; font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  font-weight: 700; letter-spacing: -.025em; line-height: 1.05;
  color: var(--accent);
}
.ct-tagline {
  margin: 1rem 0 0; font-size: clamp(1rem, 2vw, 1.14rem);
  color: var(--ink); font-weight: 500;
}
.ct-plug-name + .ct-tagline { margin-top: .45rem; }
.ct-tags {
  display: flex; flex-wrap: wrap; gap: .34rem;
  margin: 1.1rem 0 0; padding: 0; list-style: none;
}
.ct-tags li {
  font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-mid);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: .24rem .62rem;
}
.ct-tags .ct-hp {
  color: var(--panel); background: var(--accent); border-color: var(--accent);
}
.ct-panel {
  width: auto; height: clamp(300px, 36vw, 420px);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(42, 36, 27, .16), 0 10px 26px rgba(42, 36, 27, .13);
}
.ct-plug-shot {
  width: 100%; height: auto; border-radius: 4px; background: #0a0a0a;
  box-shadow: 0 1px 2px rgba(42, 36, 27, .16), 0 10px 26px rgba(42, 36, 27, .13);
}
/* A wide window takes the whole entry, under the name, at its captured size. */
.ct-plug-wide { grid-template-columns: 1fr; }
.ct-plug-wide .ct-plug-shot { width: auto; max-width: 100%; }

/* ── Prose ── */

.ct-lore {
  max-width: 62ch; margin: 2.2rem 0 0;
  font-size: clamp(1.02rem, 2vw, 1.16rem); line-height: 1.66;
  color: var(--ink-mid); font-style: italic;
  border-left: 2px solid var(--accent); padding-left: 1.15rem;
}
.ct-intro {
  max-width: 62ch; margin: 1.7rem 0 0;
  font-size: clamp(1rem, 1.8vw, 1.08rem);
}

/* ── Blocks ── */

.ct-block { margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.ct-block > h4 {
  margin: 0 0 1.2rem;
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-dim);
  padding-bottom: .6rem; border-bottom: 1px solid var(--rule-2);
}

/* Section heading inside a block, for a panel divided into named parts. */
.ct-group {
  margin: 2rem 0 .9rem;
  font-size: .86rem; font-weight: 700; letter-spacing: .02em;
  color: var(--accent);
}
.ct-group:first-of-type { margin-top: 0; }

.ct-dl { margin: 0; }
.ct-dl dt { padding-top: 1.15rem; border-top: 1px solid var(--rule-2); }
.ct-dl dt:first-of-type { border-top: 0; padding-top: 0; }
.ct-dl dd { margin: 0 0 1.15rem; padding-top: .2rem; }
.ct-dl dd:last-child { margin-bottom: 0; }
.ct-name {
  display: flex; align-items: center; gap: .45rem;
  font-size: .92rem; font-weight: 700;
  letter-spacing: .04em; color: var(--ink);
}
/* The symbol printed beside a knob on the panel, shown beside its name. */
.ct-mark { width: 22px; height: 22px; flex: 0 0 auto; display: block; }
.ct-range {
  display: block; font-size: .78rem; color: var(--accent); font-weight: 600;
}
/* The CV scale rides on the kind line; it wraps as a unit on a narrow column. */
.ct-scale { white-space: nowrap; font-weight: 500; }
.ct-scale::before { content: "\00B7"; margin: 0 .4em; }
.ct-panel-label {
  display: block; font-size: .72rem; color: var(--ink-dim); letter-spacing: .03em;
}
.ct-dl dd p { margin: 0; max-width: 62ch; }
.ct-note { margin: 0 0 .9rem; max-width: 62ch; }
.ct-note:last-child { margin-bottom: 0; }

/* Two columns once there is room: term on the left, description on the right. */
@media (min-width: 780px) {
  .ct-dl {
    display: grid; grid-template-columns: minmax(150px, 210px) 1fr;
    column-gap: clamp(1rem, 3vw, 2.2rem);
  }
  .ct-dl dt { grid-column: 1; padding-bottom: 1.15rem; }
  .ct-dl dd {
    grid-column: 2; padding-top: 1.15rem; padding-bottom: 1.15rem;
    margin-bottom: 0; border-top: 1px solid var(--rule-2);
  }
  .ct-dl dt:first-of-type + dd { border-top: 0; padding-top: 0; }
}

/* ── Selector icons (the ones printed on the panel) ── */

.ct-icons {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1rem 0 0; padding: 0; list-style: none;
}
.ct-icons li {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 7px; padding: .5rem .55rem .4rem; min-width: 62px;
}
.ct-icons img { width: 34px; height: 34px; display: block; }
.ct-icons span {
  font-size: .64rem; letter-spacing: .05em; font-weight: 600;
  color: var(--ink-mid); text-transform: uppercase;
}

/* Positions that carry their own explanation: equal columns, symbol and name on
   top, the text underneath, all left-aligned so the three read as parallel. */
.ct-icons-desc {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .7rem; margin-top: 1.1rem;
}
.ct-icons-desc li {
  align-items: center;
  gap: .45rem; padding: .85rem .9rem .95rem; min-width: 0;
}
/* Symbol, name and text all centred, so each card is symmetric on its own axis. */
.ct-icons-desc span { font-size: .72rem; color: var(--ink); text-align: center; }
.ct-icons-desc p {
  align-self: stretch; text-align: center;
  margin: .2rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink-mid);
}

/* ── Plugin specification and release ── */

.ct-specs { margin: 0; padding: 0; list-style: none; }
.ct-specs li {
  padding: .5rem 0 .5rem 1.1rem; position: relative;
  border-bottom: 1px solid var(--rule-2);
  font-size: .92rem; color: var(--ink-mid); max-width: 62ch;
}
.ct-specs li:last-child { border-bottom: 0; }
.ct-specs li::before {
  content: ''; position: absolute; left: 0; top: 1.05em;
  width: 5px; height: 1px; background: var(--accent);
}

.ct-meta {
  display: grid; grid-template-columns: auto 1fr;
  gap: .25rem 1.2rem; margin: 0; font-size: .8rem;
  max-width: 24rem;
}
.ct-meta dt {
  color: var(--ink-dim); letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600;
}
.ct-meta dd { margin: 0; color: var(--ink); }

.ct-dl-link {
  display: inline-block; margin-top: 1.6rem;
  padding: .58rem 1.2rem; border-radius: 999px;
  background: var(--accent); color: var(--panel);
  text-decoration: none; font-size: .82rem; font-weight: 600;
  letter-spacing: .03em;
  transition: filter .18s, transform .18s;
}
.ct-dl-link:hover { filter: brightness(1.12); transform: translateY(-1px); }
.ct-dl-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.ct-pending {
  margin: 2.2rem 0 0; padding: 1.1rem 1.3rem;
  background: var(--panel); border: 1px dashed var(--rule);
  border-radius: var(--rr); color: var(--ink-mid); max-width: 52ch;
}

/* ── Footer ── */

.ct-foot {
  max-width: var(--maxw); margin: 0 auto;
  padding: 2.2rem clamp(1rem, 4vw, 2.5rem) 3rem;
  border-top: 1px solid var(--rule-2);
  color: var(--ink-dim); font-size: .78rem;
}
.ct-foot p { margin: .25rem 0; }

/* ── Narrow ── */

@media (max-width: 760px) {
  .ct-switch { grid-template-columns: 1fr; }
  .ct-mod-head, .ct-plug-head { grid-template-columns: 1fr; }
  .ct-panel { height: 320px; justify-self: start; }
  .ct-strip { justify-content: flex-start; }
  .ct-chip-panel { height: 140px; }
  .ct-chip-panel { max-width: 240px; }

  html { scroll-padding-top: 190px; }
}

/* ── Short or narrow ──
   The strip is about 230px tall, so stuck to the top it holds a third of a
   1280x720 laptop and a quarter of a 1080p window while the entry underneath is
   being read. It stays stuck only where it costs at most a fifth of the height,
   which is 1150px and up; below that, and on phones, it scrolls away with the
   page and the reader goes back up to change item. main.js drops the anchor
   offset to match. */
@media (max-height: 1150px), (max-width: 760px) {
  .ct-strip-wrap { position: static; }

  html { scroll-padding-top: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ct-detail { transition: none; }
  .ct-mod { animation: none; }
  .ct-chip, .ct-chip-panel, .ct-back, .ct-switch-btn { transition: none; }
  .ct-chip:hover, .ct-chip.on, .ct-switch-btn:hover { transform: none; }
}