/* NEO-BRUTALISM — Build with it (Design Completion Campaign, 2026-09-29).
   A component-kit sheet on a grid one module breaks: every field an outlined
   card with a hard shadow, square corners, one 3px stroke. Faces and fills are
   the room's (x-neo-brutalism.css): Archivo Black, Space Grotesk. */
.gm--neo-brutalism {
  --gm-tag-inverse: var(--gm-color-ground);
  --gnb-d: var(--nb-display, "Arial Black", sans-serif);
  --gnb-b: var(--nb-body, "Helvetica Neue", Arial, sans-serif);
  --gnb-m: 1;
  max-width: 1080px; margin: 40px auto 0; padding: clamp(20px, 4vw, 40px);
  background: var(--gm-color-ground); color: var(--gm-color-ink);
  border: 3px solid var(--gm-color-ink); box-shadow: calc(12px * var(--gnb-m)) calc(12px * var(--gnb-m)) 0 var(--gm-color-ink);
  font: 500 18px/1.55 var(--gnb-b);
}
.gm--neo-brutalism .gm__title { font: 400 clamp(32px, 5vw, 56px)/1 var(--gnb-d); }
.gm--neo-brutalism .gm__lede { font-weight: 700; }
.gm--neo-brutalism .gm__key, .gm--neo-brutalism .gm__get { opacity: 1; font-size: 15px; }
.gm--neo-brutalism .gm-t { border-width: 2px; font-weight: 700; }
.gm--neo-brutalism :focus-visible { outline: 3px solid var(--gm-color-ink); outline-offset: 4px; }
.gm--neo-brutalism .gm-gap { opacity: 1; border-width: 2px; }

.gnb-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.gnb-f { --s: 6px; min-width: 0; padding: 20px; background: var(--gm-color-ground); border: 3px solid var(--gm-color-ink); box-shadow: calc(var(--s) * var(--gnb-m)) calc(var(--s) * var(--gnb-m)) 0 var(--gm-color-ink); }
.gnb-f--wide { grid-column: span 2; }
.gnb-f--pink { background: var(--gm-color-pink); }
.gnb-f--mint { background: var(--gm-color-mint); }
.gnb-f--yel { background: var(--gm-color-yellow); }
.gnb-f--blue { background: var(--gm-color-blue); }
/* the module that breaks the grid */
.gnb-f--off { --s: 10px; transform: translate(14px, 14px) rotate(-1.5deg); background: var(--gm-color-orange); }
/* the overscaled module: biggest shadow, highest rank */
.gnb-f--ui { --s: 16px; grid-column: 1 / -1; }
.gnb-f .gm-f__n { display: inline-block; padding: 0 6px; border: 2px solid var(--gm-color-ink); background: var(--gm-color-yellow); font: 700 13px/1.5 var(--gnb-b); }
.gnb-f--yel .gm-f__n { background: var(--gm-color-ground); }
.gnb-f .gm-f__name { font: 400 22px/1.1 var(--gnb-d); }
.gnb-f .gm-f__note { opacity: 1; font-size: 15px; }
.gnb-f .gm-more summary { min-height: 44px; display: flex; align-items: center; font-size: 14px; }
.gnb-cap { margin: 12px 0 0; font-size: 15px; font-weight: 600; }

.gnb-sws { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.gnb-sws li { display: grid; gap: 4px; min-width: 0; font-size: 13px; }
.gnb-chip { display: block; aspect-ratio: 1; border: 3px solid var(--gm-color-ink); box-shadow: 3px 3px 0 var(--gm-color-ink); }
.gnb-sws code { font: 600 11px/1.2 var(--gnb-b); overflow-wrap: anywhere; }
.gnb-big { margin: 0; font: 400 56px/.9 var(--gnb-d); letter-spacing: -0.02em; }
.gnb-mid { margin: 10px 0 0; font-weight: 700; }
.gnb-mono { margin: 8px 0 0; font: 500 14px/1.4 ui-monospace, "SF Mono", Menlo, monospace; }
.gnb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gnb-grid i { height: 30px; border: 3px solid var(--gm-color-ink); background: var(--gm-color-ground); }
.gnb-grid__x { transform: translate(8px, 8px) scale(1.15); background: var(--gm-color-yellow) !important; box-shadow: 4px 4px 0 var(--gm-color-ink); }
.gnb-ranks { display: flex; gap: 22px; align-items: flex-end; padding: 0 16px 16px 0; }
.gnb-ranks span { display: grid; place-items: center; width: 52px; height: 52px; border: 3px solid var(--gm-color-ink); background: var(--gm-color-ground); box-shadow: var(--s) var(--s) 0 var(--gm-color-ink); font: 400 18px/1 var(--gnb-d); }
.gnb-iso { display: block; width: 130px; margin-bottom: 8px; }

/* components */
.gnb-nav { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 24px; }
.gnb-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 3px solid var(--gm-color-ink); background: var(--gm-color-ground); color: var(--gm-color-ink); text-decoration: none; font-weight: 700; box-shadow: 4px 4px 0 var(--gm-color-ink); }
.gnb-nav a[aria-current="page"] { background: var(--gm-color-yellow); transform: translate(4px, 4px); box-shadow: 0 0 0 var(--gm-color-ink); }
.gnb-ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px; align-items: start; }
.gnb-card { display: grid; gap: 6px; padding: 20px; border: 3px solid var(--gm-color-ink); background: var(--gm-color-mint); color: var(--gm-color-ink); text-decoration: none; box-shadow: 8px 8px 0 var(--gm-color-ink); }
.gnb-card b { font: 400 24px/1.1 var(--gnb-d); }
.gnb-form { display: grid; gap: 10px; }
.gnb-form label { font-weight: 700; }
.gnb-form input { min-height: 48px; padding: 8px 12px; border: 3px solid var(--gm-color-ink); border-radius: 0; background: var(--gm-color-ground); box-shadow: 4px 4px 0 var(--gm-color-ink); }
.gnb-form input:focus-visible { background: var(--gm-color-yellow); }
.gnb-btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.gnb-btn { min-height: 52px; padding: 0 22px; border: 3px solid var(--gm-color-ink); border-radius: 0; background: var(--gm-color-pink); color: var(--gm-color-ink); font: 400 18px/1 var(--gnb-d) !important; box-shadow: 6px 6px 0 var(--gm-color-ink); cursor: pointer; transition: none; }
.gnb-btn--2 { background: var(--gm-color-blue); }
.gnb-btn--or { background: var(--gm-color-orange); min-height: 64px; font-size: 22px !important; }
.gnb-btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--gm-color-ink); }
.gnb-btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--gm-color-ink); }
.gnb-btn:disabled { background: var(--gm-color-ground); box-shadow: none; text-decoration: line-through; cursor: not-allowed; transform: none; }
.gnb-phase { display: flex; gap: 18px; align-items: flex-end; padding-bottom: 8px; }
.gnb-phase span { display: grid; place-items: center; min-height: 56px; padding: 0 16px; font: 400 16px/1 var(--gnb-d); }
.gnb-phase__k { border: 3px solid var(--gm-color-ink); background: var(--gm-color-yellow); box-shadow: 6px 6px 0 var(--gm-color-ink); }
.gnb-phase__h { border: 2px solid var(--gm-color-ink); border-radius: 14px; background: #E6D7A3; box-shadow: 4px 4px 0 var(--gm-color-ink); }
@media (prefers-reduced-motion: reduce) { .gnb-btn:hover { transform: none; box-shadow: 6px 6px 0 var(--gm-color-ink); } }

@media (max-width: 860px) {
  .gnb-sheet { grid-template-columns: minmax(0, 1fr); }
  .gnb-f--wide, .gnb-f--ui { grid-column: auto; }
  .gnb-f--off { transform: rotate(-1deg); margin: 0 6px; }
  .gnb-ui { grid-template-columns: minmax(0, 1fr); }
  .gnb-sws { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .gm--neo-brutalism { --gnb-m: 0.6; } .gnb-f { box-shadow: calc(var(--s) * .6) calc(var(--s) * .6) 0 var(--gm-color-ink); } }