/*
  Manga Translator - shared look for every page.
  Idea: a weekly manga magazine. Indigo ink printed on cool newsprint, with the
  yellow paper of the colour section as the one accent, and screentone dots as
  the only texture. Thai UI type is Anuphan; headlines are lettered in Itim,
  the way Thai text sits inside a speech balloon.
*/

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #eef0f5;
  --sheet: #ffffff;
  --sheet-2: #f6f7fa;
  --ink: #1f2348;
  --ink-2: #474d70;
  --ink-3: #6d7293;
  --tone: #d6d9e5;
  --tone-strong: #b4b8cc;
  --dot: rgba(31, 35, 72, 0.16);
  --yellow: #ffd43b;
  --yellow-soft: #fff4c2;
  --yellow-ink: #3a2f00;
  --red: #c32f3a;
  --red-soft: #fde8ea;
  --green: #1c7a54;
  --green-soft: #e1f4ea;
  --orange: #a95a00;
  --orange-soft: #fff0dc;
  --btn-bg: var(--ink);
  --btn-fg: #ffffff;
  --btn-hover: #2f3466;
  --field: #ffffff;
  --scrim: rgba(20, 22, 45, 0.55);
  --lift: 0 1px 0 rgba(31, 35, 72, 0.06), 0 12px 32px -18px rgba(31, 35, 72, 0.35);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #12142a;
  --sheet: #1a1d38;
  --sheet-2: #20244280;
  --ink: #eceef8;
  --ink-2: #b9bcd6;
  --ink-3: #8c90b0;
  --tone: #2e3258;
  --tone-strong: #444a78;
  --dot: rgba(236, 238, 248, 0.1);
  --yellow: #ffd43b;
  --yellow-soft: rgba(255, 212, 59, 0.16);
  --yellow-ink: #ffe27a;
  --red: #ff8f98;
  --red-soft: rgba(255, 120, 132, 0.14);
  --green: #7fdcae;
  --green-soft: rgba(127, 220, 174, 0.13);
  --orange: #ffc27a;
  --orange-soft: rgba(255, 180, 90, 0.14);
  --btn-bg: #eceef8;
  --btn-fg: #1f2348;
  --btn-hover: #ffffff;
  --field: #15172f;
  --scrim: rgba(5, 6, 15, 0.7);
  --lift: 0 16px 40px -20px rgba(0, 0, 0, 0.7);
}

:root {
  --font-ui: "Anuphan", "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;
  --font-letter: "Itim", "Anuphan", "Noto Sans Thai", sans-serif;

  /* type scale, ratio 1.25 on a 16px base */
  --t-xs: 0.8rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.5625rem;
  --t-2xl: 1.953rem;
  --t-3xl: 2.441rem;

  /* spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;

  /* radius by role: controls are small, sheets medium, balloons round */
  --r-control: 8px;
  --r-sheet: 14px;
  --r-round: 999px;

  --page-w: 1240px;
  --gutter: 16px;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }

a { color: inherit; }

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

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--yellow);
  border-radius: 4px;
}

::selection { background: var(--yellow); color: #1f2348; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--page-w));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- icons: one stroke style everywhere ---------- */
.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  display: inline-block;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- lettering ---------- */
.letter {
  font-family: var(--font-letter);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
}

.page-title {
  font-family: var(--font-letter);
  font-weight: 400;
  font-size: clamp(var(--t-2xl), 4vw, var(--t-3xl));
  line-height: 1.2;
}

.page-lede {
  margin-top: var(--s-2);
  max-width: 60ch;
  color: var(--ink-2);
}

/* ---------- top nav ---------- */
.mt-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--sheet) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tone);
}

.mt-nav-inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.mt-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
}

.mt-brand-mark { width: 38px; height: 34px; flex: none; }
.mt-brand-mark .balloon { fill: var(--ink); }
.mt-brand-mark text { fill: var(--yellow); font-family: var(--font-letter); font-size: 19px; }
:root[data-theme="dark"] .mt-brand-mark text { fill: #1f2348; }

.mt-links {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.mt-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 var(--s-3);
  border-radius: var(--r-control);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.mt-links a:hover { color: var(--ink); background: var(--sheet-2); }

.mt-links a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* the active page is marked like a highlighter stroke on newsprint */
.mt-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: 6px;
  height: 7px;
  border-radius: 2px;
  background: var(--yellow);
  z-index: -1;
}

.mt-links .nav-lock { display: none; color: var(--ink-3); }
.mt-links .nav-lock.always,
body.mt-no-pdf_jobs .mt-links .nav-lock { display: inline-block; }

.mt-nav-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.account-slot { display: flex; min-width: 0; }

@media (max-width: 760px) {
  .mt-nav-inner {
    flex-wrap: wrap;
    gap: 0 var(--s-3);
    padding-top: 10px;
  }
  .mt-links {
    order: 3;
    width: calc(100% + 2 * var(--s-3));
    margin: 4px calc(-1 * var(--s-3)) 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mt-links::-webkit-scrollbar { display: none; }
  .mt-nav-end:has(.account-slot) { order: 4; width: 100%; margin: 0 0 10px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: var(--r-control);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover:not(:disabled) { background: var(--btn-hover); }

.btn-secondary { background: var(--sheet); color: var(--ink); border-color: var(--tone-strong); }
.btn-secondary:hover:not(:disabled) { border-color: var(--ink); }

.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--sheet-2); color: var(--ink); }

.btn-highlight { background: var(--yellow); color: #1f2348; }
.btn-highlight:hover:not(:disabled) { background: #ffcb0f; }

.btn-danger { background: var(--sheet); color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.btn-danger:hover:not(:disabled) { background: var(--red-soft); }

.btn-sm { min-height: 36px; padding: 0 12px; font-size: var(--t-xs); }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: var(--t-md); }
.btn-block { width: 100%; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--tone);
  border-radius: var(--r-control);
  background: var(--sheet);
  color: var(--ink-2);
  cursor: pointer;
}

.icon-btn:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- fields ---------- */
.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1.5px solid var(--tone-strong);
  border-radius: var(--r-control);
  background: var(--field);
  color: var(--ink);
  font-size: var(--t-md);
  line-height: 1.4;
}

.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: var(--ink-3); }
.input:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--yellow-soft); }

select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d7293' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

.hint { margin-top: 6px; color: var(--ink-3); font-size: var(--t-xs); line-height: 1.5; }

/* ---------- sheets ---------- */
.sheet {
  background: var(--sheet);
  border: 1px solid var(--tone);
  border-radius: var(--r-sheet);
}

/* screentone: the only texture in the product */
.tone {
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.5px);
  background-size: 8px 8px;
}

/* ---------- pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-round);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

/* ---------- footer ---------- */
.mt-footer {
  margin-top: var(--s-8);
  padding: var(--s-5) 0 var(--s-6);
  border-top: 1px solid var(--tone);
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.mt-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
}

/* ---------- motion that answers what the reader does ---------- */

/* Moving between pages: the nav stays put and only the page underneath changes. */
@view-transition { navigation: auto; }
.mt-nav { view-transition-name: site-nav; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.22s; }

.btn:active:not(:disabled),
.icon-btn:active { transform: translateY(1px); }

/* The theme icon turns over when the theme flips (not on page load). */
@media (prefers-reduced-motion: no-preference) {
  .theme-flipped #theme-toggle .ico { animation: icon-turn 0.35s cubic-bezier(0.3, 0.7, 0.2, 1.2); }
}

@keyframes icon-turn {
  from { transform: rotate(-90deg) scale(0.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Disclosures open with height instead of jumping. */
:root { interpolate-size: allow-keywords; }

.faq details::details-content,
details.advanced::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.28s cubic-bezier(0.3, 0.7, 0.2, 1), content-visibility 0.28s allow-discrete;
}

.faq details[open]::details-content,
details.advanced[open]::details-content { block-size: auto; }

/* Dialogs rise in from the page and settle. */
dialog[open] {
  animation: dialog-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

dialog[open]::backdrop { animation: fade-in 0.24s ease; }

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  .faq details::details-content,
  details.advanced::details-content { transition: none; }

  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}