/* One job per screen: drop a PDF, press download. The ruler above the sheet is the progress bar. */

@font-face { font-family: Kanit; font-weight: 400; font-display: swap; src: url("fonts/Kanit-Regular.woff2") format("woff2"); }
@font-face { font-family: Kanit; font-weight: 500; font-display: swap; src: url("fonts/Kanit-Medium.woff2") format("woff2"); }
@font-face { font-family: Kanit; font-weight: 600; font-display: swap; src: url("fonts/Kanit-SemiBold.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #f1f3f9;
  --paper: #ffffff;
  --ink: #1b2140;
  --soft: #5b6383;
  --brand: #3037a6;
  --brand-dark: #262c8a;
  --tint: #e9eafb;
  --ok: #12805c;
  --ok-tint: #e3f4ee;
  --warn: #8a5300;
  --warn-tint: #fdf1dc;
  --bad: #b3261e;
  --bad-tint: #fce9e7;
  --line: #dfe3ee;
  --tick: #8b93ad;
  --ml: 2;
  --mr: 2;
  --font: Kanit, "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--font); -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.gone { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.old-browser { display: block; max-width: 36rem; margin: 3rem auto; padding: 1.5rem; border-radius: 16px; background: var(--paper); font-size: 1.125rem; }
.old-browser strong { display: block; font-weight: 600; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 760px; margin: 0 auto; padding: 1rem 16px; }
.brand { font-size: 1.25rem; font-weight: 600; white-space: nowrap; }
.arrow { color: var(--brand); }
.tabs { display: flex; padding: 3px; border-radius: 12px; background: #e3e6f1; }
.tabs button { min-height: 40px; padding: 0 1rem; border: 0; border-radius: 9px; background: none; color: var(--soft); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgb(27 33 64 / .12); }

main { max-width: 760px; margin: 0 auto; padding: 0 16px 2rem; }
.hero { padding: 1.25rem 0 1.5rem; text-align: center; }
h1 { margin: 0; font-size: 2.25rem; font-weight: 600; line-height: 1.25; }
.hero p { max-width: 34rem; margin: .35rem auto 0; color: var(--soft); }

.sheet { overflow: hidden; border-radius: 16px; background: var(--paper); box-shadow: 0 1px 2px rgb(27 33 64 / .08), 0 12px 32px rgb(27 33 64 / .08); }

/* 21 cm across with grey margins, like the ruler above a Word page. */
.ruler {
  position: relative; height: 24px; overflow: hidden; border-bottom: 1px solid var(--line); background:
    linear-gradient(to right, #eceef6 calc(100% * var(--ml) / 21), transparent 0 calc(100% - 100% * var(--mr) / 21), #eceef6 0);
}
.ruler-fill {
  position: absolute; inset: 0 auto 0 calc(100% * var(--ml) / 21);
  width: calc((100% - 100% * (var(--ml) + var(--mr)) / 21) * var(--progress, 0));
  background: var(--tint); transition: width .2s linear;
}
.ruler-mark {
  position: absolute; bottom: 0; left: calc(100% * var(--ml) / 21 + (100% - 100% * (var(--ml) + var(--mr)) / 21) * var(--progress, 0));
  width: 0; height: 0; margin-left: -6px; border: 6px solid transparent; border-bottom: 8px solid var(--brand); border-top: 0;
  transition: left .2s linear;
}
.ruler-tick { position: absolute; top: 8px; width: 1px; height: 7px; background: var(--tick); transform: translateX(-50%); }
.ruler-num { position: absolute; top: 3px; color: var(--soft); font-size: 11px; line-height: 18px; transform: translateX(-50%); }

.page { padding: 1.5rem calc(100% * var(--mr) / 21) 1.75rem calc(100% * var(--ml) / 21); }

.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  min-height: 300px; padding: 1.5rem; border: 2px dashed var(--tick); border-radius: 14px; text-align: center; cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
.drop:hover, .drop.over { border-color: var(--brand); background: var(--tint); }
.drop:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; }
.drop-icon { color: var(--brand); }
.drop-title { font-size: 1.5rem; font-weight: 500; }
.drop-button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.5rem; border-radius: 12px; background: var(--brand); color: var(--paper); font-weight: 500; }
.drop:hover .drop-button { background: var(--brand-dark); }
.drop-hint { color: var(--soft); font-size: .875rem; }
.drop-more { display: none; color: var(--brand); font-weight: 500; }

/* Once a file is in, the drop area steps aside for the result. */
.drop.compact { flex-direction: row; min-height: 52px; padding: .25rem 1rem; gap: .5rem; border-width: 1px; }
.drop.compact .drop-icon, .drop.compact .drop-title, .drop.compact .drop-button, .drop.compact .drop-hint { display: none; }
.drop.compact .drop-more { display: inline; }
.drop.compact .drop-more::before { content: "+ "; }

.results { margin: 0; padding: 0; list-style: none; }
.item { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: 0; }
.item-main { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: .25rem .75rem; }
.mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tint); color: var(--brand); font-size: 1.125rem; font-weight: 600; }
.item.complete .mark { background: var(--ok-tint); color: var(--ok); }
.item.review .mark { background: var(--warn-tint); color: var(--warn); }
.item.rejected .mark { background: var(--bad-tint); color: var(--bad); }
.item-text { min-width: 0; }
.item-name { margin: 0; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.item-status { margin: 0; color: var(--soft); font-size: .875rem; }
.item.complete .item-status { color: var(--ok); }
.item.review .item-status { color: var(--warn); }
.item.rejected .item-status { color: var(--bad); }
.item-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }

.track { grid-column: 2 / -1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--line); }
.track div { width: calc(var(--done, 0) * 100%); height: 100%; border-radius: 3px; background: var(--brand); transition: width .2s linear; }

button.primary, button.quiet { min-height: 44px; padding: 0 1.1rem; border-radius: 12px; white-space: nowrap; cursor: pointer; }
button.primary { border: 0; background: var(--brand); color: var(--paper); font-weight: 500; }
button.primary:hover { background: var(--brand-dark); }
button.quiet { border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
button.quiet:hover { border-color: var(--brand); color: var(--brand); }

.reason { margin: .6rem 0 0 calc(40px + .75rem); }
.warnings { margin: .75rem 0 0 calc(40px + .75rem); padding: 0; list-style: none; }
.warnings:empty { display: none; }
.warnings li { margin-top: .35rem; padding: .45rem .75rem; border-radius: 10px; background: var(--warn-tint); color: var(--warn); font-size: .9375rem; }
.warnings li.critical { background: var(--bad-tint); color: var(--bad); font-weight: 500; }

.more { margin: .5rem 0 0 calc(40px + .75rem); color: var(--soft); font-size: .875rem; }
.more summary { min-height: 32px; cursor: pointer; }
.more p { margin: .25rem 0; }
.more ul { margin: .25rem 0; padding: 0; list-style: none; }

.queue-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-top: 1rem; }
.queue-bar p { margin: 0; color: var(--soft); font-size: .9375rem; }
.queue-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.slot { display: flex; flex-direction: column; justify-content: center; gap: .15rem; min-height: 120px; padding: 1rem; border: 2px dashed var(--tick); border-radius: 14px; text-align: center; cursor: pointer; transition: background-color .12s, border-color .12s; }
.slot:hover, .slot.over { border-color: var(--brand); background: var(--tint); }
.slot:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; }
.slot.filled { border-style: solid; border-color: var(--ok); background: var(--ok-tint); }
.slot-label { font-weight: 500; }
.slot-file { color: var(--brand); font-size: .9375rem; overflow-wrap: anywhere; }
.slot.filled .slot-file { color: var(--ok); }

#compare-cancel { margin-top: 1rem; }
.verdict { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: 14px; }
.verdict.pass { background: var(--ok-tint); color: var(--ok); }
.verdict.fail { background: var(--bad-tint); color: var(--bad); }
.verdict strong { display: block; font-size: 1.375rem; font-weight: 600; }
.verdict ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.verdict p { margin: .25rem 0 0; }
.waiting-text { margin: 1.25rem 0 0; color: var(--soft); }
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem 1rem; margin: 1rem 0; }
.figures div { display: flex; flex-direction: column-reverse; }
.figures dt { color: var(--soft); font-size: .8125rem; line-height: 1.3; }
.figures dd { margin: 0; font-size: 1.125rem; font-weight: 500; }
.criteria { margin: 0; color: var(--soft); font-size: .875rem; }
.mismatch { margin-top: .75rem; }
.mismatch summary { min-height: 32px; font-weight: 500; cursor: pointer; }
.mismatch-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { padding: .35rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-weight: 500; white-space: nowrap; }

.guide { margin-top: 1.5rem; border-radius: 16px; background: var(--paper); }
.guide details { padding: 0 1.25rem; border-bottom: 1px solid var(--line); }
.guide details:last-child { border-bottom: 0; }
.guide summary { display: flex; align-items: center; min-height: 52px; font-weight: 500; cursor: pointer; }
.guide summary::after { content: "+"; margin-left: auto; color: var(--brand); font-size: 1.25rem; }
.guide details[open] summary::after { content: "–"; }
.guide p { margin: 0 0 .75rem; color: var(--soft); }
.guide strong { color: var(--ink); font-weight: 500; }
.foot { padding: 0 16px 1.5rem; color: var(--soft); font-size: .8125rem; text-align: center; }

/* Touch screens have no drag and drop, so the button is the whole story. */
@media (pointer: coarse) {
  .for-mouse { display: none; }
  .drop { min-height: 240px; }
}

@media (max-width: 640px) {
  :root { --ml: 1; --mr: 1; }
  .ruler-num { display: none; }
  .bar { padding: .75rem 16px; }
  .hero { padding: .75rem 0 1rem; }
  h1 { font-size: 1.75rem; }
  .page { padding-top: 1rem; padding-bottom: 1.25rem; }
  .drop { min-height: 220px; }
  .drop.compact { min-height: 52px; }
  .item-main { grid-template-columns: 40px 1fr; }
  .item-actions { grid-column: 1 / -1; margin-top: .6rem; }
  .item-actions button { flex: 1 1 100%; min-height: 48px; }
  .track { grid-column: 1 / -1; margin-top: .5rem; }
  .reason, .warnings, .more { margin-left: 0; }
  .queue-actions, .queue-actions button { width: 100%; }
  .pair { grid-template-columns: 1fr; }
  .slot { min-height: 96px; }
  .figures { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}