/* Specimen-sheet styles. Loaded only by /skill-scaffold/, never by a generated
   site, so nothing here belongs in site.css.

   One duplication is knowingly shipped: the five texture definitions below are
   copies of the ones in site.css. There they are written as
   `[data-texture="x"] body { --surface: ... }`, which targets body as a
   descendant, so a nested swatch cannot pick them up. The clean fix is to set
   --surface on `[data-texture="x"]` itself and let body inherit it - that works
   identically for a real page and makes textures composable like palettes. It is
   not done here because it would need the same edit in three site.css copies at
   once; recorded rather than hidden. */

.sheet { max-width:82rem; margin-inline:auto; padding:0 var(--pad-x) 6rem }
.sheet section { padding:clamp(2.5rem,6vw,4rem) 0; border-top:1px solid var(--line) }
.sheet h2 { font-size:clamp(1.4rem,2.6vw,2rem) }
.count { font-family:var(--ff-label); font-size:.72rem; letter-spacing:var(--tr-label);
  text-transform:uppercase; color:var(--accent); margin:0 0 .4rem }

.grid { display:grid; gap:1rem; margin-top:1.6rem;
  grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)) }
.grid--wide { grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)) }

.card { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff }
.card__name { font-family:var(--ff-label); font-size:.72rem; letter-spacing:.06em;
  padding:.5rem .7rem; border-top:1px solid var(--line); color:#57524a; background:#fff }

/* palette swatch - paints itself from the custom properties it inherits */
.sw { padding:1.1rem; min-height:8.5rem; background:var(--ground); color:var(--ink);
  display:flex; flex-direction:column; gap:.55rem; justify-content:space-between }
.sw__row { display:flex; gap:.4rem; align-items:center }
.sw__chip { width:1.5rem; height:1.5rem; border-radius:4px; flex:none }
.sw__chip--accent { background:var(--accent) } .sw__chip--panel { background:var(--panel) }
.sw__chip--line { background:var(--line) } .sw__chip--soft { background:var(--ink-soft) }
.sw__btn { display:inline-block; align-self:flex-start; background:var(--accent);
  color:var(--accent-ink); padding:.35rem .8rem; border-radius:var(--r-btn); font-size:.85rem; font-weight:600 }
.sw__soft { color:var(--ink-soft); font-size:.85rem }

/* type specimen */
.ty { padding:1.1rem; background:#fff; color:#191714 }
.ty__d { font-family:var(--ff-display); font-weight:var(--fw-display); font-stretch:var(--stretch-display);
  letter-spacing:var(--tr-display); line-height:1.05; font-size:1.9rem; margin:0 0 .35rem }
.ty__s { font-family:var(--ff-sub); font-weight:700; font-size:1.05rem; margin:0 0 .3rem }
.ty__b { font-family:var(--ff-body); font-size:.92rem; margin:0 0 .4rem; color:#57524a }
.ty__l { font-family:var(--ff-label); font-size:.72rem; letter-spacing:var(--tr-label); text-transform:uppercase; color:#1f5f8b }

/* shape specimen */
.sh { padding:1.4rem; background:#f7f4ee; display:flex; gap:.8rem; align-items:center; min-height:7rem }
.sh__panel { flex:1; min-height:3.4rem; background:#efeae1; border:1px solid #d8d1c4;
  border-radius:var(--r-panel); box-shadow:var(--shadow) }
.sh__btn { background:#1f5f8b; color:#fff; padding:.45rem .9rem; border-radius:var(--r-btn);
  font-size:.85rem; font-weight:600; box-shadow:var(--shadow) }

/* texture specimen - see the duplication note at the top of this file */
.tex { min-height:7rem; background-color:#f7f4ee; background-image:var(--surface);
  background-size:var(--surface-size,auto) }
.tex[data-texture="flat"] { --surface:none }
.tex[data-texture="grid-lines"] { --surface: repeating-linear-gradient(0deg,#d8d1c4 0 1px,transparent 1px 34px),repeating-linear-gradient(90deg,#d8d1c4 0 1px,transparent 1px 34px) }
.tex[data-texture="dot-matrix"] { --surface: radial-gradient(#c9c1b1 1px,transparent 1.2px); --surface-size:16px 16px }
.tex[data-texture="gradient-mesh"] { --surface: radial-gradient(9rem 9rem at 15% -10%,rgba(31,95,139,.28),transparent 70%),radial-gradient(8rem 8rem at 95% 40%,rgba(31,95,139,.18),transparent 70%) }
.tex[data-texture="grain-noise"] { --surface: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E") }
.tex[data-texture="glass-blur"] { --surface: linear-gradient(120deg,rgba(31,95,139,.22),rgba(31,95,139,.05)) }
.tex__pane { margin:1.4rem; padding:.9rem; border-radius:8px; background:rgba(255,255,255,.62);
  backdrop-filter:blur(10px); font-size:.85rem; color:#191714 }

/* motion and layout diagrams */
.mo { padding:1.1rem; background:#fff; font-size:.9rem; color:#57524a; min-height:6.5rem }
.mo code { color:#191714 }
.lay { padding:1rem; background:#f7f4ee; display:grid; gap:.35rem; min-height:7rem; align-content:start }
.lay i { display:block; background:#cfd8e2; border-radius:3px; height:.55rem }
.lay i.hd { height:1.3rem; background:#1f5f8b }
.lay .row { display:grid; gap:.35rem; grid-template-columns:1fr }
.lay .row--rail { grid-template-columns:4rem 1fr }
.lay .row--split { grid-template-columns:1.6fr 1fr }
.lay .row--three { grid-template-columns:repeat(3,1fr) }
.lay .row--idx { grid-template-columns:1.2rem 1fr }
.lay .row--wide i { height:.45rem }

.ord { list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.3rem;
  font-family:var(--ff-label); font-size:.72rem }
.ord li { padding:.2rem .5rem; border:1px solid var(--line); border-radius:4px; background:#fff }
.ord li.k { background:#1f5f8b; color:#fff; border-color:#1f5f8b }

.tok { width:100%; border-collapse:collapse; font-size:.88rem; margin-top:1.2rem }
.tok th { text-align:left; font-family:var(--ff-label); font-size:.7rem; letter-spacing:var(--tr-label);
  text-transform:uppercase; color:#57524a; border-bottom:2px solid var(--line); padding:.45rem .6rem .45rem 0 }
.tok td { border-bottom:1px solid var(--line); padding:.5rem .6rem .5rem 0; vertical-align:top }
.tok code { font-size:.85em }

.split { display:grid; gap:1rem; margin-top:1.4rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)) }
.split > * { padding:1.2rem; border:1px solid var(--line); border-radius:10px; background:#fff }
.split h3 { margin-top:0 }
.split ul { margin:0; padding-left:1.1rem; font-size:.92rem; color:#57524a }
.warn { border-left:4px solid #b26a00; padding-left:1rem; color:#57524a; font-size:.95rem }