/* ==========================================================================
   KAWAII — one page. Loaded on a/kawaii.html only.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A construction sheet and a title block, then the Build with it board as
   the page's next white panel, then the record as the same panels on a
   pastel field printed with hearts and sparkles. The shell (rail, top bar,
   community drawer) is never restyled: every rule here is scoped to
   .kw-page main, .kw-wrap, .kw-rec, or the board (.kw-page .gm--kawaii).

   THE BOARD (grammar/boards.ts, styled by grammar.css) keeps its content,
   its values and its behaviour. Its specimens stay on the grammar's own
   tokens (--gm-*); only its frame is restyled here: a white panel at the
   page's radius and rhythm, borderless tiles on the grammar's field colour,
   the page's heading scale, and 44px disclosure targets.

   Four radii and no others on the page: --kw-r1 10 · r2 18 · r3 28 · rf.
   Six pastels, one ink pair, paper white, ONE bright (#F0348B, the plaque).

   Contrast (text/ground, WCAG AA at body size):
   ink  #3F3347 on blossom #FFF6F9 11.6 · white 12.2 · lilac 10.3 · pink 10.3
   ink2 #6B5D72 on white 6.3 · blossom 6.0 · lilac 5.3
   The bright #F0348B is NEVER a text ground (white on it is 3.8:1): it is
   the plaque's border and its sparkle only; the plaque line is ink on paper.
   ========================================================================== */
@font-face { font-family: "M PLUS Rounded 1c"; src: url("fonts/mplus-rounded-500.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url("fonts/mplus-rounded-700.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url("fonts/mplus-rounded-800.woff2") format("woff2"); font-weight: 800 900; font-display: swap; }

.kw-page {
  --kw-blossom: #FFF6F9;
  --kw-pink: #FFE3EE;
  --kw-mint: #E0F5EA;
  --kw-butter: #FFF2CE;
  --kw-lilac: #ECE6FB;
  --kw-sky: #DFF1FB;
  --kw-bright: #F0348B;
  --kw-ink: #3F3347;
  --kw-ink2: #6B5D72;
  --kw-paper: #FFFFFF;
  --kw-cons: #B9A6EE;
  --kw-r1: 10px;
  --kw-r2: 18px;
  --kw-r3: 28px;
  --kw-rf: 999px;
  --kw-gap: 60px;
  --kw-face: "M PLUS Rounded 1c", ui-rounded, "Arial Rounded MT Bold", sans-serif;
}
/* The field: hearts and sparkles at a 96px interval, behind everything. */
.kw-page main {
  background: var(--kw-blossom) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2296%22%20height%3D%2296%22%3E%3Cpath%20d%3D%22M24%2030%20C24%2030%2014%2024%2014%2018%20C14%2014%2017%2012%2020%2012%20C22%2012%2024%2014%2024%2014%20C24%2014%2026%2012%2028%2012%20C31%2012%2034%2014%2034%2018%20C34%2024%2024%2030%2024%2030Z%22%20fill%3D%22%23FFD3E4%22%20stroke%3D%22%23FFD3E4%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M72%2062%20L74%2070%20L82%2072%20L74%2074%20L72%2082%20L70%2074%20L62%2072%20L70%2070Z%22%20fill%3D%22%23D9CCF7%22%20stroke%3D%22%23D9CCF7%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 0 0 / 96px 96px;
  color: var(--kw-ink);
  overflow-x: hidden;
}

/* ---- shared register: hero and record ---------------------------------- */
.kw-wrap { max-width: 1080px; margin: 0 auto; font: 500 18px/1.7 var(--kw-face); color: var(--kw-ink); font-synthesis: style; }
.kw-wrap a { color: var(--kw-ink); text-decoration: underline; text-decoration-color: #C9B8F2; text-decoration-thickness: 3px; text-underline-offset: 4px; border-radius: var(--kw-r1); }
.kw-wrap a:hover { background: var(--kw-lilac); }
.kw-wrap :focus-visible, .kw-page .gm--kawaii :focus-visible { outline: 3px solid var(--kw-cons); outline-offset: 3px; border-radius: var(--kw-r1); }
.kw-wrap p { margin: 0 0 14px; }
.kw-wrap b { font-weight: 800; }
.kw-t--pink { background: var(--kw-pink); }
.kw-t--mint { background: var(--kw-mint); }
.kw-t--butter { background: var(--kw-butter); }
.kw-t--sky { background: var(--kw-sky); }
.kw-t--lilac { background: var(--kw-lilac); }
.kw-tag { display: inline-block; margin: 0 0 10px !important; padding: 3px 12px; border-radius: var(--kw-rf); background: var(--kw-lilac); font-size: 13px; font-weight: 700; line-height: 1.6; }
.kw-cap { margin: 10px 4px 0 !important; font-size: 14px; line-height: 1.6; color: var(--kw-ink2); }
.kw-small { font-size: 15px; color: var(--kw-ink2); }
.kw-k { display: block; font-size: 13px; font-weight: 700; color: var(--kw-ink2); }

/* ---- hero: the construction sheet and the title block ------------------ */
.kw-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 30px; align-items: center; padding: 40px 0 0; }
.kw-sheet { position: relative; padding: 18px; border-radius: var(--kw-r3); background: var(--kw-paper); }
.kw-sheet svg { display: block; width: 100%; height: auto; }
.kw-cons { transition: opacity .3s; }
.kw-sheet.kw-off .kw-cons { opacity: 0; }
.kw-cons--l { fill: none; stroke: var(--kw-cons); stroke-width: 1.5; stroke-dasharray: 5 5; }
.kw-cons--t { font: 500 14px var(--kw-face); fill: var(--kw-ink2); }
.kw-fig circle { fill: var(--kw-pink); stroke: var(--kw-ink); stroke-width: 5; }
.kw-eye { fill: var(--kw-ink); }
.kw-glint { fill: var(--kw-paper); }
.kw-mouth { fill: none; stroke: var(--kw-ink); stroke-width: 5; stroke-linecap: round; }
.kw-blush { fill: #FFC7DC; }
.kw-tog { margin-top: 12px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--kw-rf); background: var(--kw-lilac); color: var(--kw-ink); font: 700 15px var(--kw-face); cursor: pointer; }
.kw-tog:hover { background: #DDD3F7; }
.kw-h1 { margin: 0; font: 800 clamp(64px, 11vw, 132px)/1 var(--kw-face); letter-spacing: -.02em; color: var(--kw-ink); }
.kw-def { margin: 8px 0 14px !important; font-size: 19px; }
.kw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kw-chips li { padding: 4px 14px; border-radius: var(--kw-rf); font-size: 14px; font-weight: 700; }
.kw-plaque { position: relative; margin: 22px 0 0; padding: 18px 22px; border: 6px solid var(--kw-bright); border-radius: var(--kw-r3); background: var(--kw-paper); color: var(--kw-ink); }
.kw-plaque blockquote { margin: 0; }
.kw-plaque p { margin: 0 !important; font: 800 clamp(20px, 2.4vw, 26px)/1.35 var(--kw-face); }
.kw-plaque p::before { content: "\201C"; }
.kw-plaque p::after { content: "\201D"; }
.kw-twk { position: absolute; right: -14px; top: -14px; width: 40px; height: 40px; }
.kw-twk path { fill: var(--kw-bright); stroke: var(--kw-paper); stroke-width: 3; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .kw-twk { animation: kw-tw 7s infinite; }
  @keyframes kw-tw { 0%, 10%, 20%, 100% { transform: scale(1); opacity: 1; } 5%, 15% { transform: scale(.4); opacity: .4; } }
}
@media (prefers-reduced-motion: reduce) { .kw-cons { transition: none; } }

/* ---- the record: white panels ------------------------------------------ */
.kw-rec { margin: 0; }
.kw-pan, .kw-use-s { margin-top: var(--kw-gap); }
.kw-pan { padding: clamp(20px, 4vw, 36px); border-radius: var(--kw-r3); background: var(--kw-paper); }
.kw-h2 { margin: 0 0 14px; font: 800 clamp(28px, 4vw, 42px)/1.15 var(--kw-face); color: var(--kw-ink); }
.kw-h3 { margin: 26px 0 10px; font: 800 22px/1.3 var(--kw-face); }
.kw-n { display: inline-grid; place-items: center; min-width: 1.5em; padding: 0 .35em; border-radius: var(--kw-rf); background: var(--kw-lilac); font-size: .7em; vertical-align: .15em; }
.kw-claim, .kw-diag { margin: 0 0 16px; padding: 16px 20px; border-radius: var(--kw-r2); background: var(--kw-butter); font-weight: 700; }
.kw-diag { background: var(--kw-lilac); }
.kw-claim p, .kw-diag p { margin: 0 !important; }
.kw-grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.kw-grid4 div { padding: 14px 16px; border-radius: var(--kw-r2); }
.kw-grid4 dt { font-weight: 800; }
.kw-grid4 dd { margin: 0; }

/* what carries the look */
.kw-dims, .kw-rules, .kw-conf { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kw-dims li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 8px 18px; align-items: start; padding: 12px 16px; border-radius: var(--kw-r2); background: var(--kw-blossom); }
.kw-dimv p { margin: 0 !important; }
.kw-dimv > * + * { margin-top: 8px !important; }
.kw-none { color: var(--kw-ink2); }
.kw-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.kw-wrap a.kw-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--kw-rf); background: var(--kw-sky); font-weight: 700; text-decoration: none; }
.kw-wrap a.kw-pill--dim { background: var(--kw-paper); box-shadow: inset 0 0 0 2px var(--kw-lilac); }
.kw-wrap a.kw-pill:hover { background: var(--kw-lilac); }
.kw-dim .kw-k { margin-top: 4px; }
.kw-pal { display: flex; flex-wrap: wrap; gap: 8px; }
.kw-pal span { display: grid; gap: 4px; width: 92px; font-size: 12px; font-weight: 700; }
.kw-pal i { display: block; height: 76px; border-radius: var(--kw-r2); box-shadow: inset 0 0 0 2px var(--kw-pink); }

/* rules */
.kw-rules li { padding: 12px 16px; border-radius: var(--kw-r2); background: var(--kw-blossom); }
.kw-rules b { display: block; font-weight: 800; }
.kw-rules p { margin: 4px 0 0 !important; }

/* the record */
.kw-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.kw-meta div { padding: 10px 14px; border-radius: var(--kw-r2); background: var(--kw-blossom); }
.kw-meta .kw-meta__wide { grid-column: 1 / -1; }
.kw-meta dt { font-size: 13px; font-weight: 800; color: var(--kw-ink2); }
.kw-meta dd { margin: 0; }
.kw-tblw { max-width: 100%; overflow-x: auto; margin: 0 0 16px; border-radius: var(--kw-r2); background: var(--kw-blossom); }
.kw-res { width: 100%; border-collapse: collapse; font-size: 16px; }
.kw-res th, .kw-res td { padding: 9px 14px; text-align: left; vertical-align: top; }
.kw-res thead th { font-size: 13px; font-weight: 800; color: var(--kw-ink2); }
.kw-res tbody tr + tr > * { border-top: 2px solid var(--kw-paper); }
.kw-res tbody th { font-weight: 700; }
.kw-yn { display: inline-block; padding: 0 10px; border-radius: var(--kw-rf); font-size: 14px; font-weight: 800; }
.kw-yn--y { background: var(--kw-mint); }
.kw-yn--n { background: var(--kw-pink); }
.kw-firm { padding: 12px 16px; border-radius: var(--kw-r2); background: var(--kw-butter); font-weight: 700; }
.kw-wrap .kw-conf a, .kw-conf div { display: block; min-height: 44px; padding: 12px 16px; border-radius: var(--kw-r2); background: var(--kw-blossom); text-decoration: none; }
.kw-wrap .kw-conf a:hover { background: var(--kw-lilac); }
.kw-conf a b { text-decoration: underline; text-decoration-color: #C9B8F2; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.kw-conf .kw-k { display: inline; margin-left: 6px; }
.kw-conf__t { display: block; }

/* use it */
.kw-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kw-wrap .kw-use a { display: block; padding: 18px; border-radius: var(--kw-r3); text-decoration: none; }
.kw-wrap .kw-use a:hover { box-shadow: inset 0 0 0 3px var(--kw-cons); }
.kw-use b { display: block; font-size: 22px; font-weight: 800; }
.kw-more { margin: 16px 0 0 !important; }
.kw-more a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

/* ==========================================================================
   THE BUILD WITH IT BOARD, as the page's next panel. Frame only; every
   specimen value stays on the grammar's tokens.
   ========================================================================== */
.kw-page .gm.gm--kawaii { max-width: 1080px; margin: var(--kw-gap) auto 0; padding: clamp(20px, 4vw, 36px); border-radius: var(--kw-r3); background: var(--kw-paper); }
.kw-page .gm--kawaii .gm__head { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 26px; }
.kw-page .gm--kawaii .gm__title { grid-row: auto; font: 800 clamp(28px, 4vw, 42px)/1.15 var(--kw-face); }
.kw-page .gm--kawaii .gm__lede { font-size: 19px; line-height: 1.6; max-width: 62ch; }
.kw-page .gm--kawaii .gm__key, .kw-page .gm--kawaii .gm__get { font-size: 14px; opacity: 1; }
.kw-page .gm--kawaii .gmk-page { gap: 12px; }
.kw-page .gm--kawaii .gmk-f { border: 0; background: var(--gm-color-field); }
.kw-page .gm--kawaii .gmk-f--hero { background: var(--gm-color-pastel); }
.kw-page .gm--kawaii .gm-f__name { font-size: 20px; font-weight: 800; }
.kw-page .gm--kawaii .gm-more summary { display: list-item; min-height: 44px; padding: 10px 14px; border-radius: var(--gm-radius-pill); background: var(--kw-paper); line-height: 24px; }
.kw-page .gm--kawaii .gm-more[open] summary { margin-bottom: 4px; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 820px) {
  .kw-hero, .kw-grid4, .kw-meta, .kw-use { grid-template-columns: minmax(0, 1fr); }
  .kw-dims li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .kw-page { --kw-gap: 40px; }
  .kw-wrap { font-size: 17px; }
  .kw-hero { padding-top: 24px; }
  .kw-twk { right: -8px; }
  .kw-pal span { width: 76px; } .kw-pal i { height: 60px; }
}

/* research-dimension table at phone width: no fixed floor, cells wrap (QA 2026-09-29) */
@media (max-width: 480px) {
  .kw-res { min-width: 0; }
  .kw-res th, .kw-res td { padding-inline: 6px; overflow-wrap: break-word; }
}

/* the board, desktop: keep the fields in their numbered order (dense flow put 4 above 3) with no holes:
   1 2 / 3 4 / 5 6 / 7 8 9 on six columns (QA 2026-09-29) */
@media (min-width: 60.0625rem) {
  .kw-page .gm--kawaii .gmk-page { grid-auto-flow: row; }
  .kw-page .gm--kawaii .gm-f--colour, .kw-page .gm--kawaii .gm-f--type { grid-column: span 3; }
  .kw-page .gm--kawaii .gm-f--ui { grid-column: span 4; }
}
/* the board, phone: the character keeps looking at the bright button beside it instead of over it */
@media (max-width: 40rem) {
  .kw-page .gm--kawaii .gmk-hero { flex-wrap: nowrap; }
  .kw-page .gm--kawaii .gmk-hero .gmk-btn { flex: 0 1 auto; min-width: 0; }
}