/* ==========================================================================
   mrpositive.in — base stylesheet
   Direction: Indian government form preparation.
   Subject world: portal upload boxes, "must not exceed 20 KB", photocopy
   shops, rubber stamps, ballpoint on form paper.
   Signature element: the size gauge — produced bytes against a hard ceiling.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Palette: form paper, ballpoint ink, photocopy grey, stamp-pad violet.
     Every text pair clears WCAG AA; `test/contrast.test.mjs` recomputes the
     ratios from these values on every run, so a changed hex is checked rather
     than trusted. */
  --paper:        #f6f6f2;
  --paper-raised: #ffffff;
  --paper-sunk:   #e9e9e2;
  --ink:          #16233f;
  --ink-soft:     #5c6784;
  --rule:         #c9cbbe;
  --rule-strong:  #a8ab9c;
  --stamp:        #6c3fa8;
  --stamp-soft:   #efe8f8;
  --pass:         #0f7a4e;
  --limit:        #c2361e;
  --limit-soft:   #fbeae6;

  /* Type roles. */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* Content pages get a comfortable reading column; the home page is wider so
     the tool grid can breathe on a desktop. Long-form text keeps its measure
     rather than stretching to the full viewport. */
  --measure: 56rem;
  --measure-wide: 76rem;
  /* The width the masthead, footer and page container all share, so their
     edges line up on every page. Overridden per page below. */
  --page-measure: var(--measure);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 3px;
}

/* --- Base --------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  /* Faint form-paper texture: a single hairline grid, nothing louder. */
  background-image:
    linear-gradient(to right, rgba(22, 35, 63, 0.035) 1px, transparent 1px);
  background-size: 3.25rem 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 { font-size: clamp(1.85rem, 5.2vw, 2.85rem); }
h2 { font-size: clamp(1.3rem, 3.2vw, 1.6rem); margin-top: 2.2em; }
h3 { font-size: 1.1rem; margin-top: 1.8em; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; }

a {
  color: var(--stamp);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--ink); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.35em; }
li { margin-bottom: 0.4em; }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-sunk);
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
}

:focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* --- Layout ------------------------------------------------------------- */

.wrap {
  max-width: var(--page-measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* The home page runs wider so the tool grid fits more columns. The header and
   footer inherit the same value, so all three align — previously the header sat
   at the wide measure on every page, which left it visibly inset from the text
   on the 25 pages that are narrower. */
body.page--wide { --page-measure: var(--measure-wide); }

.icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  flex: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: var(--gutter);
  top: 0.5rem;
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
}

/* --- Masthead ----------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.masthead__inner {
  max-width: var(--page-measure);
  margin: 0 auto;
  /* Vertical padding is small because the links carry the height, which is what
     makes them a 44px touch target. */
  padding: 0.4rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--stamp); }

.brand__dot { color: var(--stamp); }

.nav {
  display: flex;
  gap: 0.4rem;
  font-size: 0.9rem;
}
/* 44px minimum touch target, per the accessibility floor. nowrap matters
   because Android text scaling can otherwise split a label across two lines. */
.nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.5rem;
  white-space: nowrap;
  color: var(--ink-soft);
  text-decoration: none;
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--ink); }

@media (max-width: 26rem) {
  .nav { gap: 0.1rem; font-size: 0.85rem; }
  .nav a { padding: 0 0.35rem; }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  padding: 2.4rem 0 0.5rem;
  border-bottom: 1px solid var(--rule);
}

/* Eyebrow encodes category and target — real information, not decoration. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stamp);
  margin: 0 0 0.7rem;
}

.hero__lede {
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 34rem;
  margin-bottom: 1.6rem;
}

/* --- Home hero ---------------------------------------------------------- */

/* Tools first, text afterwards. The grid sits immediately below this block and
   above the fold on a desktop, because someone arriving from a search result
   wants the tool, not an explanation of the tool. */
.hero--home {
  padding: 2.8rem 0 2.2rem;
  display: grid;
  gap: 2.2rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .hero--home {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 3.5rem;
    padding: 3.6rem 0 3rem;
  }
}

.hero--home h1 { margin-bottom: 0.65rem; }
.hero--home .hero__lede { margin-bottom: 1.1rem; }

.hero__micro {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pass);
}
.hero__micro .icon { width: 1rem; height: 1rem; }

/* --- Before / after figure ---------------------------------------------- */

.demo {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 1.4rem 1.5rem 1.5rem;
}

.demo__row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
}

.demo__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.demo__frame {
  width: 4.5rem;
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius);
  background: var(--paper-sunk);
  /* Was --rule-strong, which is only 1.92:1 against the frame fill: the
     "before" portrait read as an empty box next to a clearly visible "after". */
  color: var(--ink-soft);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.demo__frame svg { width: 68%; height: auto; display: block; }

.demo__frame--before { height: 5.6rem; }

.demo__frame--after {
  height: 4.2rem;
  border-color: var(--stamp);
  /* The accent surface, so the "after" frame reads as the finished result. */
  background: var(--stamp-soft);
  color: var(--stamp);
}

.demo__arrow { color: var(--ink-soft); }
.demo__arrow .icon { width: 1.35rem; height: 1.35rem; }

.demo__size {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.demo__size--ok { color: var(--pass); font-weight: 600; }

.demo__gauge { margin-top: 1.5rem; }

.demo__track {
  position: relative;
  height: 12px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper-sunk);
  overflow: hidden;
}

/* Settles just under the ceiling. Animates transform rather than width so it
   never triggers layout, and reduced-motion lands it straight on the end
   state. */
.demo__fill {
  height: 100%;
  width: 93%;
  background: var(--stamp);
  transform-origin: left center;
  animation: demo-fill 1.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes demo-fill {
  from { transform: scaleX(1.075); background: var(--limit); }
  55%  { background: var(--stamp); }
  to   { transform: scaleX(1); background: var(--stamp); }
}

.demo__rule {
  position: absolute;
  top: -1px;
  right: 0;
  bottom: -1px;
  width: 3px;
  background: var(--ink);
}

.demo__readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.6rem;
}

.demo__value {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}

.demo__caption {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- Tool --------------------------------------------------------------- */

.xs { margin-bottom: 2rem; }

.xs-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.xs-drop {
  border: 2px dashed var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 2.2rem 1.2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.xs-drop:hover,
.xs-drop:focus-visible {
  border-color: var(--stamp);
  background: var(--stamp-soft);
}
.xs-drop.is-dragging {
  border-color: var(--stamp);
  border-style: solid;
  background: var(--stamp-soft);
}

.xs-drop__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  margin: 0 0 0.25rem;
}
.xs-drop__hint {
  margin: 0;
  color: var(--stamp);
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.xs-drop__types {
  margin: 0.7rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.xs-busy {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 1rem 0 0;
}

.xs-error {
  margin-top: 1rem;
  border-left: 3px solid var(--limit);
  background: var(--limit-soft);
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
}

.xs-stage {
  margin-top: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 1.3rem;
}

/* --- Signature: the size gauge ------------------------------------------ */

.xs-gauge__track {
  position: relative;
  height: 14px;
  background: var(--paper-sunk);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}

.xs-gauge__fill {
  height: 100%;
  width: 0;
  background: var(--stamp);
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.xs-gauge__fill.is-over { background: var(--limit); }

/* The hard ceiling, drawn as the boundary of a form field. */
.xs-gauge__rule {
  position: absolute;
  top: -1px;
  right: 0;
  bottom: -1px;
  width: 3px;
  background: var(--ink);
}

.xs-readout {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}
.xs-readout__value {
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 6vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.xs-readout__caption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.xs-warn {
  margin: 0.9rem 0 0;
  border-left: 3px solid var(--limit);
  background: var(--limit-soft);
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
}

.xs-meta {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin: 1rem 0 0.9rem;
  letter-spacing: 0.02em;
}

.xs-preview {
  display: block;
  max-width: 100%;
  max-height: 15rem;
  width: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-sunk);
  margin: 0 0 1.1rem;
}

.xs-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.xs-btn,
.wgt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Buttons do not inherit the body line-height, so without this they drew at
     39px rather than the 44px touch minimum. */
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.62rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.xs-btn--primary,
.wgt-btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.xs-btn--primary:hover,
.wgt-btn--primary:hover {
  background: var(--stamp);
  border-color: var(--stamp);
  color: #fff;
}

.xs-btn--ghost,
.wgt-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.xs-btn--ghost:hover,
.wgt-btn--ghost:hover {
  border-color: var(--ink);
  background: var(--paper-sunk);
}

.xs-source {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin: 0.9rem 0 0;
  word-break: break-all;
}

/* --- Privacy note ------------------------------------------------------- */

.privacy-note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  border-left: 3px solid var(--pass);
  background: #eef6f1;
  padding: 0.75rem 1rem;
  font-size: 0.92rem;
  margin: 1.4rem 0 2rem;
}
.privacy-note__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pass);
  flex: none;
  padding-top: 0.15rem;
}
.privacy-note p { margin: 0; }

/* --- Prose -------------------------------------------------------------- */

.prose {
  padding-bottom: 2rem;
}

.prose h2 {
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
}

.prose h2:first-of-type { border-top: 0; }

.callout {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--stamp);
  background: var(--paper-raised);
  padding: 1rem 1.15rem;
  margin: 0 0 1.4rem;
  border-radius: var(--radius);
}
.callout p:last-child { margin-bottom: 0; }

.callout__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stamp);
  margin: 0 0 0.4rem;
}

/* Tables get their own scroll container. A wide table then scrolls inside its
   box instead of pushing the whole page sideways, which is the usual cause of
   a horizontal scrollbar on a phone. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.5rem;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--paper-raised);
}
.spec-table th,
.spec-table td {
  border: 1px solid var(--rule);
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.spec-table th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  background: var(--paper-sunk);
}
/* Deliberately not nowrap: a long first column used to force the table wider
   than a phone viewport, breaking the page layout. Cells wrap instead. */
.spec-table td:first-child { white-space: normal; }

/* --- FAQ ---------------------------------------------------------------- */

.faq { margin: 0 0 1.5rem; }

.faq__item {
  border-bottom: 1px solid var(--rule);
}

.faq__item summary {
  cursor: pointer;
  padding: 0.85rem 0;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--stamp);
  font-size: 1.1rem;
  flex: none;
}
.faq__item[open] summary::after { content: "–"; }
.faq__item summary:hover { color: var(--stamp); }

.faq__answer {
  padding: 0 0 1rem;
  color: var(--ink);
}
.faq__answer p:last-child { margin-bottom: 0; }

/* --- Related tools ------------------------------------------------------ */

.related {
  border-top: 1px solid var(--rule);
  padding-top: 1.4rem;
}

.related__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.related__list a {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 0.7rem 0.85rem;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.93rem;
}
.related__list a:hover {
  border-color: var(--stamp);
  background: var(--stamp-soft);
}
.related__target {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stamp);
  margin-top: 0.2rem;
}

/* --- Ad slots ----------------------------------------------------------- */
/* Reserved from day one so the layout is final before any reviewer sees it,
   and so nothing shifts when a network is switched on. Empty until then.    */

.ad-slot {
  margin: 2.2rem 0;
  min-height: 0;
}
/* An empty slot takes no space at all. */
.ad-slot[data-ad-filled="false"] { min-height: 0; }

/* Once a slot is filled, reserve the height of the tallest unit we may serve.
   Ad networks render asynchronously, so without a reserved box the content
   below jumps when ads are switched on — which is what happened before this
   rule existed, despite the comment above claiming otherwise. */
.ad-slot[data-ad-filled="true"] { min-height: 250px; }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding: 1.6rem 0 2.6rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.site-footer__inner {
  max-width: var(--page-measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin-bottom: 0.6rem;
}
/* 44px touch targets, same floor as the masthead. */
.site-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--ink-soft);
}
.site-footer a:hover { color: var(--ink); }
.site-footer p { margin: 0 0 0.5rem; }

/* --- Hub page ----------------------------------------------------------- */

.hub-section { padding: 2.4rem 0 0; }

.hub-section__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}
.hub-section__head .icon {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--stamp);
}
.hub-section__head h2 { margin: 0; }

.hub-section__lede {
  color: var(--ink-soft);
  max-width: 40rem;
  margin-bottom: 1.4rem;
}

.hub-section__more { margin-top: 1rem; }

/* --- Tool cards --------------------------------------------------------- */

.tool-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}

.tool-card a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  height: 100%;
  min-height: 4.25rem;          /* comfortably above the 44px touch target */
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  /* Border and colour only. No scale, which would shift the layout on hover. */
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.tool-card a:hover {
  border-color: var(--stamp);
  background: var(--stamp-soft);
}
.tool-card a:focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 2px;
}

.tool-card__icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--paper-sunk);
  color: var(--stamp);
  transition: background-color 0.2s ease;
}
.tool-card a:hover .tool-card__icon { background: #fff; }
.tool-card__icon .icon { width: 1.3rem; height: 1.3rem; }

.tool-card__body { min-width: 0; }

.tool-card__title {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
}

.tool-card__target {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tool-card__go {
  flex: none;
  margin-left: auto;
  color: var(--rule-strong);
  transition: color 0.2s ease, transform 0.2s ease;
}
.tool-card__go .icon { width: 1.05rem; height: 1.05rem; }
.tool-card a:hover .tool-card__go {
  color: var(--stamp);
  transform: translateX(3px);   /* transform, so nothing reflows */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .xs-gauge__fill { transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --- Layer B: shareable widgets ----------------------------------------- */

.wgt { margin-bottom: 2rem; }

.wgt-form {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 1.2rem;
  display: grid;
  gap: 0.9rem;
}

@media (min-width: 34rem) {
  .wgt-form { grid-template-columns: 1fr 1fr; }
  .wgt-submit { grid-column: 1 / -1; }
}

.wgt-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.wgt-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.wgt-input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  /* The buttons were raised to the 44px floor but the fields were not, which
     left every widget text input at 42px. It matters most in the embed: that is
     the code people paste into their own sites, and it is opened on phones at
     least as often as this site is. */
  min-height: 44px;
}
.wgt-input:focus {
  border-color: var(--stamp);
  outline: 2px solid var(--stamp);
  outline-offset: 1px;
}

/* The browser default is around 4.25:1 on this background, which fails AA, and
   differs between browsers. Set it explicitly. */
.wgt-input::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

.wgt-submit {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.62rem 1.3rem;
  border-radius: var(--radius);
  border: 1px solid var(--stamp);
  background: var(--stamp);
  color: #fff;
  cursor: pointer;
}
.wgt-submit:hover { background: var(--ink); border-color: var(--ink); }

.wgt-error {
  margin-top: 1.1rem;
  border-left: 3px solid var(--limit);
  background: var(--limit-soft);
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
}

.wgt-output {
  margin-top: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 1.3rem;
}

.wgt-kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stamp);
  margin: 0 0 0.4rem;
}

.wgt-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 0.3rem;
}

.wgt-subhead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--stamp);
  margin: 0 0 1rem;
}

.wgt-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 1rem;
  margin: 0 0 1rem;
  align-items: baseline;
}
.wgt-rows dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wgt-rows dd {
  margin: 0;
  font-weight: 600;
}

.wgt-note {
  border-left: 3px solid var(--stamp);
  padding-left: 0.9rem;
  margin: 0 0 1.2rem;
  color: var(--ink);
}

.wgt-card { margin: 1.2rem 0; }

.wgt-canvas {
  display: block;
  width: 100%;
  max-width: 21rem;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}

.wgt-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.wgt-share {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin: 1rem 0 0;
  word-break: break-word;
}

.wgt-embed {
  margin-top: 1.3rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}
.wgt-embed summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 0.7rem;
}
.wgt-embed summary:hover { color: var(--stamp); }

.wgt-code {
  background: var(--paper-sunk);
  padding: 0.8rem;
  border-radius: var(--radius);
  font-size: 0.76rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  margin: 0 0 0.8rem;
}

/* Embed pages: no chrome, just the widget and a way back. */

.embed-page {
  padding: 1rem;
  max-width: 30rem;
  margin: 0 auto;
}

.embed-page .embed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}

.embed-page .embed-head .eyebrow { margin: 0; }

.embed-page .embed-cta {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.embed-page .embed-cta a { font-weight: 600; }

.embed-page .prose,
.embed-page .ad-slot { display: none; }

/* --- PDF assembly ------------------------------------------------------- */

.pdf-list {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
}

.pdf-item {
  display: flex;
  /* Wraps rather than overflowing: the filename, its size and three controls do
     not fit on one line at 320px, and a horizontal scrollbar is worse than a
     second line. */
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9rem;
}
.pdf-item:last-child { border-bottom: 0; }

.pdf-item__name {
  flex: 1 1 11rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-item__meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  flex: 0 1 auto;
  min-width: 0;
}

.pdf-item__controls {
  display: flex;
  gap: 0.6rem;
  flex: none;
  margin-left: auto;
}

/* 44px, and the controls are spaced rather than packed: one of them deletes a
   page, so a mis-tap needs to be unlikely. */
.pdf-mini {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  line-height: 1;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink);
}
.pdf-mini:hover { border-color: var(--stamp); color: var(--stamp); }
.pdf-mini--remove:hover { border-color: var(--limit); color: var(--limit); }

.pdf-options {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
}
@media (min-width: 34rem) {
  .pdf-options { grid-template-columns: 1fr 1fr; }
}

.pdf .xs-actions,
.pdf .wgt-field { margin-top: 1rem; }

.pdf select.wgt-input { cursor: pointer; }

@media print {
  .masthead, .site-footer, .ad-slot, .xs { display: none; }
}