/* AiBLE Careers — public stylesheet.
   Self-contained: no framework, no webfont, no CDN. One colour system,
   defined once on :root and redefined for dark mode. */

:root{
  --cx-red:#e01f26;
  --cx-red-600:#bf1a20;
  --cx-red-700:#9c151a;
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#f0f2f5;
  --text:#14181f;
  --text-2:#5a6472;
  --border:#dde1e7;
  --ring:rgba(224,31,38,.28);
  --ok-bg:#e8f6ed; --ok-fg:#186b3a;
  --err-bg:#fdeaea; --err-fg:#9c151a;
  --radius:12px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --maxw:920px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b111b; --surface:#131b27; --surface-2:#1a2431;
    --text:#e8ecf2; --text-2:#9aa6b6; --border:#27323f;
    --cx-red:#ff5a60; --cx-red-600:#e1444a; --cx-red-700:#c73a40;
    --ring:rgba(255,90,96,.30);
    --ok-bg:#12301f; --ok-fg:#7fd6a0;
    --err-bg:#331416; --err-fg:#ff9b9f;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0b111b; --surface:#131b27; --surface-2:#1a2431;
  --text:#e8ecf2; --text-2:#9aa6b6; --border:#27323f;
  --cx-red:#ff5a60; --cx-red-600:#e1444a; --cx-red-700:#c73a40;
  --ring:rgba(255,90,96,.30);
  --ok-bg:#12301f; --ok-fg:#7fd6a0;
  --err-bg:#331416; --err-fg:#ff9b9f;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
a{color:var(--cx-red);text-underline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}

/* ---- header ---- */
.top{background:var(--surface);border-bottom:1px solid var(--border)}
.top .wrap{display:flex;align-items:center;gap:12px;min-height:64px}
.top img{height:34px;width:auto}
.top .sp{flex:1}
.top a.home{color:var(--text-2);text-decoration:none;font-size:14px;font-weight:500}
.top a.home:hover{color:var(--cx-red)}

.hero{padding:40px 0 28px}
.hero h1{margin:0 0 8px;font-size:clamp(26px,4.5vw,38px);line-height:1.2;letter-spacing:-.02em}
.hero p{margin:0;color:var(--text-2);max-width:60ch}

/* ---- job cards ---- */
.jobs{display:grid;gap:12px;padding-bottom:48px}
.job{
  display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 20px;text-decoration:none;color:inherit;
  box-shadow:var(--shadow);transition:border-color .15s,transform .15s;
}
.job:hover,.job:focus-visible{border-color:var(--cx-red);transform:translateY(-1px)}
.job h2{margin:0 0 6px;font-size:18px;line-height:1.35}
.job .sum{margin:0 0 10px;color:var(--text-2);font-size:14.5px}
.meta{display:flex;flex-wrap:wrap;gap:6px}
.tag{
  font-size:12.5px;color:var(--text-2);background:var(--surface-2);
  border:1px solid var(--border);border-radius:999px;padding:3px 10px;white-space:nowrap;
}
.tag.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---- detail ---- */
.back{display:inline-block;margin:24px 0 8px;font-size:14px;text-decoration:none}
.panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);margin-bottom:20px;
}
.panel h1{margin:0 0 10px;font-size:clamp(22px,3.5vw,30px);line-height:1.25;letter-spacing:-.01em}
.jd{white-space:pre-wrap;margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}

/* ---- form ---- */
.panel h2{margin:0 0 4px;font-size:19px}
.hint{color:var(--text-2);font-size:14px;margin:0 0 18px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{display:flex;flex-direction:column;gap:6px}
.f.full{grid-column:1/-1}
label{font-size:13.5px;font-weight:600}
label .req{color:var(--cx-red)}
input,textarea,select{
  font:inherit;color:var(--text);background:var(--surface-2);
  border:1px solid var(--border);border-radius:9px;padding:10px 12px;width:100%;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--cx-red);box-shadow:0 0 0 3px var(--ring)}
textarea{min-height:96px;resize:vertical}
input[type=file]{padding:9px;background:var(--surface-2)}
.sub{font-size:12.5px;color:var(--text-2)}

.btn{
  font:inherit;font-weight:600;cursor:pointer;border:1px solid transparent;
  background:var(--cx-red);color:#fff;border-radius:9px;padding:12px 22px;
}
.btn:hover:not(:disabled){background:var(--cx-red-600)}
.btn:disabled{opacity:.6;cursor:progress}
.actions{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}

.note{border-radius:9px;padding:12px 14px;margin:0 0 16px;font-size:14.5px;display:none}
.note.show{display:block}
.note.ok{background:var(--ok-bg);color:var(--ok-fg)}
.note.err{background:var(--err-bg);color:var(--err-fg)}
.ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700}

.empty{
  background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);
  padding:40px 24px;text-align:center;color:var(--text-2);
}
.empty strong{display:block;color:var(--text);font-size:17px;margin-bottom:6px}

.foot{border-top:1px solid var(--border);margin-top:20px;padding:24px 0 40px;color:var(--text-2);font-size:13.5px}
.foot a{color:var(--text-2)}

@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .panel{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}