/* showcase.css — one stylesheet, two themes.
 *
 * Supported subset (lib/evg/EVGStyleSheet.rgr):
 *   .class                  applies in every theme
 *   .theme-<name> .class    applies only when that theme is active
 *   .a, .b { ... }          selector lists
 *
 * Cascade: unscoped < theme-scoped < attributes authored in the TSX.
 *
 * Nothing in lib/evg/showcase/pages/*.tsx carries a visual attribute.
 * Everything below the "structure" block is a theme talking.
 */

/* ==== structure, shared by both themes ================================== */

.page {
  width: 100%;
  height: 100%;
}

.row {
  flex-direction: row;
  width: 100%;
}

.rule {
  height: 3px;
  width: 88px;
}

/* ---- album: the spread is a picture of named areas --------------------- */
.spread {
  display: grid;
  width: 100%;
  height: 512px;
  grid-template-areas: "hero hero" "a b" "wide wide";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 220px 150px 110px;
}
.hero { grid-area: hero; }
.wide { grid-area: wide; }
.cell {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* ---- cards: each card adopts the deck's rows, so captions line up ------ */
.deck {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 170px auto;
}
.card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: subgrid;
  grid-row: 1 / 3;
}
.shot {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* ---- units: every bar the same length, five ways ----------------------- */
.bar   { height: 22px; }
.u-px  { width: 192px; }
.u-pt  { width: 144pt; }
.u-in  { width: 2in; }
.u-mm  { width: 50.8mm; }
.u-cm  { width: 5.08cm; }
.scope { font-size: 24px; width: 100%; }
.u-em  { width: 8em; }
.u-rem { width: 8rem; }
.half  { width: 50%; }
.u-pct { width: 100%; }

/* ---- flex -------------------------------------------------------------- */
.grow1    { flex: 1; }
.grow2    { flex: 2; }
.noshrink { flex-shrink: 0; width: 120px; }
.between  { justify-content: space-between; }
.wrapping { flex-wrap: wrap; }
.chip     { width: 90px; }
.tile     { width: 110px; }

/* ---- box model --------------------------------------------------------- */
.demo     { flex: 1; height: 90px; }
.padded   { padding: 14px; }
.padSides { padding-top: 4px; padding-right: 20px; padding-bottom: 24px; padding-left: 8px; }
.bordered { padding: 10px; border-width: 3px; }
.inner    { width: 100%; height: 22px; }
.marA     { margin-bottom: 10px; }
.marB     { margin-top: 10px; margin-left: 24px; width: 80%; }
.nest     { padding: 12px; width: 100%; }
.l4       { height: 24px; }

/* ---- emoji: cluster specimens and a tint of their own ------------------ */
.seqRow  { flex-direction: row; width: 100%; }
.seqText { flex: 1; }

/* ---- vector: geometry in the page, size and colour here ---------------- */
/* `d` and `viewBox` live in the TSX because they are the shape itself. Every
 * other property of these paths is a theme decision, including how big they
 * are — a viewBox means the same drawing scales to any box without changing. */
.vecRow  { align-items: center; }
.icon    { }
.shape   { }
.evenodd { fill-rule: evenodd; }

/* ---- imported svg: geometry in the file, size and colour here ---------- */
/* rosette.svg names no colours, so the fill below is what its shapes inherit
 * — the same relationship a hand-written <Path> has with its fill, extended to
 * a file the gallery does not own. emblem.svg brings its own palette and keeps
 * it, so only its size is a theme decision. */
.art     { }
.emblem  { }

/* ---- charts: geometry from the data, colour from the theme ------------- */
/* The one generated page in this gallery, and it follows the same rule as the
   hand-written ones: the tree says what is drawn, the theme says how it looks.
   A chart's series are numbered in the order it draws them, so `chartFill0` is
   whatever the first series happens to be. Stroke widths and opacities stay in
   the tree — they were computed from the data, not chosen. The charts are drawn
   on a TRANSPARENT background: the page shows through. */
.chart     { }
/* A chart keeps its own width — the drawing's, not the column's — so the
   wrapper is what centres it. Without this a pie, which has no axis to make
   room for, sits against the left edge of a column sized for a bar chart. */
.chartBox  { width: 100%; align-items: center; }
.chartRow  { align-items: flex-start; }
/* HALVES OF THE PAGE, not of their contents. `min-width: 0` is the whole
   difference: without it a flex item may not be sized below its min-content
   width, so a chart wider than half the row widens its own column, the two
   columns no longer add up to the row, and the pair either hangs off the
   right (nowrap) or drops onto two lines (EVG's default). Two equal columns
   is what this page is; a drawing too wide for its half overflows its column
   evenly on both sides, into the gutter and the margin, which is what
   centring means. */
.chartCell { flex: 1; min-width: 0; }

/* ---- the chart api page: the calls, beside the chart they built -------- */
/* The one page in this gallery whose charts came from a program rather than
   from a specification, so it prints the program. The lines are read out of
   the generating tool's own source, which is why they are a stack of Labels
   rather than one block of text: EVG lays out a paragraph, and a line of code
   that wrapped would be a line of code that lied. */
.codeBlock { width: 100%; }
.codeLine  { }

/* A stroked path must say so, or the outline is filled in as a shape. */
.chartGrid, .chartTick, .chartDomain, .chartFrame,
.chartStroke0, .chartStroke1, .chartStroke2, .chartStroke3, .chartStroke4,
.chartStroke5, .chartStroke6, .chartStroke7, .chartStroke8, .chartStroke9 {
  fill: none;
}

/* ==== theme: editorial — warm paper, serif display ====================== */

.theme-editorial .page {
  background-color: #fbf7f0;
  padding: 44px;
  font-family: Noto Sans;
}
.theme-editorial .eyebrow {
  font-size: 12px;
  color: #a1856a;
  font-family: Josefin Sans;
}
.theme-editorial .title {
  font-size: 34px;
  font-family: Cinzel;
  color: #3b2f2a;
  line-height: 1.2;
}
.theme-editorial .rule {
  background-color: #b08d57;
  margin-top: 14px;
}
.theme-editorial .subhead {
  font-size: 13px;
  font-family: Josefin Sans;
  color: #8a7360;
  margin-top: 26px;
  margin-bottom: 8px;
}
.theme-editorial .caption,
.theme-editorial .body {
  font-size: 13px;
  color: #6b5b52;
  line-height: 1.4;
  margin-top: 14px;
}
.theme-editorial .vecRow { gap: 22px; margin-top: 6px; }
.theme-editorial .icon   { stroke: #b08d57; stroke-width: 2.5; fill: none; }
.theme-editorial .iconSm { width: 28px;  height: 28px; }
.theme-editorial .iconMd { width: 52px;  height: 52px; }
.theme-editorial .iconLg { width: 84px;  height: 84px; }
.theme-editorial .shape  { width: 76px; height: 76px; fill: #3b2f2a; }
.theme-editorial .art      { fill: #3b2f2a; }
.theme-editorial .artAccent { fill: #b08d57; }
.theme-editorial .artMuted  { fill: #c8bda9; }
.theme-editorial .artSm    { width: 34px; height: 34px; }
.theme-editorial .artMd    { width: 62px; height: 62px; }
.theme-editorial .artLg    { width: 96px; height: 96px; }
.theme-editorial .emblemSm { width: 54px;  height: 65px; }
.theme-editorial .emblemLg { width: 100px; height: 120px; }
/* charts */
/* the calls that built the chart */
.theme-editorial .codeBlock { margin-top: 2px; margin-bottom: 2px; }
.theme-editorial .codeLine  { font-size: 8px; font-family: Noto Sans; color: #97785a; line-height: 1.5; }
.theme-editorial .chart      { margin-top: 8px; margin-bottom: 4px; }
.theme-editorial .chartGrid  { stroke: #d8cfbd; }
.theme-editorial .chartTick,
.theme-editorial .chartDomain,
.theme-editorial .chartFrame { stroke: #b8ac97; }
.theme-editorial .chartLabel { color: #6b5f52; }
.theme-editorial .chartTitle { color: #3b2f2a; }
.theme-editorial .chartFill0   { fill: #4c78a8; }
.theme-editorial .chartStroke0 { stroke: #4c78a8; }
.theme-editorial .chartFill1   { fill: #c47f3d; }
.theme-editorial .chartStroke1 { stroke: #c47f3d; }
.theme-editorial .chartFill2   { fill: #a34a4a; }
.theme-editorial .chartStroke2 { stroke: #a34a4a; }
.theme-editorial .chartFill3   { fill: #5f9ea0; }
.theme-editorial .chartStroke3 { stroke: #5f9ea0; }
.theme-editorial .chartFill4   { fill: #5a8a4a; }
.theme-editorial .chartStroke4 { stroke: #5a8a4a; }
.theme-editorial .chartFill5   { fill: #c9a227; }
.theme-editorial .chartStroke5 { stroke: #c9a227; }
.theme-editorial .chartFill6   { fill: #8a6ba2; }
.theme-editorial .chartStroke6 { stroke: #8a6ba2; }
.theme-editorial .chartFill7   { fill: #c98f9b; }
.theme-editorial .chartStroke7 { stroke: #c98f9b; }
.theme-editorial .chartFill8   { fill: #8a6f5d; }
.theme-editorial .chartStroke8 { stroke: #8a6f5d; }

.theme-editorial .spread { gap: 16px; margin-top: 24px; }
.theme-editorial .cell   { border-radius: 10px; }
.theme-editorial .deck   { gap: 16px; margin-top: 20px; }
.theme-editorial .shot   { border-radius: 8px; }
.theme-editorial .cardcap {
  font-size: 12px;
  color: #6b5b52;
  line-height: 1.35;
  margin-top: 8px;
}
.theme-editorial .row      { gap: 14px; }
.theme-editorial .bar      { background-color: #b08d57; margin-top: 8px; border-radius: 3px; }
.theme-editorial .barLabel { font-size: 11px; color: #fbf7f0; margin-left: 8px; }
.theme-editorial .box,
.theme-editorial .chip,
.theme-editorial .tile   { background-color: #e8dcc8; height: 46px; border-radius: 6px; }
.theme-editorial .boxLabel { font-size: 12px; color: #5a4a3f; margin-top: 15px; margin-left: 10px; }
.theme-editorial .demo   { background-color: #e8dcc8; border-radius: 6px; }
.theme-editorial .bordered { border-color: #b08d57; }
.theme-editorial .inner  { background-color: #b08d57; border-radius: 3px; }
.theme-editorial .nest   { background-color: #efe6d6; border-radius: 6px; margin-top: 8px; }
.theme-editorial .l2     { background-color: #e5d8c2; }
.theme-editorial .l3     { background-color: #d8c7ab; }
.theme-editorial .l4     { background-color: #b08d57; }
.theme-editorial .specimen  { flex-direction: row; margin-top: 12px; }
.theme-editorial .specLabel { font-size: 11px; color: #a1856a; width: 110px; margin-top: 10px; }
.theme-editorial .specText  { font-size: 24px; color: #3b2f2a; }
.theme-editorial .faceDisplay { font-family: Cinzel; }
.theme-editorial .faceAlt     { font-family: Josefin Sans; }
.theme-editorial .faceBody    { font-family: Noto Sans; }
.theme-editorial .baseline  { flex-direction: row; align-items: baseline; margin-top: 10px; }
.theme-editorial .big       { font-size: 30px; font-family: Cinzel; color: #3b2f2a; }
.theme-editorial .small     { font-size: 13px; color: #6b5b52; margin-left: 10px; }

.theme-editorial .seqRow    { margin-top: 14px; gap: 16px; }
.theme-editorial .seqGlyph  { font-size: 34px; color: #3b2f2a; width: 56px; }
.theme-editorial .seqName   { font-size: 13px; font-family: Josefin Sans; color: #3b2f2a; }
.theme-editorial .seqNote   { font-size: 12px; color: #6b5b52; line-height: 1.4; margin-top: 3px; }
.theme-editorial .tintRose,
.theme-editorial .tintBlue,
.theme-editorial .tintGreen { font-size: 20px; color: #3b2f2a; margin-top: 8px; }
.theme-editorial .tintRose  { emoji-color: #c0392b; }
.theme-editorial .tintBlue  { emoji-color: #2f6f9f; }
.theme-editorial .tintGreen { emoji-color: #4f7a4a; }

/* ==== theme: studio — dark, geometric sans ============================== */

.theme-studio .page {
  background-color: #14161a;
  padding: 40px;
  font-family: Josefin Sans;
}
.theme-studio .eyebrow {
  font-size: 11px;
  color: #6f7c8c;
  font-family: Noto Sans;
}
.theme-studio .title {
  font-size: 30px;
  font-family: Josefin Sans;
  font-weight: bold;
  color: #f2f5f8;
  line-height: 1.15;
}
.theme-studio .rule {
  background-color: #4ea3ff;
  height: 2px;
  width: 140px;
  margin-top: 12px;
}
.theme-studio .subhead {
  font-size: 12px;
  font-family: Noto Sans;
  color: #6f7c8c;
  margin-top: 24px;
  margin-bottom: 6px;
}
.theme-studio .caption,
.theme-studio .body {
  font-size: 12px;
  color: #9aa7b6;
  line-height: 1.45;
  margin-top: 14px;
}
.theme-studio .spread { gap: 10px; margin-top: 20px; }
.theme-studio .vecRow { gap: 18px; margin-top: 6px; }
.theme-studio .icon   { stroke: #14e0a0; stroke-width: 3; fill: none; }
.theme-studio .iconSm { width: 30px;  height: 30px; }
.theme-studio .iconMd { width: 56px;  height: 56px; }
.theme-studio .iconLg { width: 92px;  height: 92px; }
.theme-studio .shape  { width: 80px; height: 80px; fill: #e8e8ea; }
.theme-studio .art      { fill: #e8e8ea; }
.theme-studio .artAccent { fill: #14e0a0; }
.theme-studio .artMuted  { fill: #6b6b74; }
.theme-studio .artSm    { width: 36px; height: 36px; }
.theme-studio .artMd    { width: 66px; height: 66px; }
.theme-studio .artLg    { width: 104px; height: 104px; }
.theme-studio .emblemSm { width: 56px;  height: 67px; }
.theme-studio .emblemLg { width: 104px; height: 125px; }
/* charts */
/* the calls that built the chart */
.theme-studio .codeBlock { margin-top: 2px; margin-bottom: 2px; }
.theme-studio .codeLine  { font-size: 8px; font-family: Noto Sans; color: #7f8fa3; line-height: 1.5; }
.theme-studio .chart      { margin-top: 8px; margin-bottom: 4px; }
.theme-studio .chartGrid  { stroke: #3a4048; }
.theme-studio .chartTick,
.theme-studio .chartDomain,
.theme-studio .chartFrame { stroke: #6f7681; }
.theme-studio .chartLabel { color: #aab2bd; }
.theme-studio .chartTitle { color: #e8e8ea; }
.theme-studio .chartFill0   { fill: #4ea3ff; }
.theme-studio .chartStroke0 { stroke: #4ea3ff; }
.theme-studio .chartFill1   { fill: #ffa657; }
.theme-studio .chartStroke1 { stroke: #ffa657; }
.theme-studio .chartFill2   { fill: #ff7b72; }
.theme-studio .chartStroke2 { stroke: #ff7b72; }
.theme-studio .chartFill3   { fill: #56d4c4; }
.theme-studio .chartStroke3 { stroke: #56d4c4; }
.theme-studio .chartFill4   { fill: #7ee787; }
.theme-studio .chartStroke4 { stroke: #7ee787; }
.theme-studio .chartFill5   { fill: #f2cc60; }
.theme-studio .chartStroke5 { stroke: #f2cc60; }
.theme-studio .chartFill6   { fill: #c08cff; }
.theme-studio .chartStroke6 { stroke: #c08cff; }
.theme-studio .chartFill7   { fill: #ff9bb3; }
.theme-studio .chartStroke7 { stroke: #ff9bb3; }
.theme-studio .chartFill8   { fill: #c4a48a; }
.theme-studio .chartStroke8 { stroke: #c4a48a; }

.theme-studio .cell   { border-radius: 2px; }
.theme-studio .deck   { gap: 10px; margin-top: 18px; }
.theme-studio .shot   { border-radius: 2px; }
.theme-studio .cardcap {
  font-size: 11px;
  color: #9aa7b6;
  line-height: 1.4;
  margin-top: 8px;
}
.theme-studio .row      { gap: 10px; }
.theme-studio .bar      { background-color: #4ea3ff; margin-top: 6px; }
.theme-studio .barLabel { font-size: 11px; color: #0d1014; margin-left: 8px; }
.theme-studio .box,
.theme-studio .chip,
.theme-studio .tile   { background-color: #232830; height: 44px; }
.theme-studio .boxLabel { font-size: 12px; color: #cdd6e0; margin-top: 14px; margin-left: 10px; }
.theme-studio .demo   { background-color: #232830; }
.theme-studio .bordered { border-color: #4ea3ff; }
.theme-studio .inner  { background-color: #4ea3ff; }
.theme-studio .nest   { background-color: #1b1f26; margin-top: 8px; }
.theme-studio .l2     { background-color: #232830; }
.theme-studio .l3     { background-color: #2d343e; }
.theme-studio .l4     { background-color: #4ea3ff; }
.theme-studio .specimen  { flex-direction: row; margin-top: 10px; }
.theme-studio .specLabel { font-size: 11px; color: #6f7c8c; width: 110px; margin-top: 8px; font-family: Noto Sans; }
.theme-studio .specText  { font-size: 22px; color: #f2f5f8; }
.theme-studio .faceDisplay { font-family: Cinzel; }
.theme-studio .faceAlt     { font-family: Josefin Sans; }
.theme-studio .faceBody    { font-family: Noto Sans; }
.theme-studio .baseline  { flex-direction: row; align-items: baseline; margin-top: 10px; }
.theme-studio .big       { font-size: 28px; font-family: Josefin Sans; color: #4ea3ff; }
.theme-studio .small     { font-size: 12px; color: #9aa7b6; margin-left: 10px; }

.theme-studio .seqRow    { margin-top: 12px; gap: 14px; }
.theme-studio .seqGlyph  { font-size: 32px; color: #f2f5f8; width: 52px; }
.theme-studio .seqName   { font-size: 12px; font-family: Noto Sans; color: #f2f5f8; }
.theme-studio .seqNote   { font-size: 11px; color: #9aa7b6; line-height: 1.45; margin-top: 3px; }
.theme-studio .tintRose,
.theme-studio .tintBlue,
.theme-studio .tintGreen { font-size: 19px; color: #f2f5f8; margin-top: 8px; }
.theme-studio .tintRose  { emoji-color: #ff6b6b; }
.theme-studio .tintBlue  { emoji-color: #4ea3ff; }
.theme-studio .tintGreen { emoji-color: #5fd08a; }

/* ==== theme: autumn — muted, broken tones on warm grey ================== */
/* Nothing here is a saturated colour. The palette is built from ochre, rust,
   olive and clay knocked back toward grey, which is what keeps nine series
   apart without any of them shouting. */

.theme-autumn .page {
  background-color: #ece5d8;
  padding: 44px;
  font-family: Noto Sans;
}
.theme-autumn .eyebrow {
  font-size: 11px;
  color: #8a7660;
  font-family: Noto Sans;
}
.theme-autumn .title {
  font-size: 32px;
  font-family: Cinzel;
  color: #4a3b2c;
  line-height: 1.15;
}
.theme-autumn .rule {
  background-color: #a6603c;
  height: 2px;
  width: 120px;
  margin-top: 13px;
}
.theme-autumn .subhead {
  font-size: 12px;
  font-family: Noto Sans;
  color: #8a7660;
  margin-top: 22px;
  margin-bottom: 6px;
}
.theme-autumn .caption,
.theme-autumn .body {
  font-size: 12px;
  color: #6d5c4c;
  line-height: 1.45;
  margin-top: 12px;
}
.theme-autumn .spread { gap: 12px; margin-top: 20px; }
.theme-autumn .cell   { background-color: #e0d6c4; }
.theme-autumn .deck   { gap: 14px; margin-top: 18px; }
.theme-autumn .card   { background-color: #e0d6c4; padding: 12px; }
.theme-autumn .shot   { height: 120px; }
.theme-autumn .bar    { background-color: #a6603c; }
.theme-autumn .demo   { background-color: #d8cbb5; }
.theme-autumn .inner  { background-color: #a6603c; }
.theme-autumn .bordered { border-color: #8a7660; }
.theme-autumn .nest   { background-color: #d8cbb5; }
.theme-autumn .chip,
.theme-autumn .tile   { background-color: #c9b699; }
.theme-autumn .vecRow { gap: 20px; margin-top: 6px; }
.theme-autumn .icon   { stroke: #a6603c; stroke-width: 2.5; fill: none; }
.theme-autumn .iconSm { width: 28px;  height: 28px; }
.theme-autumn .iconMd { width: 52px;  height: 52px; }
.theme-autumn .iconLg { width: 84px;  height: 84px; }
.theme-autumn .shape  { width: 78px; height: 78px; fill: #4a3b2c; }
.theme-autumn .art      { fill: #4a3b2c; }
.theme-autumn .artAccent { fill: #a6603c; }
.theme-autumn .artMuted  { fill: #cbb79c; }
.theme-autumn .artSm    { width: 34px; height: 34px; }
.theme-autumn .artMd    { width: 62px; height: 62px; }
.theme-autumn .artLg    { width: 98px; height: 98px; }
.theme-autumn .emblemSm { width: 54px;  height: 65px; }
.theme-autumn .emblemLg { width: 100px; height: 120px; }
/* charts */
/* the calls that built the chart */
.theme-autumn .codeBlock { margin-top: 2px; margin-bottom: 2px; }
.theme-autumn .codeLine  { font-size: 8px; font-family: Noto Sans; color: #8a7660; line-height: 1.5; }
.theme-autumn .chart      { margin-top: 8px; margin-bottom: 4px; }
.theme-autumn .chartGrid  { stroke: #cbbca7; }
.theme-autumn .chartTick,
.theme-autumn .chartDomain,
.theme-autumn .chartFrame { stroke: #a2907a; }
.theme-autumn .chartLabel { color: #6d5c4c; }
.theme-autumn .chartTitle { color: #43362a; }
.theme-autumn .chartFill0   { fill: #a6603c; }
.theme-autumn .chartStroke0 { stroke: #a6603c; }
.theme-autumn .chartFill1   { fill: #c98c4e; }
.theme-autumn .chartStroke1 { stroke: #c98c4e; }
.theme-autumn .chartFill2   { fill: #8c6239; }
.theme-autumn .chartStroke2 { stroke: #8c6239; }
.theme-autumn .chartFill3   { fill: #6f7d4e; }
.theme-autumn .chartStroke3 { stroke: #6f7d4e; }
.theme-autumn .chartFill4   { fill: #9c6b5a; }
.theme-autumn .chartStroke4 { stroke: #9c6b5a; }
.theme-autumn .chartFill5   { fill: #c2a04b; }
.theme-autumn .chartStroke5 { stroke: #c2a04b; }
.theme-autumn .chartFill6   { fill: #7a5c48; }
.theme-autumn .chartStroke6 { stroke: #7a5c48; }
.theme-autumn .chartFill7   { fill: #b58463; }
.theme-autumn .chartStroke7 { stroke: #b58463; }
.theme-autumn .chartFill8   { fill: #5f6b52; }
.theme-autumn .chartStroke8 { stroke: #5f6b52; }