/* ==========================================================================
   DYSTOPIAN BUREAUCRATIC — Build with it (Design Completion Campaign, 2026-09-29).
   A schedule attached to the form: a second sheet on the grey desk between
   the form's header and its record, its fields filed as numbered sections
   with reference codes and ruled rows. Faces are the room's (SpaceMonoDB,
   SpecialEliteDB, declared in x-dystopian-bureaucratic.css). Every class is
   gdb- or scoped to .gm--dystopian-bureaucratic. The only motion is a stamp
   landing on press, in two steps.
   ========================================================================== */
.gm--dystopian-bureaucratic {
  --gm-tag-inverse: var(--gm-color-paper);
  max-width: calc(980px + 32px); margin: 0 auto; padding: 24px 16px 0;
  color: var(--gm-color-ink); font: 400 16px/1.6 var(--gm-font);
}
.gm--dystopian-bureaucratic .gm__head { margin-bottom: 18px; }
.gm--dystopian-bureaucratic .gm__title { font: 400 clamp(26px, 3.6vw, 38px)/1.05 var(--gm-font-type); text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 0 .5px rgba(22, 25, 29, .9), .4px .3px 0 rgba(22, 25, 29, .4); }
.gm--dystopian-bureaucratic .gm__key, .gm--dystopian-bureaucratic .gm__get { opacity: 1; color: var(--gm-color-ink-2); }
.gm--dystopian-bureaucratic a { color: var(--gm-color-stamp); text-underline-offset: 3px; }
.gm--dystopian-bureaucratic .gm-t { font: 700 11px/1.6 var(--gm-font); text-transform: uppercase; letter-spacing: .04em; }
.gm--dystopian-bureaucratic .gm-more summary { font: 700 12px/1.4 var(--gm-font); text-transform: uppercase; letter-spacing: .08em; }
.gm--dystopian-bureaucratic .gm-ls__why, .gm--dystopian-bureaucratic .gm-ls__from { opacity: 1; color: var(--gm-color-ink-2); }
.gm--dystopian-bureaucratic :focus-visible { outline: 3px solid var(--gm-color-stamp); outline-offset: 2px; }

/* ---- the sheet ---- */
.gdb-sheet {
  position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  background: var(--gm-color-paper); border: 1px solid var(--gm-color-ink-2); box-shadow: 4px 4px 0 var(--gm-color-shadow);
  padding: clamp(16px, 4vw, 44px);
}
.gdb-sheet::before { content: ""; position: absolute; left: clamp(8px, 2vw, 20px); top: 0; bottom: 0; border-left: 1px dashed var(--gm-color-shadow); }
.gdb-hdr { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 8px 12px; border: 2px solid var(--gm-color-ink); font-size: 12px; text-transform: uppercase; color: var(--gm-color-ink-2); }

/* sections, filed as the room files them */
.gdb-s { position: relative; min-width: 0; border: 1px solid var(--gm-color-ink-2); }
.gdb-s--wide { grid-column: 1 / -1; }
.gdb-s .gm-f__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding: 6px 12px; background: #E3E6E9; border-bottom: 1px solid var(--gm-color-ink-2); }
.gdb-s .gm-f__n { background: var(--gm-color-ink); color: var(--gm-color-paper); padding: 0 8px; font: 700 14px/1.4 var(--gm-font); }
.gdb-s .gm-f__name { font: 700 14px/1.4 var(--gm-font); text-transform: uppercase; letter-spacing: .08em; }
.gdb-ref { margin-left: auto; font-size: 11px; color: var(--gm-color-ink-2); }
.gdb-s .gm-f__note { margin: 12px 16px 0; opacity: 1; font-size: 13px; color: var(--gm-color-ink-2); }
.gdb-s .gm-f__spec { padding: 14px 16px 0; }
.gdb-s .gm-more { margin: 12px 16px 14px; }
.gdb-cap { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--gm-color-ink-2); }
.gdb-lab { display: inline-block; margin-right: 4px; padding: 0 5px; border: 1px solid var(--gm-color-ink); color: var(--gm-color-ink); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.gdb-p { margin: 0; }
.gdb-code { margin: 8px 0 0; font-size: 11px; text-transform: uppercase; color: var(--gm-color-ink-2); }
.gdb-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* stamps: furniture on empty paper */
.gdb-stamp { position: absolute; z-index: 2; display: inline-block; padding: 4px 12px; pointer-events: none; border: 4px double var(--gm-color-stamp); color: var(--gm-color-stamp); font: 700 20px/1 var(--gm-font); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; opacity: .85; mix-blend-mode: multiply; }
.gdb-stamp--1 { right: clamp(24px, 6vw, 70px); top: clamp(14px, 3vw, 38px); transform: rotate(-7deg); }
.gdb-stamp--3 { right: 6px; top: 50%; font-size: 12px; padding: 1px 6px; border-width: 3px; transform: translateY(-50%) rotate(-5deg); }

/* 1 colour */
.gdb-sws { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--gm-color-ink); font-size: 11px; }
.gdb-sws li { display: grid; min-width: 0; border-right: 1px solid var(--gm-color-ink); border-bottom: 1px solid var(--gm-color-ink); margin: 0 -1px -1px 0; }
.gdb-sws span { display: block; height: 36px; border-bottom: 1px solid var(--gm-color-ink); }
.gdb-sws b, .gdb-sws code { padding: 0 6px; font: inherit; text-transform: uppercase; }
.gdb-sws b { font-weight: 700; padding-top: 3px; }
.gdb-sws code { color: var(--gm-color-ink-2); padding-bottom: 3px; }

/* 2 typography */
.gdb-typed { margin: 0 0 8px; font: 400 26px/1.1 var(--gm-font-type); text-transform: uppercase; text-shadow: 0 0 .5px rgba(22, 25, 29, .9), .4px .3px 0 rgba(22, 25, 29, .4); }

/* 3 layout: ruled rows */
.gdb-rows { margin: 0; }
.gdb-rows div { display: grid; grid-template-columns: 120px minmax(0, 1fr); border-bottom: 1px solid var(--gm-color-desk); }
.gdb-rows dt, .gdb-rows dd { margin: 0; padding: 6px 8px; }
.gdb-rows dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gm-color-ink-2); border-right: 1px solid var(--gm-color-desk); }

/* 4 shape */
.gdb-shapes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 12px; text-transform: uppercase; }
.gdb-r1 { padding: 8px 10px; border: 1px solid var(--gm-color-ink); }
.gdb-r2 { padding: 8px 10px; border: 2px solid var(--gm-color-ink); }
.gdb-r4 { padding: 6px 10px; border: 4px double var(--gm-color-stamp); color: var(--gm-color-stamp); font-weight: 700; }

/* 5 imagery */
.gdb-none { display: grid; place-items: center; min-height: 64px; border: 1px dashed var(--gm-color-shadow); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--gm-color-ink-2); }

/* 6 components */
.gdb-ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.gdb-nav ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--gm-color-ink); }
.gdb-nav li { position: relative; border-bottom: 1px solid var(--gm-color-desk); }
.gm--dystopian-bureaucratic .gdb-nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; color: var(--gm-color-ink); text-decoration: none; font-size: 14px; }
.gm--dystopian-bureaucratic .gdb-nav a:hover { background: var(--gm-color-ink); color: var(--gm-color-paper); }
.gdb-nav a span { color: var(--gm-color-ink-2); font-size: 12px; }
.gdb-nav a i { margin-left: auto; font-style: normal; font-size: 10px; color: var(--gm-color-ink-2); }
.gdb-nav a[aria-current] { font-weight: 700; }
.gdb-nav a[aria-current] i { visibility: hidden; }
.gm--dystopian-bureaucratic .gdb-card { display: block; border: 1px solid var(--gm-color-ink-2); color: var(--gm-color-ink); text-decoration: none; }
.gdb-card__hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 10px; background: #E3E6E9; border-bottom: 1px solid var(--gm-color-ink-2); }
.gdb-n { background: var(--gm-color-ink); color: var(--gm-color-paper); padding: 0 7px; font-weight: 700; font-size: 13px; }
.gdb-card__hd b { font: 400 16px/1.3 var(--gm-font-type); text-transform: uppercase; }
.gdb-card__hd i { margin-left: auto; font-style: normal; font-size: 10px; color: var(--gm-color-ink-2); }
.gm--dystopian-bureaucratic .gdb-card:hover .gdb-card__hd b { background: var(--gm-color-ink); color: var(--gm-color-paper); }
.gdb-card .gdb-rows div { grid-template-columns: 90px minmax(0, 1fr); }
.gdb-slip { padding: 10px 12px 12px; border: 1px dashed var(--gm-color-ink-2); }
.gdb-slip .gdb-code { margin: 0 0 8px; }
.gdb-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 10px; }
.gdb-field label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gm-color-ink-2); padding-bottom: 10px; }
.gdb-field input { min-width: 0; height: 44px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--gm-color-ink); border-radius: 0; background: transparent; color: var(--gm-color-ink); font: 400 17px var(--gm-font-type); }
.gdb-field input:focus-visible { border-bottom-width: 2px; }
.gdb-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.gdb-btn { min-height: 44px; padding: 0 14px; border: 2px solid var(--gm-color-ink); border-radius: 0; background: var(--gm-color-paper); color: var(--gm-color-ink); font: 700 13px var(--gm-font); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; transition: none; }
.gdb-btn:hover { background: var(--gm-color-ink); color: var(--gm-color-paper); }
.gdb-btn:active { border: 4px double var(--gm-color-stamp); background: var(--gm-color-paper); color: var(--gm-color-stamp); }
.gdb-btn:disabled { border-style: dashed; color: var(--gm-color-ink-2); background: var(--gm-color-paper); text-decoration: line-through; text-decoration-thickness: .5em; text-decoration-color: rgba(22, 25, 29, .85); cursor: not-allowed; }

/* 7 motion: the stamp lands on press, two steps */
.gdb-press { display: flex; align-items: center; min-height: 64px; }
@media (prefers-reduced-motion: no-preference) {
  .gdb-btn--stamp:active { animation: gdb-land .18s steps(2) both; }
  @keyframes gdb-land { from { transform: scale(1.25) rotate(-4deg); } to { transform: scale(1) rotate(-4deg); } }
}
.gdb-btn--stamp:active { transform: rotate(-4deg); }

/* 8 redaction */
.gdb-redline { font: 400 17px/1.8 var(--gm-font-type); }
.gdb-bar { display: inline-block; max-width: 60%; height: 1.05em; vertical-align: -0.15em; background: var(--gm-color-ink); border-radius: 1px; }
.gdb-why { font: 700 10px/1 var(--gm-font); vertical-align: super; color: var(--gm-color-ink-2); }

@media (max-width: 860px) {
  .gdb-ui { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gdb-slip { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .gdb-sheet, .gdb-ui { grid-template-columns: minmax(0, 1fr); }
  .gdb-sheet { padding-bottom: 64px; }
  .gdb-stamp--1 { font-size: 15px; top: auto; bottom: 14px; }
  .gdb-sws { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm--dystopian-bureaucratic .gm-ls li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}