/*
 * The landing routes share one sheet so the four pages cannot drift apart.
 *
 * Tokens, spacing and radii are the handoff design's, and deliberately the same
 * values lib/report-page-view.js paints the report with: a reader who clicks
 * through from here to their report should not feel they changed product.
 *
 * Dark is the default and light arrives from the system, matching the report
 * page. There is no in-page toggle: the operating system already carries that
 * choice, and a second control that disagrees with it is the bug.
 */

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  color-scheme: dark light;
  --bg: #0a0a0c;
  --card: #141417;
  --card2: #1b1b20;
  --btn: #26262c;
  --btn-h: #2f2f37;
  --border: #222228;
  --border3: #1f1f24;
  --header-bg: rgba(10, 10, 12, 0.82);
  --text: #f5f5f7;
  --text-mid: #d5d5da;
  --text2: #a3a3ab;
  --text3: #8b8b94;
  --text4: #6e6e78;
  --text5: #5c5c66;
  --text-mono: #9da3ae;
  --blue-text: #4e8cff;
  --blue-soft: rgba(46, 107, 246, 0.12);
  --link: #7ea6ff;
  --link-h: #a8c4ff;
  --ins: #4ade80;
  --del: #f87171;
  --ins-bg: rgba(74, 222, 128, 0.12);
  --del-bg: rgba(248, 113, 113, 0.12);
  --banner: linear-gradient(135deg, #0e1b36 0%, #101219 62%);
  --banner-border: #24344f;
  --shadow-chip: 0 1px 3px rgba(0, 0, 0, 0.18);
  /* The brand button holds its colour in both themes, so it is not a token
     that flips: white on #2E6BF6 is the one constant across the product. */
  --brand: #2e6bf6;
  --brand-h: #3d78ff;
  --on-brand: #ffffff;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light dark;
    --bg: #f6f6f4;
    --card: #ffffff;
    --card2: #f1f1ee;
    --btn: #e9e9e5;
    --btn-h: #dfdfda;
    --border: #e4e4df;
    --border3: #ecece7;
    --header-bg: rgba(246, 246, 244, 0.85);
    --text: #17171b;
    --text-mid: #3e3e46;
    --text2: #56565e;
    --text3: #6c6c74;
    --text4: #84848c;
    --text5: #94949b;
    --text-mono: #6e7480;
    --blue-text: #2e6bf6;
    --blue-soft: rgba(46, 107, 246, 0.08);
    --link: #2e6bf6;
    --link-h: #1d5ae0;
    --ins: #169a4e;
    --del: #dc2626;
    --ins-bg: rgba(22, 154, 78, 0.1);
    --del-bg: rgba(220, 38, 38, 0.09);
    --banner: linear-gradient(135deg, #e9f0ff 0%, #f4f5f2 62%);
    --banner-border: #c8d8f6;
    --shadow-chip: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
}

* { box-sizing: border-box; }

/* An author's `display` beats the UA rule behind the hidden attribute, so a
   flex or grid class silently un-hides whatever carries it. The tab strip is
   hidden until the script that drives it runs; without this it appeared, and
   did nothing, for every reader with JavaScript blocked. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-h); text-decoration: underline; }

::selection { background: rgba(78, 140, 255, 0.35); }

button, textarea, input { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

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

.skip-link {
  position: fixed;
  z-index: 60;
  top: 10px;
  left: 10px;
  transform: translateY(-200%);
  background: var(--card);
  border: 1px solid var(--brand);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); text-decoration: none; }

/* Header ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border3);
}

.header-inner,
.shell {
  max-width: 960px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 28px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 13px;
}

.wordmark { display: flex; align-items: center; gap: 11px; }
.wordmark:hover { text-decoration: none; }

/* Masked rather than inlined so the mark takes --text and recolours with the
   theme. The cap heights of mark and name are matched on purpose. */
.wordmark-mark {
  width: 53px;
  height: 20px;
  flex: none;
  background: var(--text);
  -webkit-mask: url("/assets/glite-wordmark.svg") no-repeat left center / contain;
  mask: url("/assets/glite-wordmark.svg") no-repeat left center / contain;
}

.wordmark-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text2);
  white-space: nowrap;
}

.shell { padding-bottom: 90px; }

/* Buttons ----------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 99px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: var(--btn);
  color: var(--text-mid);
  text-decoration: none;
}
.button:hover { background: var(--btn-h); color: var(--text); text-decoration: none; }

.button-brand { background: var(--brand); color: var(--on-brand); }
.button-brand:hover { background: var(--brand-h); color: var(--on-brand); }

.button-small { padding: 9px 18px; font-size: 13.5px; }

/* Sized against the label's cap height rather than its line box, so the mark
   sits on the text rather than above it. */
.button svg { width: 15px; height: 15px; flex: none; }

.button[disabled],
.button[aria-disabled="true"] {
  background: var(--btn);
  color: var(--text4);
  cursor: not-allowed;
}
.button[disabled]:hover,
.button[aria-disabled="true"]:hover { background: var(--btn); color: var(--text4); }

/* Route toggle ------------------------------------------------------------ */

/* Four labels do not fit one phone-width line, and no readable type size makes
   them: at 320px the strip needs 337px at its smallest sane setting against
   288px of room. So it scrolls rather than wraps -- two rows of chips read as
   two controls, and shrinking the chips to fit costs a thumb its target.

   The scroller bleeds to the viewport edges so a strip that continues past the
   screen looks like it continues, instead of looking chopped off. `margin:auto`
   on the track rather than `justify-content:center`, because centred flex
   content that overflows cannot be scrolled back to its start. */
.routes {
  display: flex;
  padding-top: 22px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-inline: calc(-1 * clamp(16px, 4vw, 28px));
  padding-inline: clamp(16px, 4vw, 28px);
}
.routes::-webkit-scrollbar { display: none; }

.routes-track {
  display: inline-flex;
  flex-wrap: nowrap;
  margin-inline: auto;
  gap: 2px;
  padding: 3px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 99px;
}

.route {
  display: flex;
  align-items: center;
  border-radius: 99px;
  padding: 8px 18px;
  min-height: 38px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text3);
  background: transparent;
}
.route:hover { color: var(--text); text-decoration: none; }

.route[aria-current="page"] {
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-chip);
}

/* Sections ---------------------------------------------------------------- */

.hero { padding-top: 64px; text-align: center; }
.hero-tight { padding-top: 52px; }

.hero h1 {
  margin: 0 auto;
  max-width: 720px;
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}

.hero p {
  margin: 18px auto 0;
  max-width: 600px;
  color: var(--text2);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}

.hero strong { color: var(--text); font-weight: 700; }

.hero-note {
  margin: 22px auto 0;
  max-width: 560px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text4);
}

.section { margin-top: 64px; }
.section-close { margin-top: 34px; }

.section h2 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
}

.section h2.spaced { margin-bottom: 20px; }
.section h2.spaced-wide { margin-bottom: 24px; }

.section-intro {
  margin: 0 auto;
  max-width: 560px;
  color: var(--text3);
  font-size: 14.5px;
  line-height: 1.6;
  text-align: center;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
}

.card-narrow { max-width: 640px; margin-inline: auto; }
.card-form { max-width: 680px; margin-inline: auto; border-radius: 18px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.grid-wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 0; }
.grid-narrow { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-capped { max-width: 680px; margin-inline: auto; }

.stack { display: flex; flex-direction: column; gap: 12px; max-width: 680px; margin: 0 auto; }
.stack-tight { gap: 12px; margin-top: 22px; max-width: 640px; }

/* Quick start ------------------------------------------------------------- */

.step-row { display: flex; gap: 12px; align-items: flex-start; }
.step-row + .step-row { margin-top: 16px; }
/* The step after the instruction panel is not adjacent to the one it follows,
   so the rule above never reached it and it sat flush against the panel. It
   also needs more room than 16px, having a full panel above it rather than
   another one-line step. */
.instruction ~ .step-row { margin-top: 22px; }

.step-num {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 99px;
  background: var(--btn);
  color: var(--text2);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-text { padding-top: 2px; }
.step-title { font-size: 14.5px; font-weight: 700; line-height: 1.5; }
.step-body { font-size: 13.5px; color: var(--text2); line-height: 1.6; margin-top: 5px; }

.instruction {
  position: relative;
  margin-top: 11px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 15px 17px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-mid);
  text-align: left;
  overflow-wrap: anywhere;
}

/* Floated, not absolute, so the numbered lines wrap around it instead of
   running underneath on a narrow screen. */
.copy-button {
  float: right;
  margin: -9px -8px 4px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  padding: 5px 9px;
  background: transparent;
  color: var(--text3);
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.copy-button:hover { background: var(--btn); color: var(--text); }
.copy-button svg { flex: none; }

.instruction-line { padding-left: 19px; text-indent: -19px; }
.instruction-line + .instruction-line { margin-top: 7px; }
.instruction-line .n { color: var(--text4); }

.fineprint {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border3);
  font-size: 12px;
  color: var(--text4);
  line-height: 1.6;
}

.banner {
  margin: 34px auto 0;
  max-width: 640px;
  background: var(--banner);
  border: 1px solid var(--banner-border);
  border-radius: 16px;
  padding: 18px 24px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
}

/* Who sees what ----------------------------------------------------------- */

.kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text4);
}

.who-title { font-size: 17px; font-weight: 800; margin-top: 8px; }

.bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text2);
}

.bullets li { display: flex; gap: 8px; }
.bullets b { color: var(--text); }

/* The glyph is decorative; .mark-label carries the meaning for a screen
   reader, because a bare tick and a bare cross read identically to one. */
.mark { font-weight: 800; flex: none; }
.mark-yes { color: var(--ins); }
.mark-no { color: var(--del); }

.card-emphasis { border: 1.5px solid var(--banner-border); }
.card-emphasis .kicker { color: var(--blue-text); }

/* Step cards -------------------------------------------------------------- */

.step-card { padding: 20px 22px; }
.step-kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blue-text);
}
.step-card h3 { font-size: 16px; font-weight: 700; margin: 8px 0 0; }
.step-card p { font-size: 13.5px; color: var(--text2); line-height: 1.6; margin: 6px 0 0; }

/* Records ----------------------------------------------------------------- */

.record-card { padding: 18px 22px; }

.record-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.provenance {
  flex: none;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  border-radius: 99px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  opacity: 0.85;
}
.provenance-verbatim { color: var(--ins); }
.provenance-redacted { color: var(--text3); }

/* The 3px rule and the panel are the point: the reader's own sentence must
   never be mistakable for our commentary about it. */
.sentence {
  margin-top: 8px;
  background: var(--card2);
  border-left: 3px solid var(--blue-text);
  border-radius: 0 8px 8px 0;
  padding: 11px 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}

.record-line { margin-top: 5px; font-size: 13px; color: var(--text3); line-height: 1.6; }
.record-line:first-of-type { margin-top: 11px; }
.record-line b { color: var(--del); }
.record-line.is-rule b { color: var(--ins); }

.note-centred {
  font-size: 12px;
  color: var(--text4);
  line-height: 1.6;
  text-align: center;
}

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

.faq-card { border-radius: 14px; padding: 18px 22px; }
.faq-card h3 { font-size: 15px; font-weight: 800; margin: 0; }
.faq-card p { font-size: 13.5px; color: var(--text2); line-height: 1.65; margin: 6px 0 0; }

/* Cross-links ------------------------------------------------------------- */

.link-card { display: block; padding: 20px 22px; }
.link-card:hover { border-color: var(--text4); text-decoration: none; }
.link-card h3 { font-size: 16px; font-weight: 800; color: var(--text); margin: 0; }
.link-card p { font-size: 13.5px; color: var(--text2); line-height: 1.6; margin: 6px 0 0; }
.link-card .go { font-size: 13px; font-weight: 700; color: var(--link); margin-top: 10px; }

.aside-line {
  max-width: 680px;
  margin: 14px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--text4);
  line-height: 1.6;
}

/* Forms ------------------------------------------------------------------- */

textarea {
  width: 100%;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
  resize: vertical;
}
textarea::placeholder { color: var(--text4); }

.textarea-prose { min-height: 190px; }
.textarea-code {
  min-height: 170px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.7;
}

.counter { font-size: 12.5px; color: var(--text4); font-weight: 600; margin-top: 12px; }
.counter.is-over { color: var(--del); }

.consents {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border3);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.55;
  cursor: pointer;
}

/* A real checkbox, restyled. The design's 18px square had been a div: a
   consent a keyboard cannot give is not a consent. */
.consent input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
}
.consent input::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  background: var(--on-brand);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 39% 62%);
}
.consent input:checked {
  background: var(--brand);
  border-color: var(--brand);
}
.consent input:checked::before { transform: scale(1); }

.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.actions-group { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.legal { font-size: 12px; color: var(--text4); }

.form-status { margin: 12px 0 0; font-size: 12.5px; color: var(--text3); line-height: 1.6; }

/* Upload ------------------------------------------------------------------ */

.tabs {
  display: flex;
  gap: 8px;
  width: fit-content;
  padding: 3px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 99px;
}

.tab {
  border: 0;
  border-radius: 99px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 700;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--card); color: var(--text); }

.dropzone {
  display: block;
  width: 100%;
  margin-top: 16px;
  border: 1.5px dashed var(--border);
  background: var(--card2);
  border-radius: 14px;
  padding: 34px 22px;
  text-align: center;
  cursor: pointer;
}
.dropzone.is-dragging { border-color: var(--brand); background: var(--blue-soft); }
#panel-file:has(#submission-file:focus-visible) .dropzone {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.dropzone-title { display: block; font-size: 15px; font-weight: 700; color: var(--text); }
.dropzone-sub { display: block; font-size: 13px; color: var(--text3); margin-top: 6px; line-height: 1.55; }

.status {
  margin-top: 14px;
  background: var(--card2);
  border-left: 3px solid var(--border);
  border-radius: 0 10px 10px 0;
  padding: 12px 15px;
}
.status-title { font-size: 13.5px; font-weight: 700; }
.status-detail { font-size: 12.5px; color: var(--text3); line-height: 1.6; margin-top: 4px; }
.status.is-ok { border-left-color: var(--ins); }
.status.is-ok .status-title { color: var(--ins); }
.status.is-error { border-left-color: var(--del); }
.status.is-error .status-title { color: var(--del); }

.json-sample {
  background: var(--card2);
  border-radius: 12px;
  padding: 15px 17px;
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-mid);
  overflow-x: auto;
}
.json-sample .p { color: var(--text4); }

/* Resume ------------------------------------------------------------------ */

.resume {
  max-width: 680px;
  margin: 0 auto 18px;
  border-left: 3px solid var(--brand);
  border-radius: 0 16px 16px 0;
}
.resume h2 { font-size: 17px; font-weight: 800; margin: 0; text-align: left; }
.resume p { font-size: 13.5px; color: var(--text2); line-height: 1.6; margin: 6px 0 14px; }

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

.site-footer {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--border3);
  font-size: 12px;
  color: var(--text5);
  line-height: 1.65;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.site-footer .nowrap { white-space: nowrap; }

/* A finger lands on about 44px, and these were sized for a cursor: the copy
   control and the upload tabs came out at 31px tall, the header button at 36.
   Keyed on the pointer rather than the width, because the problem is the input
   device and not the screen. */
@media (pointer: coarse) {
  .button { min-height: 44px; }
  .button-small { min-height: 40px; }
  .copy-button { min-height: 40px; padding: 9px 12px; }
  .tab { min-height: 40px; }
  .route { min-height: 40px; }
  /* "I am at least 18 years old." is one line of 13px text, so its whole row
     came to 20px tall. It is a legal consent; it should not need a careful aim.
     min-height rather than padding, so the multi-line row beside it is
     untouched. */
  .consent { min-height: 40px; }
  .site-footer a { display: inline-block; padding-block: 12px; }
}

@media (max-width: 560px) {
  .hide-sm { display: none !important; }
}

.card-sample { margin-top: 22px; padding: 20px 22px; }
.card-sample .bullets { margin-top: 14px; }