<section class="br-frm" aria-label="Brutalist form elements demo">
  <div class="card">

    <div class="corner-stamp" aria-hidden="true">
      <div class="form-id">FORM NO.</div>
      <div class="form-num">BF-04</div>
    </div>

    <div class="rejected-stamp" aria-hidden="true">PENDING</div>

    <div class="form-shell">

      <!-- SECTION 1 -->
      <div class="section-stamp">
        <div class="stamp-num">01</div>
        <div class="stamp-title">Identification</div>
      </div>

      <div class="fields-block">
        <div class="row">
          <div class="cell wide">
            <div class="cell-label">Full Legal Name <span class="req">*</span></div>
            <input class="cell-input" type="text" placeholder="surname, given name" />
          </div>
          <div class="cell narrow">
            <div class="cell-label">DOB</div>
            <input class="cell-input" type="text" placeholder="DD/MM/YY" />
          </div>
        </div>
        <div class="row">
          <div class="cell">
            <div class="cell-label">Organization</div>
            <input class="cell-input" type="text" placeholder="entity or unit" />
          </div>
          <div class="cell">
            <div class="cell-label">Reference Code</div>
            <input class="cell-input" type="text" placeholder="e.g. PRJ-0039" />
          </div>
        </div>
        <div class="row">
          <div class="cell wide">
            <div class="cell-label">Contact Address <span class="req">*</span></div>
            <input class="cell-input" type="text" placeholder="street, city, postal code" />
          </div>
          <div class="cell">
            <div class="cell-label">Territory</div>
            <div class="select-wrap-inner">
              <select aria-label="Territory">
                <option>— select —</option>
                <option>Zone A — North</option>
                <option>Zone B — South</option>
                <option>Zone C — East</option>
                <option>Zone D — West</option>
              </select>
            </div>
          </div>
        </div>
      </div>

      <!-- SECTION 2 -->
      <div class="section-stamp">
        <div class="stamp-num">02</div>
        <div class="stamp-title">Classification</div>
      </div>

      <div class="check-section">
        <div class="check-grid">
          <label class="check-item">
            <input type="checkbox" checked />
            <div class="check-box" aria-hidden="true"></div>
            <span class="check-label">Structural Review</span>
          </label>
          <label class="check-item">
            <input type="checkbox" />
            <div class="check-box" aria-hidden="true"></div>
            <span class="check-label">Material Audit</span>
          </label>
          <label class="check-item">
            <input type="checkbox" checked />
            <div class="check-box" aria-hidden="true"></div>
            <span class="check-label">Site Inspection</span>
          </label>
          <label class="check-item">
            <input type="checkbox" />
            <div class="check-box" aria-hidden="true"></div>
            <span class="check-label">Load Testing</span>
          </label>
          <label class="check-item">
            <input type="checkbox" />
            <div class="check-box" aria-hidden="true"></div>
            <span class="check-label">Environmental</span>
          </label>
          <label class="check-item">
            <input type="checkbox" checked />
            <div class="check-box" aria-hidden="true"></div>
            <span class="check-label">Compliance</span>
          </label>
        </div>
      </div>

      <!-- SECTION 3 -->
      <div class="section-stamp">
        <div class="stamp-num">03</div>
        <div class="stamp-title">Priority Level</div>
      </div>

      <div class="radio-section">
        <div class="radio-row">
          <label class="radio-opt">
            <input type="radio" name="br-frm-priority" />
            <div class="opt-inner">
              <span class="opt-code">LVL-1</span>
              <span class="opt-name">ROUTINE</span>
              <span class="opt-sub">28–30 working days</span>
            </div>
          </label>
          <label class="radio-opt">
            <input type="radio" name="br-frm-priority" checked />
            <div class="opt-inner">
              <span class="opt-code">LVL-2</span>
              <span class="opt-name">URGENT</span>
              <span class="opt-sub">5–10 working days</span>
            </div>
          </label>
          <label class="radio-opt">
            <input type="radio" name="br-frm-priority" />
            <div class="opt-inner">
              <span class="opt-code">LVL-3</span>
              <span class="opt-name">CRITICAL</span>
              <span class="opt-sub">Within 48 hours</span>
            </div>
          </label>
        </div>
      </div>

      <!-- SECTION 4 -->
      <div class="section-stamp">
        <div class="stamp-num">04</div>
        <div class="stamp-title">Remarks</div>
      </div>

      <div class="textarea-section">
        <div class="textarea-wrap">
          <div class="textarea-header">
            <span class="textarea-header-label">Supplementary Notes</span>
            <span class="textarea-header-count">0 / 400</span>
          </div>
          <textarea placeholder="Enter any relevant observations, deviations from standard, or additional context…" aria-label="Supplementary Notes"></textarea>
        </div>
      </div>

      <!-- BUDGET SLIDER -->
      <div class="slider-section">
        <div class="slider-wrap">
          <div class="slider-top">
            <span class="slider-label">Allocated Budget</span>
            <span class="slider-val" data-br-frm-slider-val>$35,000</span>
          </div>
          <input type="range" min="0" max="100" value="35" data-br-frm-slider aria-label="Allocated Budget" />
          <div class="slider-ticks">
            <span class="tick">$0</span>
            <span class="tick">$25K</span>
            <span class="tick">$50K</span>
            <span class="tick">$75K</span>
            <span class="tick">$100K</span>
          </div>
        </div>
      </div>

      <!-- SUBMIT -->
      <div class="submit-row">
        <div class="submit-note">
          By submitting this form you confirm all information is accurate. <strong>False declarations</strong> may result in rejection and further review under Section 14.3 of operational protocol.
        </div>
        <button class="btn-submit" type="button">SUBMIT</button>
        <button class="btn-clear" type="button">CLEAR</button>
      </div>

    </div>
  </div>
</section>

/* ─── 02 Brutalist Form Elements — bureaucratic inspection form ── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,400&family=Barlow+Condensed:wght@400;700;900&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

.br-frm {
  --br-frm-paper: #ede8df;
  --br-frm-dark: #0f0f0f;
  --br-frm-red: #c8001a;
  --br-frm-ink: #1a1a2e;
  --br-frm-rule: #b5a99a;
  --br-frm-yellow: #f0c000;

  position: relative;
  width: 100%;
  min-height: 1180px;
  background: var(--br-frm-paper);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.br-frm *,
.br-frm *::before,
.br-frm *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Ruled paper lines — was body::before; scoped to wrapper. */
.br-frm::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 31px,
    var(--br-frm-rule) 31px,
    var(--br-frm-rule) 32px
  );
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* Red margin line — was body::after; scoped to wrapper. */
.br-frm::after {
  content: '';
  position: absolute;
  top: 0;
  left: 64px;
  width: 2px;
  height: 100%;
  background: #e8888a;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.br-frm .card {
  position: relative;
  width: 100%;
  max-width: none;
  z-index: 1;
}

.br-frm .form-shell {
  position: relative;
  z-index: 1;
  padding: 40px 48px 40px 90px;
  max-width: 900px;
}

/* Corner stamps (form ID + rejected) — were position:fixed; now
   position:absolute inside the wrapper so they don't escape. */
.br-frm .corner-stamp {
  position: absolute;
  top: 20px;
  right: 28px;
  z-index: 10;
  text-align: right;
}
.br-frm .corner-stamp .form-id {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  color: #bbb;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.br-frm .corner-stamp .form-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: var(--br-frm-dark);
  line-height: 1;
}
.br-frm .rejected-stamp {
  position: absolute;
  bottom: 40px;
  right: 60px;
  border: 6px solid var(--br-frm-red);
  color: var(--br-frm-red);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 6px;
  padding: 6px 20px;
  transform: rotate(-18deg);
  opacity: 0.12;
  pointer-events: none;
  z-index: 2;
}

/* SECTION HEADER STAMP */
.br-frm .section-stamp {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.br-frm .stamp-num {
  width: 48px;
  height: 48px;
  border: 4px solid var(--br-frm-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--br-frm-dark);
  flex-shrink: 0;
}
.br-frm .stamp-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--br-frm-dark);
  letter-spacing: 4px;
  text-transform: uppercase;
  border-bottom: 4px solid var(--br-frm-dark);
  flex: 1;
  padding-bottom: 6px;
}

/* Fields block */
.br-frm .fields-block {
  border: 2px solid var(--br-frm-dark);
  margin-bottom: 32px;
  background: var(--br-frm-paper);
}
.br-frm .fields-block .row {
  display: flex;
  border-bottom: 2px solid var(--br-frm-dark);
}
.br-frm .fields-block .row:last-child { border-bottom: none; }
.br-frm .fields-block .cell {
  flex: 1;
  position: relative;
  border-right: 2px solid var(--br-frm-dark);
}
.br-frm .fields-block .cell:last-child { border-right: none; }
.br-frm .fields-block .cell.wide { flex: 2; }
.br-frm .fields-block .cell.narrow { flex: 0.5; }

.br-frm .cell-label {
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--br-frm-dark);
  padding: 7px 12px 3px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.br-frm .cell-label .req {
  color: var(--br-frm-red);
  font-size: 14px;
  line-height: 0;
}

.br-frm .cell-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 15px;
  color: var(--br-frm-ink);
  padding: 4px 12px 10px;
  display: block;
}
.br-frm .cell-input::placeholder {
  color: #bbb;
  font-style: italic;
  font-size: 13px;
}
.br-frm .cell-input:focus {
  background: rgba(0, 51, 170, 0.04);
}

/* Inline select inside the Territory cell — strip its own border so
   it inherits the cell's grid border. */
.br-frm .fields-block .select-wrap-inner {
  position: relative;
  border: none;
  margin: 0;
}
.br-frm .fields-block .select-wrap-inner::after {
  content: '▼';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  pointer-events: none;
  color: var(--br-frm-dark);
}
.br-frm select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 14px;
  color: var(--br-frm-ink);
  padding: 14px 40px 14px 14px;
  cursor: pointer;
}

/* Checkboxes */
.br-frm .check-section { margin-bottom: 32px; }
.br-frm .check-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px solid var(--br-frm-dark);
  background: var(--br-frm-paper);
}
.br-frm .check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-right: 2px solid var(--br-frm-dark);
  border-bottom: 2px solid var(--br-frm-dark);
  cursor: pointer;
  position: relative;
  transition: background 0.1s;
}
.br-frm .check-item:hover { background: rgba(0, 0, 0, 0.04); }
.br-frm .check-item:nth-child(3n) { border-right: none; }
.br-frm .check-item:nth-child(n+4) { border-bottom: none; }

.br-frm .check-box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--br-frm-dark);
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.br-frm input[type="checkbox"] { display: none; }
.br-frm input[type="checkbox"]:checked + .check-box {
  background: var(--br-frm-dark);
}
.br-frm input[type="checkbox"]:checked + .check-box::after {
  content: '✗';
  color: var(--br-frm-paper);
  font-size: 14px;
  line-height: 1;
}
.br-frm .check-label {
  font-size: 12px;
  color: var(--br-frm-dark);
  letter-spacing: 0.5px;
}

/* Radio — priority */
.br-frm .radio-section { margin-bottom: 32px; }
.br-frm .radio-row {
  display: flex;
  border: 2px solid var(--br-frm-dark);
  background: var(--br-frm-paper);
}
.br-frm .radio-opt {
  flex: 1;
  position: relative;
  border-right: 2px solid var(--br-frm-dark);
  cursor: pointer;
  overflow: hidden;
}
.br-frm .radio-opt:last-child { border-right: none; }
.br-frm .radio-opt input { position: absolute; opacity: 0; }
.br-frm .radio-opt .opt-inner {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.1s;
}
.br-frm .radio-opt input:checked ~ .opt-inner { background: var(--br-frm-dark); }
.br-frm .radio-opt input:checked ~ .opt-inner .opt-code { color: var(--br-frm-yellow); }
.br-frm .radio-opt input:checked ~ .opt-inner .opt-name { color: var(--br-frm-paper); }
.br-frm .radio-opt input:checked ~ .opt-inner .opt-sub { color: #888; }
.br-frm .opt-code {
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #888;
  font-weight: 600;
}
.br-frm .opt-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--br-frm-dark);
  letter-spacing: 1px;
}
.br-frm .opt-sub {
  font-size: 9px;
  color: #999;
  letter-spacing: 0.5px;
}

/* Textarea */
.br-frm .textarea-section { margin-bottom: 32px; }
.br-frm .textarea-wrap {
  border: 2px solid var(--br-frm-dark);
  position: relative;
  background: var(--br-frm-paper);
}
.br-frm .textarea-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 2px solid var(--br-frm-dark);
  background: var(--br-frm-dark);
}
.br-frm .textarea-header-label {
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--br-frm-paper);
  font-weight: 600;
}
.br-frm .textarea-header-count {
  font-size: 9px;
  color: #888;
  letter-spacing: 2px;
}
.br-frm textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 14px;
  color: var(--br-frm-ink);
  padding: 16px 14px;
  resize: none;
  min-height: 90px;
  line-height: 2;
}
.br-frm textarea::placeholder { color: #bbb; font-style: italic; }

/* Slider */
.br-frm .slider-section { margin-bottom: 32px; }
.br-frm .slider-wrap {
  border: 2px solid var(--br-frm-dark);
  padding: 16px 20px;
  background: var(--br-frm-paper);
}
.br-frm .slider-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.br-frm .slider-label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; }
.br-frm .slider-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: var(--br-frm-red);
  line-height: 1;
}
.br-frm input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--br-frm-dark);
  outline: none;
  cursor: pointer;
  margin-bottom: 10px;
}
.br-frm input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--br-frm-red);
  border: 3px solid var(--br-frm-dark);
  cursor: pointer;
}
.br-frm input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--br-frm-red);
  border: 3px solid var(--br-frm-dark);
  cursor: pointer;
}
.br-frm .slider-ticks {
  display: flex;
  justify-content: space-between;
}
.br-frm .tick { font-size: 9px; color: #999; letter-spacing: 1px; }

/* Submit */
.br-frm .submit-row {
  display: flex;
  gap: 0;
  border: 2px solid var(--br-frm-dark);
  background: var(--br-frm-paper);
}
.br-frm .submit-note {
  flex: 1;
  padding: 14px 18px;
  border-right: 2px solid var(--br-frm-dark);
  font-size: 10px;
  color: #888;
  line-height: 1.8;
  font-style: italic;
}
.br-frm .submit-note strong { color: var(--br-frm-dark); font-style: normal; }
.br-frm .btn-submit {
  background: var(--br-frm-red);
  color: var(--br-frm-paper);
  border: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 0 40px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.1s;
}
.br-frm .btn-submit:hover { background: #9a0012; }
.br-frm .btn-clear {
  background: transparent;
  color: var(--br-frm-dark);
  border: none;
  border-left: 2px solid var(--br-frm-dark);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0 20px;
  cursor: pointer;
}
.br-frm .btn-clear:hover { background: rgba(0, 0, 0, 0.05); }

@media (max-width: 760px) {
  .br-frm .form-shell { padding: 32px 24px 40px 40px; }
  .br-frm::after { left: 28px; }
  .br-frm .fields-block .row,
  .br-frm .submit-row { flex-direction: column; }
  .br-frm .fields-block .cell,
  .br-frm .submit-note,
  .br-frm .btn-submit,
  .br-frm .btn-clear { border-right: none; border-bottom: 2px solid var(--br-frm-dark); }
  .br-frm .check-grid { grid-template-columns: 1fr 1fr; }
  .br-frm .radio-row { flex-direction: column; }
  .br-frm .radio-opt { border-right: none; border-bottom: 2px solid var(--br-frm-dark); }
  .br-frm .radio-opt:last-child { border-bottom: none; }
  .br-frm .corner-stamp { top: 12px; right: 16px; }
  .br-frm .rejected-stamp { right: 20px; font-size: 32px; padding: 4px 14px; }
}

(() => {
  // Scoped slider handler — finds the slider + value display inside
  // the .br-frm wrapper only, so multiple demos can render on the
  // same page without colliding on element IDs.
  const root = document.querySelector('.br-frm');
  if (!root) return;
  const slider = root.querySelector('[data-br-frm-slider]');
  const valEl = root.querySelector('[data-br-frm-slider-val]');
  if (!slider || !valEl) return;
  function paint() {
    const dollars = Math.round(slider.value * 1000);
    valEl.textContent = '$' + dollars.toLocaleString();
  }
  slider.addEventListener('input', paint);
  paint();
})();