/* MEL Toolkit — shared surface for the tool pages.
   Loaded after each page's own styles, so it finishes the job rather
   than fighting it.

   Two things it fixes. The tool pages were built as narrow columns,
   which reads as a form stuck in the middle of a wide screen rather
   than a product. And the background was flat paper, which makes a
   long page of fields feel heavier than it is.

   The texture is drawn in CSS, no images, so it costs nothing to
   load and stays crisp at any zoom. It is deliberately faint: it
   should register as warmth rather than as pattern, and it must
   never compete with the text sitting on it. */

:root {
  --mel-bg: #FAF6EF;
  --mel-ink: #26312E;
  --mel-accent: #0E7E99;
  --mel-warm: #A75B22;
  --mel-line: rgba(38, 49, 46, .14);
  /* One value for the page gutter, so anything that needs to escape it
     can refer to it instead of guessing. The old strips guessed, and
     were wrong on every page whose padding differed. */
  --mel-gutter: clamp(1.1rem, 4vw, 2.5rem);
}

html { background: var(--mel-bg); }

body {
  /* Two soft washes of colour in opposite corners, and a very light
     grid over the whole surface. Fixed so it stays put while the
     page scrolls, which keeps long forms from feeling like they are
     dragging the texture along with them. */
  background-color: var(--mel-bg);
  background-image:
    radial-gradient(900px 520px at 88% -4%, rgba(14, 126, 153, .07), transparent 60%),
    radial-gradient(760px 460px at -6% 104%, rgba(167, 91, 34, .055), transparent 62%),
    linear-gradient(rgba(38, 49, 46, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 49, 46, .028) 1px, transparent 1px);
  background-size: auto, auto, 34px 34px, 34px 34px;
  background-attachment: fixed, fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, repeat, repeat;

}

/* Thirteen of the fifteen tool pages are a plain column: the page is
   the form, and the body itself needs the width and the gutters. Two
   of them, Logframe and Theory of Change, are fully designed pages
   with their own nav band, hero and inner measure. Constraining the
   body on those would inset the whole page, nav included, and double
   the padding inside their own container. So they carry mel-full and
   keep their own layout; they still get the texture and the hairline. */
body:not(.mel-full) {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--mel-gutter);
  /* The theme owns the body padding outright, top included. That is
     what lets the sticky strips sit flush against the top of the
     window without anything having to know what the padding was. */
  padding-block: 0 2.5rem;
}

/* Nothing sits above the strips, so the first heading on a page
   without one needs the space the padding used to give it. */
body:not(.mel-full) > h1:first-child { margin-top: 2.2rem; }

/* A hairline of brand colour along the very top, so the page has an
   edge rather than floating. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mel-accent), #14A3C4 45%, var(--mel-warm));
  z-index: 60;
  pointer-events: none;
}

/* A wider page is not the same as wider everything. A text box
   stretched across twelve hundred pixels is harder to use than a
   narrow one, and a line of prose that long is tiring to read. So the
   page gets the width and the form keeps a comfortable measure, while
   results and tables, which genuinely benefit from room, use it all. */
body:not(.mel-full) > label,
body:not(.mel-full) > input,
body:not(.mel-full) > select,
body:not(.mel-full) > textarea,
body:not(.mel-full) > p,
body:not(.mel-full) > .lead,
body:not(.mel-full) > .note,
body:not(.mel-full) > button {
  max-width: 46rem;
}
body:not(.mel-full) > p,
body:not(.mel-full) > .lead { max-width: 68ch; }

/* Output earns the full width. */
#successArea, #result, #errorResult, .results, .panel { max-width: none; }

/* The sign-in and confirm-your-address strips span the page rather than
   the text column. They escape the gutter by exactly the gutter, which
   is why it is a variable: no number is repeated anywhere, so nothing
   can fall out of step with anything else.

   An earlier version pulled them out to 50vw to reach the window edges
   on wide screens. A viewport unit counts the scrollbar and a
   percentage does not, so it overshot by the scrollbar's width and put
   a horizontal scrollbar on every page. Reaching the column edge is
   both correct and predictable; reaching the window edge is not worth
   a bug. */
body:not(.mel-full) > div[role="status"] {
  margin-inline: calc(-1 * var(--mel-gutter)) !important;
  padding-inline: var(--mel-gutter) !important;
  box-sizing: border-box;
}

/* The two designed pages have no body padding, so their strips are
   already the full width of the window and need the gutter as padding
   only. */
body.mel-full > div[role="status"] {
  padding-inline: var(--mel-gutter) !important;
  box-sizing: border-box;
}

/* When both strips are showing, the confirm-your-address one and the
   signed-in one, they are one stack and should read as one. Without
   this there is a gap between them with page texture showing through.
   A browser too old for :has() shows that gap; nothing breaks. */
body > div[role="status"]:has(+ div[role="status"]) {
  margin-bottom: 0 !important;
  border-bottom-color: rgba(38, 49, 46, .08);
}

/* Both strips were sticky, so scrolling pinned them to the same spot
   and one covered the other. Only the top of the stack pins. */
div[role="status"] + div[role="status"] { position: static !important; }

/* Anything that presents itself as a panel sits on solid paper, so the
   texture never shows through content that has to be read. */
.card, .panel, #successArea, #result, #errorResult, .mel-progress,
table, pre, details {
  background-color: #FFFDF9;
}

/* Wide tables were overflowing the page rather than scrolling. */
table { width: 100%; border-collapse: collapse; }
.table-scroll, .tablewrap { overflow-x: auto; }

/* On a phone the fixed background washes cost more than they give. */
@media (max-width: 640px) {
  body {
    background-image: linear-gradient(rgba(38, 49, 46, .025) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(38, 49, 46, .025) 1px, transparent 1px);
    background-size: 28px 28px, 28px 28px;
    background-attachment: scroll, scroll;
  }
}

/* Some people find moving or layered backgrounds uncomfortable, and
   fixed attachment is a known cause of scroll judder on older
   machines. Honour the system setting. */
@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll, scroll, scroll, scroll; }
}

/* Printing a result should not waste ink on texture. */
@media print {
  body { background: #fff; max-width: none; }
  body::before { display: none; }
}