/* ---------------------------------------------------------------------------
   Ponsion Launchpad — the visual system of ponsion.com, applied to a form and
   a table. Values here are lifted from the live site rather than approximated:
   #f6f4ef ground, #0a0a0a ink, hairlines at 14% ink, Instrument Serif for
   display, Inter Tight for interface, JetBrains Mono for anything numeric.

   Light only, on purpose — ponsion.com ships no dark variant, and a launchpad
   that flips to dark next to it would read as a different product. Hence the
   explicit color-scheme below: without it the browser darkens form controls
   for viewers whose OS is dark, and the inputs stop matching the page.
--------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --ground: #f6f4ef;
  --panel: #efece4;
  --sunk: rgba(10, 10, 10, .043);
  --ink: #0a0a0a;
  --muted: rgba(10, 10, 10, .55);
  --faint: rgba(10, 10, 10, .35);
  --rule: rgba(10, 10, 10, .14);
  --rule-soft: rgba(10, 10, 10, .07);
  --field: #fffefb;

  /* The only two hues on the page. They carry the 70/30 split, so they earn it. */
  --pay: #2f6b3f;
  --burn: #b4402c;
  --warn: #8a6421;

  --serif: "Instrument Serif", "Times New Roman", Times, serif;
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --pill: 999px;
}

* { box-sizing: border-box; }

/* An explicit display: on a class beats the hidden attribute's UA rule, which
   is how a "hidden" flex row stays on screen. Settle it once, here. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px 100px; }

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

/* ---- type ---------------------------------------------------------------- */

h1, h2, .result h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.035em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(38px, 6.2vw, 66px); line-height: 1.04; }
h2 { font-size: 32px; line-height: 1.1; }
.result h3 { font-size: 26px; }

.lede {
  font-size: 18px;
  color: var(--muted);
  max-width: 58ch;
  margin: 20px 0 0;
}

.label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.label.raw { text-transform: none; letter-spacing: .04em; }

.note { font-size: 14px; color: var(--faint); max-width: 64ch; }

/* ---- header -------------------------------------------------------------- */

header { padding: 34px 0 58px; }

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-bottom: 76px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
}
.brand .sub { color: var(--faint); font-weight: 400; }
.brand:hover .sub { color: var(--muted); }

/* Sized in CSS as well as on the tag, so the row does not jump while it loads.
   If the file is missing the img removes itself and the gap collapses. */
.mark {
  width: 36px; height: 36px; flex: none;
  object-fit: contain; display: block;
}

.net { display: flex; align-items: center; gap: 10px; }
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--faint); flex: none;
}
.dot.live { background: var(--pay); }
.dot.warn { background: var(--burn); }

.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  margin-top: 52px;
}
.split > div { background: var(--ground); padding: 26px 28px; }
.split strong {
  display: block; font-family: var(--mono); font-size: 26px;
  font-weight: 500; letter-spacing: -.03em; margin-bottom: 9px;
}
.split .a strong { color: var(--pay); }
.split .b strong { color: var(--burn); }
.split p { margin: 0; font-size: 15px; color: var(--muted); }

/* ---- sections ------------------------------------------------------------ */

section { padding-top: 58px; margin-top: 58px; border-top: 1px solid var(--rule); }
.head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 30px;
}

/* ---- form ---------------------------------------------------------------- */

form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }

label {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
}

input, textarea {
  font-family: var(--sans);
  font-size: 16px; letter-spacing: -.01em;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 13px 15px;
  width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
input:focus, textarea:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, .07);
}
input[aria-invalid="true"] { border-color: var(--burn); }

.hint { font-size: 14px; color: var(--faint); }
.hint a { color: var(--muted); }

button {
  font-family: var(--sans);
  font-size: 15px; font-weight: 500; letter-spacing: -.005em;
  color: var(--ground);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--pill);
  padding: 14px 32px;
  cursor: pointer;
  transition: opacity .12s ease;
}
button:hover:not(:disabled) { opacity: .82; }
button:disabled { opacity: .3; cursor: not-allowed; }
button.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
button.ghost:hover:not(:disabled) { border-color: var(--ink); opacity: 1; }
button.small { padding: 8px 18px; font-size: 13px; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.actions {
  grid-column: 1 / -1; display: flex; align-items: center;
  gap: 18px; flex-wrap: wrap; margin-top: 8px;
}
.status { font-size: 15px; color: var(--muted); }
.status.err { color: var(--burn); }

/* ---- result -------------------------------------------------------------- */

.result {
  display: none;
  background: var(--panel);
  border-radius: 18px;
  padding: 28px 30px;
  margin-top: 32px;
}
.result.show { display: block; }
.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 10px 26px; margin: 20px 0 0; }
.kv dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); padding-top: 4px;
}
.kv dd { margin: 0; font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.kv a { color: var(--ink); }

/* ---- table --------------------------------------------------------------- */

.scroller { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; min-width: 660px; }
.tbl th {
  text-align: left; padding: 0 18px 12px 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); font-weight: 400;
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.tbl td { padding: 18px 18px 18px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }

/* A sortable header is a button, so it is reachable by keyboard and announced
   as one. The caret only appears on the column actually in use. */
.sorter {
  background: none; border: none; padding: 0; border-radius: 0;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.sorter:hover { color: var(--muted); opacity: 1; }
.sorter.is-on { color: var(--ink); }
.sorter.is-on::after { content: "↓"; font-size: 11px; }
.sorter.is-on.asc::after { content: "↑"; }
.sorter:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.when {
  font-family: var(--mono); font-size: 13px; letter-spacing: -.01em;
  color: var(--muted); white-space: nowrap;
}

.tk { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.tn { font-size: 13px; color: var(--faint); margin-top: 2px; }

.tv {
  font-family: var(--mono); font-size: 15px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; display: block;
}
.tv small { font-size: 9.5px; letter-spacing: .1em; color: var(--faint); margin-left: 5px; }
.tv.pay { color: var(--pay); }
.tv.burn { color: var(--burn); }

/* The queued figure sits under the realised one: what has happened, then what
   is about to. Deliberately quieter — it is a claim on the future, not a fact. */
.queued {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 11px; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--faint); white-space: nowrap;
}
.queued b { font-weight: 400; color: var(--muted); }

.tbl a.ext {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 2px; white-space: nowrap;
}
.tbl a.ext:hover { color: var(--ink); border-color: var(--ink); }

.empty { color: var(--faint); font-size: 15px; padding: 30px 0; }
.skel { animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }

/* ---- logo uploader ------------------------------------------------------- */

.drop {
  border: 1px dashed var(--rule);
  border-radius: 14px;
  background: var(--sunk);
  padding: 22px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.drop:hover, .drop:focus-visible { border-color: var(--muted); }
.drop:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.drop.over { border-color: var(--ink); border-style: solid; background: var(--panel); }
.drop.has { border-style: solid; border-color: var(--rule); cursor: default; }
.drop.bad { border-color: var(--burn); }

.dz-empty { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.dz-empty strong { font-size: 15px; font-weight: 500; }
.dz-empty span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}

.dz-file { display: flex; align-items: center; gap: 16px; }

/* The checks show through a transparent PNG, which is the whole point of one. */
.dz-thumb {
  flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 10px;
  border: 1px solid var(--rule-soft);
  background-color: var(--field);
  background-image:
    linear-gradient(45deg, var(--rule-soft) 25%, transparent 25% 75%, var(--rule-soft) 75%),
    linear-gradient(45deg, var(--rule-soft) 25%, transparent 25% 75%, var(--rule-soft) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}
.dz-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.dz-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dz-name {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dz-state { font-size: 14px; color: var(--muted); }
.dz-state.ok { color: var(--pay); }
.dz-state.warn { color: var(--warn); }
.dz-state.err { color: var(--burn); }
.dz-cid {
  font-family: var(--mono); font-size: 10px; letter-spacing: .02em;
  color: var(--faint); word-break: break-all;
}
.dz-cid:empty { display: none; }

.dz-bar { height: 2px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.dz-bar span { display: block; height: 100%; width: 0; background: var(--ink); transition: width .15s linear; }

/* ---- footer -------------------------------------------------------------- */

footer { padding-top: 40px; margin-top: 70px; border-top: 1px solid var(--rule); }
.foot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot .label { color: var(--faint); }

/* ---- narrow -------------------------------------------------------------- */

@media (max-width: 720px) {
  .wrap { padding: 0 20px 70px; }
  form, .split { grid-template-columns: 1fr; }
  .bar { margin-bottom: 48px; }
  header { padding-bottom: 40px; }
  section { padding-top: 44px; margin-top: 44px; }
}

@media (max-width: 560px) {
  .dz-file { flex-wrap: wrap; }
  .dz-meta { flex-basis: 100%; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}