/* MEL Toolkit — the shared tool page.

   Every tool page now uses the layout the Logframe page already had:
   a header, a hero that says what the tool is and what to bring, a
   panel of what comes back, the form, and a footer. Until now twelve
   pages were a bare form on a cream background and two were finished
   products, which made the toolkit look like two different companies.

   This file is the Logframe page's own stylesheet, lifted out of that
   page unchanged so the match is exact rather than approximate, with
   one addition at the end.

   That addition matters. The Logframe page writes its form as
   .field wrappers. The other twelve write bare labels and inputs as
   direct children. Rewriting twelve working forms to add wrappers
   would have meant touching every submit handler on the site in one
   night. So the compatibility block styles the bare controls to look
   identical inside a form shell, and the forms themselves are left
   alone. */

:root{--bg:#FAF6EF;--bg-alt:#F1EADD;--surface:#FFFDF9;--surface-2:#F6F1E7;--ink:#26312E;--ink-2:#5A6560;--ink-3:#87908A;--accent:#0E7E99;--accent-2:#0A6478;--warm:#A75B22;--ok:#1E6E4A;--err:#A62B1F;--line:rgba(38,49,46,.14);--line-2:rgba(38,49,46,.28);--chip:rgba(167,91,34,.09);--footer-bg:#26312E;--footer-ink:#EDE7DC;--footer-ink-2:#A9B0A8;--radius:12px;--radius-lg:18px;--shadow:0 14px 34px rgba(38,49,46,.10);--font-display:"Source Serif 4",Georgia,serif;--font-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;--caps-track:.16em;--maxw:1400px;--gutter:clamp(1.15rem,4vw,4rem);--section-y:clamp(3rem,5.5vw,5.5rem)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:clamp(1rem,.96rem + .18vw,1.08rem);line-height:1.62;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}a{color:var(--accent)}a:hover{color:var(--accent-2)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.6rem 1rem;z-index:400;font-weight:600}.skip-link:focus{left:12px;top:12px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:var(--section-y)}
.band-alt{background:var(--bg-alt);border-block:1px solid var(--line)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.008em;line-height:1.16;color:var(--ink)}
h1{font-size:clamp(1.9rem,1.2rem + 2.4vw,3.1rem);font-weight:700}
h2{font-size:clamp(1.5rem,1.1rem + 1.3vw,2.2rem)}h3{font-size:1.08rem}
.lead{color:var(--ink-2);font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);max-width:64ch}
.section-head{margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.eyebrow{font-family:var(--font-body);font-size:.75rem;font-weight:600;letter-spacing:var(--caps-track);text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--accent);flex:none}
header.site{position:sticky;top:0;z-index:200;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:1.2rem;justify-content:space-between;padding-block:.75rem;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.brand-mark{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand-glyph{width:34px;height:34px;border-radius:9px;background:var(--accent);display:grid;place-items:center;flex:none}
.brand-glyph svg{width:19px;height:19px}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:1.06rem;color:var(--ink);letter-spacing:-.01em}
.brand-name span{color:var(--accent)}
nav.primary ul{display:flex;gap:.1rem;list-style:none;flex-wrap:wrap}
nav.primary a{font-weight:500;font-size:.92rem;color:var(--ink-2);text-decoration:none;padding:.42rem .68rem;border-radius:var(--radius);white-space:nowrap}
nav.primary a:hover,nav.primary a[aria-current=page]{color:var(--accent);background:rgba(14,126,153,.09)}
.btn{display:inline-block;font-weight:600;font-size:.93rem;padding:.64rem 1.25rem;border-radius:var(--radius);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .18s,color .18s,border-color .18s;text-align:center;font-family:var(--font-body)}
.btn-solid{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-solid:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.btn-solid[disabled]{opacity:.55;cursor:progress}
.btn-line{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}
.btn-lg{font-size:1rem;padding:.82rem 1.7rem}
.menu-btn{display:none;background:transparent;border:1px solid var(--line-2);color:var(--ink);border-radius:var(--radius);width:42px;height:40px;cursor:pointer;font-size:1.2rem}
@media(max-width:1080px){.menu-btn{display:block}nav.primary{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);padding:.8rem var(--gutter) 1.2rem;max-height:70vh;overflow-y:auto}nav.primary.open{display:block}nav.primary ul{flex-direction:column;gap:.1rem}nav.primary a{display:block;font-size:1rem}.head-actions .btn-line{display:none}}
.breadcrumb{padding:.85rem 0;border-bottom:1px solid var(--line);background:var(--surface-2)}
.breadcrumb nav{display:flex;gap:.4rem;align-items:center;font-size:.85rem;color:var(--ink-3);flex-wrap:wrap}
.breadcrumb a{color:var(--ink-2);text-decoration:none}.breadcrumb a:hover{color:var(--accent)}
.hero{padding-block:clamp(2.4rem,4.5vw,4.4rem) clamp(1.8rem,3vw,3rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4vw,3.6rem);align-items:start}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr}}
.status{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:var(--caps-track);text-transform:uppercase;border-radius:999px;padding:.24rem .8rem;margin-bottom:1rem}
.status.beta{background:rgba(14,126,153,.10);color:var(--accent);border:1px solid rgba(14,126,153,.28)}
.status.live{background:rgba(30,110,74,.12);color:var(--ok);border:1px solid rgba(30,110,74,.25)}
.hero h1{max-width:18ch;margin-bottom:.9rem}
.hero .tagline{color:var(--accent);font-family:var(--font-display);font-size:clamp(1.05rem,1rem + .35vw,1.3rem);margin-bottom:1rem}
.meta-row{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.meta-item b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.35rem;color:var(--accent);line-height:1.1}
.meta-item span{font-size:.83rem;color:var(--ink-3)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.3rem,2.2vw,1.9rem);box-shadow:var(--shadow)}
.panel h3{margin-bottom:.9rem}
.panel ul{list-style:none;display:grid;gap:.55rem}
.panel ul li{font-size:.93rem;color:var(--ink-2);padding-left:1.5rem;position:relative}
.panel ul li::before{content:"\2191";position:absolute;left:0;color:var(--accent);font-weight:700}
.out-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
@media(max-width:720px){.out-grid{grid-template-columns:1fr}}
.out-item{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:1.1rem 1.3rem}
.out-item b{display:block;font-family:var(--font-display);font-size:1rem;color:var(--ink);margin-bottom:.3rem}
.out-item p{font-size:.91rem;color:var(--ink-2)}
.note-band{margin-top:2rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(90deg,rgba(14,126,153,.08),transparent 72%);padding:1.2rem 1.5rem}
.note-band b{display:block;font-family:var(--font-body);color:var(--accent);font-size:.75rem;letter-spacing:var(--caps-track);text-transform:uppercase;margin-bottom:.45rem}
.note-band p{color:var(--ink-2);font-size:.94rem;max-width:76ch}
.form-shell{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.5rem,2.5vw,2.4rem);box-shadow:var(--shadow)}
.field{margin-bottom:1.05rem}
.field label{display:block;font-weight:600;font-size:.87rem;margin-bottom:.35rem;color:var(--ink)}
.field label .req{color:var(--accent)}
.field input[type=text],.field input[type=email],.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line-2);color:var(--ink);border-radius:var(--radius);padding:.7rem .9rem;font-family:var(--font-body);font-size:.96rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field textarea{min-height:86px;resize:vertical}
.field .hint{font-size:.81rem;color:var(--ink-3);margin-top:.28rem;display:block}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.drop{border:2px dashed var(--line-2);border-radius:var(--radius-lg);background:var(--surface-2);padding:1.3rem;text-align:center;position:relative;transition:border-color .18s,background .18s}
.drop:hover,.drop.over{border-color:var(--accent);background:rgba(14,126,153,.05)}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop .ic{font-size:1.7rem;display:block;color:var(--accent)}
.drop .lb{font-weight:600;color:var(--ink);font-size:.93rem;display:block;margin-top:.25rem}
.drop .sb{font-size:.81rem;color:var(--ink-3)}
.drop .ch{display:none;font-size:.86rem;color:var(--ok);margin-top:.45rem;font-weight:600}
.hp{position:absolute;left:-9999px;opacity:0;width:1px;height:1px}
.fnote{font-size:.9rem;margin-top:.9rem}
.other-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media(max-width:900px){.other-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.other-tools{grid-template-columns:1fr}}
.ot{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.1rem 1.2rem;text-decoration:none;display:block;transition:border-color .2s,transform .2s}
.ot:hover{border-color:var(--accent);transform:translateY(-2px)}
.ot b{display:block;font-family:var(--font-display);font-size:.99rem;color:var(--ink);margin-bottom:.25rem}
.ot p{font-size:.86rem;color:var(--ink-2)}
footer.site{background:var(--footer-bg);color:var(--footer-ink);padding-block:clamp(2.4rem,4vw,3.4rem) 1.7rem}
footer .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
@media(max-width:900px){footer .fgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){footer .fgrid{grid-template-columns:1fr}}
footer h4{color:#8FDCEC;font-size:.75rem;letter-spacing:var(--caps-track);text-transform:uppercase;margin-bottom:.85rem;font-family:var(--font-body);font-weight:600}
footer p{color:var(--footer-ink-2);font-size:.9rem}
footer ul{list-style:none}footer li{margin-bottom:.42rem}
footer li{font-size:.9rem;color:var(--footer-ink-2)}
footer a{color:var(--footer-ink-2);text-decoration:none;font-size:.9rem}
footer a:hover{color:#8FDCEC}
footer .base{border-top:1px solid rgba(255,255,255,.14);margin-top:2.2rem;padding-top:1.3rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--footer-ink-2);font-size:.84rem}
.foot-brand{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.foot-brand .brand-glyph{background:rgba(255,255,255,.12)}
.foot-brand .brand-name{color:#fff}.foot-brand .brand-name span{color:#8FDCEC}
.info-block{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1rem 1.2rem;margin-bottom:.8rem;font-size:.92rem}
.level-block{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:1.1rem 1.3rem;margin-bottom:1rem}
.level-block table{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:.6rem}
.level-block th,.level-block td{text-align:left;padding:.5rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.level-block th{color:#fff;background:var(--accent);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em}
.level-block tbody tr:nth-child(even){background:var(--surface-2)}
.badge{display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;padding:.12rem .45rem;border-radius:999px;margin-left:.4rem}
.badge.standard{background:rgba(30,110,74,.15);color:var(--ok)}
.badge.custom{background:var(--chip);color:var(--warm)}
.badge.suggestion{background:rgba(14,126,153,.15);color:var(--accent)}
#matrixTable{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:.6rem}
#matrixTable th,#matrixTable td{text-align:left;padding:.55rem .5rem;border:1px solid var(--line);vertical-align:top}
#matrixTable th{color:#fff;background:var(--accent);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}
#matrixTable td.level-cell{font-weight:600;background:var(--surface-2)}
.flag{border-radius:var(--radius);padding:.6rem .9rem;margin-bottom:.5rem;font-size:.9rem}
.flag.break{background:rgba(166,43,31,.07);border:1px solid rgba(166,43,31,.22)}
.validation-note{font-size:.85rem;padding:.6rem .9rem;border-radius:var(--radius);margin-top:1rem}
.validation-note.passed_first_attempt{background:rgba(30,110,74,.1);color:var(--ok)}
.validation-note.passed_after_one_retry{background:rgba(14,126,153,.1);color:var(--accent)}
.validation-note.issues_remain_after_one_retry,.validation-note.retry_failed_kept_first_attempt{background:rgba(166,43,31,.08);color:var(--err)}

/* ---------------------------------------------------------------
   Compatibility: the twelve pages whose forms are bare controls
   rather than .field wrappers. Same appearance, no markup changes.
   --------------------------------------------------------------- */
.form-shell > label,
.form-shell label:not(.field label) {
  display: block;
  font-weight: 600;
  font-size: .87rem;
  margin: 1.05rem 0 .35rem;
  color: var(--ink);
}
.form-shell > label:first-child { margin-top: 0; }

.form-shell input[type=text],
.form-shell input[type=email],
.form-shell input[type=date],
.form-shell select,
.form-shell textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--ink);
  border-radius: var(--radius);
  padding: .7rem .9rem;
  font-family: var(--font-body);
  font-size: .96rem;
}
.form-shell textarea { min-height: 96px; resize: vertical; }
.form-shell input:focus, .form-shell select:focus, .form-shell textarea:focus {
  border-color: var(--accent); outline: none;
}

/* File inputs keep the browser control rather than being hidden
   behind a drop zone, because the drop zone needs markup the twelve
   pages do not have. It is given room so it does not look stranded. */
.form-shell input[type=file] {
  display: block;
  width: 100%;
  padding: .7rem .9rem;
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  font-size: .9rem;
  cursor: pointer;
}
.form-shell input[type=file]:hover { border-color: var(--accent); }

.form-shell button {
  display: inline-block;
  font-weight: 600;
  font-size: .95rem;
  padding: .72rem 1.4rem;
  margin-top: 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-body);
}
.form-shell button:hover { background: var(--accent-2); border-color: var(--accent-2); }
.form-shell button:disabled { opacity: .55; cursor: progress; }
.form-shell button.secondary { background: transparent; color: var(--accent); }
.form-shell button.secondary:hover { background: rgba(14,126,153,.08); color: var(--accent-2); }

/* A wider page is not the same as wider everything. A text box
   stretched across the whole shell is unpleasant to use and a line of
   prose that long is tiring to read, so the controls keep a
   comfortable measure while results, which want the room, take it
   all. Same rule the plain pages had, re-aimed at the shell. */
.form-shell > label,
.form-shell > input,
.form-shell > select,
.form-shell > textarea,
.form-shell > button,
.form-shell > p { max-width: 46rem; }

.form-shell > #successArea,
.form-shell > #errorResult,
.form-shell > div,
.form-shell > details,
.form-shell table { max-width: none; }

/* Results tables on the twelve pages. */
.form-shell table { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: .6rem; }
.form-shell th, .form-shell td { text-align: left; padding: .5rem .45rem; border: 1px solid var(--line); vertical-align: top; }
.form-shell th { color: #fff; background: var(--accent); font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.form-shell tbody tr:nth-child(even) { background: var(--surface-2); }

.form-shell h2 { font-size: 1.12rem; margin: 1.8rem 0 .6rem; color: var(--accent); font-weight: 600; }
.form-shell h2:first-child { margin-top: 0; }
.form-shell pre { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; font-size: .82rem; overflow: auto; }
.form-shell pre.syntax { background: #26312E; color: #E8E4DA; white-space: pre; }
.form-shell details { margin-top: 1.4rem; }
.form-shell details summary { cursor: pointer; color: var(--ink-2); font-size: .85rem; }
.form-shell ul { padding-left: 1.2rem; }
.form-shell ul li { margin-bottom: .35rem; }

/* The page's own trailing note, now inside the shell. */
.form-shell .note { margin-top: 2rem; font-size: .82rem; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 1rem; }

/* The sign-in strips sit above the sticky header. */
body.mel-shell > div[role="status"] { position: relative; z-index: 210; margin: 0; padding-inline: var(--gutter); }

@media print {
  header.site, footer.site, .breadcrumb, .hero, .band-alt, .note-band { display: none !important; }
  .form-shell { border: none; box-shadow: none; padding: 0; }
}