/* =====================================================================
   Day 5/30 — Form PC-05, Statement of Circumstance

   The world is a triplicate carbon-copy form. Pale green stock, black
   preprinted rules and labels, and one rule that carries the whole
   idea: anything PREPRINTED on the form is black, anything TYPED onto
   it afterwards is carbon blue. The excuse is typed. The labels are not.

   Red appears exactly once, in the stamp. Nothing else on the page is
   red, so the stamp landing means something.

   Radius is 0 everywhere. Government forms do not have rounded corners.
   ===================================================================== */

:root {
  /* paper and ink */
  --paper:      #DDE2D4;
  --paper-lit:  #E6EADD;  /* the writing area, a shade lighter */
  --ink:        #17191A;  /* preprinted black */
  --ink-soft:   #4E5650;  /* preprinted, secondary */
  --carbon:     #33417F;  /* typed by machine, after printing */
  --rule:       #A8B19E;  /* hairlines and ruled lines */
  --rule-soft:  #C3CAB8;
  --stamp:      #B0342C;

  /* type */
  --print: 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --typed: 'Courier Prime', 'Courier New', monospace;
  --label-face: 'JetBrains Mono', monospace;

  /* the ruled writing area is built on this pitch */
  --pitch: 28px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--print);
  font-size: 16px;
  line-height: 1.4;

  /* the fibre of cheap form stock */
  background-image:
    repeating-linear-gradient(90deg, rgb(23 25 26 / 0.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgb(23 25 26 / 0.018) 0 1px, transparent 1px 4px);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- the sheet ---------- */

.sheet {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 0 4.5rem;
  border-left: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft);
  background:
    linear-gradient(90deg, rgb(23 25 26 / 0.03) 0 2px, transparent 2px),
    linear-gradient(270deg, rgb(23 25 26 / 0.03) 0 2px, transparent 2px);
}

/* ---------- masthead ---------- */

.masthead {
  background: var(--ink);
  color: var(--paper);
  padding: 1.125rem 1rem 1rem;
}

.masthead__org {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rule);
}

.masthead__title {
  margin: 0.375rem 0 0.5rem;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.masthead__form {
  margin: 0;
  font-family: var(--typed);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--rule);
}

/* ---------- filing strip ---------- */

.strip {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 0.8fr;
  border-bottom: 2px solid var(--ink);
}

.cell {
  padding: 0.5rem 0.75rem 0.5rem;
  border-right: 1px solid var(--rule);
  min-width: 0;
}
.cell:last-child { border-right: 0; }

.cell__label,
.field__label {
  display: block;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cell__value {
  display: block;
  margin-top: 0.1875rem;
  font-family: var(--typed);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--carbon);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- fields ---------- */

.field {
  margin: 0;
  padding: 0.875rem 1rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--rule);
}

.field__label { padding: 0; }

.field__hint {
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  opacity: 0.75;
  text-transform: none;
}

/* ---------- option rows (the checkbox column) ---------- */

.options {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.opt {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  padding: 0.125rem 0;
  cursor: pointer;
  position: relative;
}

.opt input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}

.opt__box {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--ink);
  background: var(--paper-lit);
  display: grid;
  place-items: center;
  transition: background 140ms var(--ease-out);
}

.opt__box::after {
  content: '';
  width: 0.75rem;
  height: 0.75rem;
  background: var(--carbon);
  transform: scale(0);
  transition: transform 160ms var(--ease-out);
  clip-path: polygon(
    12% 0%, 50% 36%, 88% 0%, 100% 12%, 64% 50%,
    100% 88%, 88% 100%, 50% 64%, 12% 100%, 0% 88%,
    36% 50%, 0% 12%
  );
}

.opt input:checked + .opt__box::after { transform: scale(1); }

.opt input:focus-visible + .opt__box {
  outline: 2px solid var(--carbon);
  outline-offset: 2px;
}

.opt__text {
  font-family: var(--typed);
  font-size: 0.9375rem;
  line-height: 1.25;
  color: var(--ink-soft);
  transition: color 140ms var(--ease-out);
}

.opt input:checked ~ .opt__text {
  color: var(--carbon);
  font-weight: 700;
}

/* tone row: same control, laid out across */

/* Narrow screens keep the same column rhythm as section 1. The tones
   only sit on one line once there is room for all three. */
.tones {
  display: flex;
  flex-direction: column;
  margin-top: 0.25rem;
}

.opt--inline { flex: 0 1 auto; }

/* ---------- the statement ---------- */

.field--statement { padding-bottom: 1rem; }

.paper {
  position: relative;
  margin-top: 0.5rem;
  padding: 1rem 0.875rem 4rem;
  background-color: var(--paper-lit);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--pitch) - 9px),
    var(--rule) calc(var(--pitch) - 9px) calc(var(--pitch) - 8px),
    transparent calc(var(--pitch) - 8px) var(--pitch)
  );
  background-position: 0 1rem;
  border: 1px solid var(--rule);
  box-shadow: inset 0 1px 3px rgb(23 25 26 / 0.06);
  min-height: calc(var(--pitch) * 4 + 5rem);
}

.paper__text {
  margin: 0;
  font-family: var(--typed);
  font-size: 0.9375rem;
  line-height: var(--pitch);
  color: var(--carbon);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* empty and error states share the shape, not the voice */
.paper[data-state='empty'] .paper__text { color: var(--ink-soft); }
.paper[data-state='error'] .paper__text { color: var(--stamp); font-weight: 700; }

/* working: a caret sits on the first rule and blinks */
.paper[data-state='working'] .paper__text {
  color: var(--rule);
}
.paper[data-state='working']::after {
  content: '';
  position: absolute;
  top: 1rem;
  left: 0.875rem;
  width: 0.5625rem;
  height: 1.0625rem;
  background: var(--carbon);
  animation: blink 900ms steps(1, end) infinite;
}

@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* the reveal: the sheet feeds out of the platen, top to bottom */
.paper[data-state='done'] .paper__text {
  animation: feed 460ms var(--ease-out) both;
}

@keyframes feed {
  from { clip-path: inset(0 0 100% 0); transform: translateY(-6px); }
  to   { clip-path: inset(0 0 0 0);    transform: translateY(0); }
}

/* ---------- the stamp (the one moment) ---------- */

.stamp {
  position: absolute;
  right: 0.625rem;
  bottom: 0.5rem;
  padding: 0.375rem 0.75rem 0.3125rem;
  border: 2.5px solid var(--stamp);
  outline: 1px solid var(--stamp);
  outline-offset: 2px;
  color: var(--stamp);
  text-align: center;
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  transform: rotate(var(--tilt, -9deg)) scale(1.55);
  transform-origin: 50% 50%;
}

.stamp__word {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

.stamp__meta {
  display: block;
  margin-top: 0.1875rem;
  font-family: var(--typed);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
}

.paper[data-state='done'] .stamp {
  animation: thump 320ms cubic-bezier(0.3, 1.5, 0.5, 1) 180ms both;
}

@keyframes thump {
  from { opacity: 0;    transform: rotate(var(--tilt)) scale(1.55); filter: blur(2px); }
  70%  { opacity: 0.92; transform: rotate(var(--tilt)) scale(0.97); filter: blur(0); }
  to   { opacity: 0.86; transform: rotate(var(--tilt)) scale(1);    filter: blur(0); }
}

/* ---------- plausibility ---------- */

.meter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.meter__blocks {
  display: flex;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.meter__blocks i {
  flex: 1;
  height: 1.125rem;
  border: 1px solid var(--rule);
  background: transparent;
}

.meter__blocks i.on {
  background: var(--carbon);
  border-color: var(--carbon);
  animation: ink 220ms var(--ease-out) both;
  animation-delay: calc(var(--i) * 22ms);
}

@keyframes ink {
  from { transform: scaleY(0.2); opacity: 0; }
  to   { transform: scaleY(1);   opacity: 1; }
}

.meter__score {
  margin: 0;
  flex: none;
  font-family: var(--typed);
  font-size: 1rem;
  font-weight: 700;
  color: var(--carbon);
  font-variant-numeric: tabular-nums;
}

.meter__of { color: var(--ink-soft); font-weight: 400; font-size: 0.75rem; }

.meter[data-state='empty'] .meter__score { color: var(--ink-soft); }

.meter__verdict {
  margin: 0.5rem 0 0;
  font-family: var(--typed);
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------- actions ---------- */

.actions {
  display: flex;
  gap: 0.625rem;
  padding: 1.125rem 1rem 1rem;
}

.btn {
  flex: 1;
  min-height: 48px;
  padding: 0 0.75rem;
  font-family: var(--print);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1.5px solid var(--ink);
  cursor: pointer;
  transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out),
              background 150ms var(--ease-out), color 150ms var(--ease-out);
}

.btn--issue {
  flex: 1.5;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 4px 4px 0 var(--rule);
}

.btn--copy {
  background: transparent;
  color: var(--ink);
}

.btn:active { transform: translate(2px, 2px); }
.btn--issue:active { box-shadow: 2px 2px 0 var(--rule); }

.btn:focus-visible {
  outline: 2px solid var(--carbon);
  outline-offset: 3px;
}

.btn[disabled] {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
}
.btn--issue[disabled] { box-shadow: 4px 4px 0 var(--rule); }

.btn--copy.is-done {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- sign-off ---------- */

.signoff {
  margin: 0;
  padding: 0.5rem 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.signoff__rule {
  display: block;
  height: 0;
  border-bottom: 1px solid var(--ink);
  max-width: 14rem;
}

.signoff__label {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- day badge (same slot on all 30) ---------- */

/* A filing tab stuck to the corner of the form. It sits over whatever
   happens to be scrolled under it, so it carries its own paper backing
   rather than trusting the page behind it to stay light. */
.day {
  position: fixed;
  z-index: 55;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(0.9rem, env(safe-area-inset-bottom));
  margin: 0;
  padding: 0.3125rem 0.4375rem 0.25rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: var(--label-face);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
  user-select: none;
  pointer-events: none;
}

/* ---------- larger screens ---------- */

@media (min-width: 34rem) {
  .sheet {
    margin: 1.75rem auto 0;
    box-shadow: 0 1px 0 var(--rule-soft), 0 18px 44px rgb(23 25 26 / 0.13);
  }
  .masthead { padding: 1.5rem 1.5rem 1.25rem; }
  .masthead__title { font-size: 2.25rem; }
  .cell { padding: 0.625rem 1.5rem; }
  .field, .actions { padding-left: 1.5rem; padding-right: 1.5rem; }
  .signoff { padding-left: 1.5rem; padding-right: 1.5rem; }
  .paper { padding-left: 1.125rem; padding-right: 1.125rem; }
  .paper__text, .opt__text { font-size: 1rem; }
  .day { font-size: 0.6875rem; }
  .tones { flex-direction: row; gap: 0 1.5rem; }
}

/* Pointer devices get hover. Touch never depends on it. */
@media (hover: hover) {
  .opt:hover .opt__box { background: var(--paper); border-color: var(--carbon); }
  .opt:hover .opt__text { color: var(--ink); }
  .btn--issue:hover:not([disabled]) {
    box-shadow: 6px 6px 0 var(--rule);
    transform: translate(-1px, -1px);
  }
  .btn--copy:hover:not([disabled]) { background: var(--ink); color: var(--paper); }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  /* the stamp still has to arrive, it just does not swing in */
  .paper[data-state='done'] .stamp { opacity: 0.86; transform: rotate(var(--tilt)) scale(1); }
  .paper[data-state='working']::after { opacity: 1; }
}