/* The careers page is a plain job posting: system fonts, white cards, nothing moving.
   It does not load the site's styles.css or any of the 3D. */
:root { --bg: #f3f2ef; --card: #ffffff; --line: #e0dfdc; --ink: #1d2226; --mute: #5e6368; --btn: #0a0f1c; --btn-hover: #232b47; --err: #b3261e; color-scheme: light; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }

.top { background: var(--card); border-bottom: 1px solid var(--line); }
.top-in, .foot { max-width: 760px; margin: 0 auto; padding: 0 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.top-in { height: 56px; }
.brand { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.brand b { font-weight: 800; }
.b-in { color: #00a876; }
.b-aja { color: #e8552f; }
.top a:not(.brand) { color: var(--mute); font-size: .9rem; text-decoration: none; }
.top a:not(.brand):hover { color: var(--ink); text-decoration: underline; }

main { max-width: 760px; margin: 0 auto; padding: 1.25rem 1.25rem 2rem; display: grid; gap: 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1.5rem; }
.company { color: var(--mute); font-size: .92rem; }
h1 { font-size: 1.6rem; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; margin-top: .2rem; }
.where { color: var(--mute); margin-top: .35rem; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin-top: .85rem; }
.tags li { background: var(--bg); border-radius: 4px; padding: .2rem .6rem; font-size: .88rem; }
.btn { display: inline-block; margin-top: 1.1rem; border: 0; border-radius: 999px; background: var(--btn); color: #fff; font-weight: 600; padding: .6rem 1.4rem; cursor: pointer; }
.btn:hover { background: var(--btn-hover); }
.btn:disabled { opacity: .6; cursor: default; }
.btn:focus-visible, .x:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--btn); outline-offset: 2px; }
h2 { font-size: 1.15rem; font-weight: 600; }
.job h2:not(:first-child) { margin-top: 1.25rem; }
.job p { margin-top: .4rem; }
.job ul { margin: .4rem 0 0 1.2rem; }
.job li { margin-top: .2rem; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.25rem; }
.foot { color: var(--mute); font-size: .88rem; padding-bottom: 2rem; flex-wrap: wrap; }

dialog { width: min(560px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; border: 0; border-radius: 8px; padding: 0; color: var(--ink); background: var(--card); }
dialog::backdrop { background: rgba(0, 0, 0, .55); }
.d-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--line); }
.x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font-size: 1.1rem; color: var(--mute); cursor: pointer; }
.x:hover { background: var(--bg); color: var(--ink); }
.apply-form { display: grid; gap: .7rem; padding: 1rem 1.25rem 1.25rem; }
.apply-form[hidden] { display: none; }
.field { display: grid; gap: .2rem; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
label { font-size: .88rem; color: var(--mute); }
.field input, .field textarea { width: 100%; background: #fff; border: 1px solid #8c8f93; border-radius: 4px; padding: .45rem .6rem; }
.field textarea { resize: vertical; min-height: 4.6rem; }
.field [aria-invalid="true"] { border-color: var(--err); }
::placeholder { color: #8c8f93; }
.field-hint { color: var(--mute); font-size: .8rem; line-height: 1.4; }
.field-err { color: var(--err); font-size: .82rem; line-height: 1.4; }
.apply-submit { justify-self: end; margin-top: .2rem; }
.apply-status { color: var(--mute); font-size: .88rem; }
.apply-status:empty { display: none; }
.apply-status.is-error { color: var(--err); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.apply-done { padding: 1.5rem 1.25rem; display: grid; gap: .5rem; justify-items: start; }
.apply-done[hidden] { display: none; }
.apply-done:focus { outline: none; }
.apply-done p { color: var(--mute); }
.noscript { color: var(--mute); margin-top: .8rem; }

@media (max-width: 560px) {
  h1 { font-size: 1.4rem; }
  .card { padding: 1.25rem; }
  main { padding: 1rem .75rem 1.5rem; }
  .field-row { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; gap: 1.25rem; }
  dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .apply-submit { justify-self: stretch; }
}