/* =====================================================================
   Job Organizer — orange theme
   Clean, modern, responsive. No framework, no build step.
   ===================================================================== */

:root {
  --orange-50:  #FFF7ED;
  --orange-100: #FFEDD5;
  --orange-200: #FED7AA;
  --orange-300: #FDBA74;
  --orange-400: #FB923C;
  --orange-500: #F97316;
  --orange-600: #EA580C;
  --orange-700: #C2410C;

  --ink:      #1E293B;
  --ink-soft: #475569;
  --muted:    #94A3B8;
  --line:     #E2E8F0;
  --bg:       #F8FAFC;
  --card:     #FFFFFF;

  --green: #16A34A;
  --red:   #DC2626;
  --amber: #D97706;
  --blue:  #2563EB;
  --purple:#7C3AED;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.06);
  --shadow-lg: 0 10px 25px -5px rgba(234,88,12,.15), 0 8px 10px -6px rgba(15,23,42,.08);
  --radius: 14px;
  --radius-sm: 9px;
  --maxw: 1160px;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--orange-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .4em; color: var(--ink); }
p { margin: 0 0 .8em; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

header.topbar {
  background: linear-gradient(135deg, var(--orange-600), var(--orange-500));
  color: #fff;
  box-shadow: var(--shadow-md);
  position: sticky; top: 0; z-index: 50;
}
.topbar .wrap { display: flex; align-items: center; gap: 20px; height: 62px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; color: #fff; }
.brand:hover { text-decoration: none; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 9px; background: #fff;
  display: grid; place-items: center; font-size: 20px; box-shadow: var(--shadow-sm);
}
.brand small { font-weight: 500; opacity: .85; font-size: .72rem; display: block; margin-top: -3px; }
nav.main { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
nav.main a {
  color: #fff; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .92rem;
  opacity: .9; transition: background .15s, opacity .15s;
}
nav.main a:hover { background: rgba(255,255,255,.16); text-decoration: none; opacity: 1; }
nav.main a.active { background: #fff; color: var(--orange-700); opacity: 1; }

/* ---------- banners ---------- */
.demo-banner {
  background: var(--orange-100); color: var(--orange-700);
  border-bottom: 1px solid var(--orange-200);
  font-size: .88rem; text-align: center; padding: 8px 16px;
}
.demo-banner strong { font-weight: 700; }

/* ---------- hero ---------- */
.hero { padding: 46px 0 30px; }
.hero h1 { font-size: 2.35rem; letter-spacing: -.03em; margin-bottom: .25em; }
.hero .accent { color: var(--orange-600); }
.hero p.lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 680px; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pill { background: var(--orange-50); color: var(--orange-700); border: 1px solid var(--orange-200);
  padding: 5px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: none; border-radius: var(--radius-sm); font-weight: 700; font-size: .95rem;
  padding: 11px 20px; transition: transform .06s, box-shadow .15s, background .15s;
  font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--orange-500); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--orange-600); text-decoration: none; }
.btn-ghost { background: #fff; color: var(--orange-700); border: 1.5px solid var(--orange-300); }
.btn-ghost:hover { background: var(--orange-50); text-decoration: none; }
.btn-sm { padding: 7px 13px; font-size: .85rem; }
.btn-danger { background: #fff; color: var(--red); border: 1.5px solid #FCA5A5; }
.btn-danger:hover { background: #FEF2F2; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- cards & grid ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 20px;
}
.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.section { margin: 26px 0; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title h2 { font-size: 1.3rem; margin: 0; }

/* ---------- stat tiles ---------- */
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-sm); }
.stat .n { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: var(--orange-600); }
.stat .l { color: var(--ink-soft); font-size: .86rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat.alt .n { color: var(--ink); }

/* ---------- job list ---------- */
.job-card { display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s, transform .08s, border-color .15s; cursor: pointer; }
.job-card:hover { box-shadow: var(--shadow-lg); border-color: var(--orange-300); transform: translateY(-2px); }
.job-card h3 { margin: 0; font-size: 1.12rem; }
.job-meta { color: var(--muted); font-size: .85rem; }
.job-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: .88rem; color: var(--ink-soft); }
.job-stats b { color: var(--ink); }

/* ---------- category chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--orange-50); color: var(--orange-700); border: 1px solid var(--orange-200);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; }
.badge-review { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.badge-safety { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.badge-pii    { background: #EDE9FE; color: #5B21B6; border: 1px solid #DDD6FE; }
.badge-missing{ background: #FFEDD5; color: #9A3412; border: 1px solid #FED7AA; }
.badge-ok     { background: #DCFCE7; color: #166534; border: 1px solid #BBF7D0; }

/* ---------- item card ---------- */
.item {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--orange-400);
  border-radius: var(--radius-sm); padding: 15px 17px; box-shadow: var(--shadow-sm);
}
.item.review { border-left-color: var(--amber); }
.item.safety { border-left-color: var(--red); }
.item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.item-head .t { font-weight: 700; font-size: 1.02rem; }
.item .sum { color: var(--ink-soft); font-size: .93rem; margin: 4px 0 10px; }
.kv { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .84rem; }
.kv .k { color: var(--muted); }
.kv .v { color: var(--ink); font-weight: 600; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.tag { background: var(--bg); border: 1px solid var(--line); color: var(--ink-soft);
  border-radius: 6px; padding: 1px 8px; font-size: .74rem; }
.badges-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- timeline ---------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--orange-200); }
.tl-item { position: relative; padding: 0 0 20px; }
.tl-item::before { content: ""; position: absolute; left: -22px; top: 5px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--orange-500); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--orange-200); }
.tl-date { font-size: .78rem; font-weight: 700; color: var(--orange-600); text-transform: uppercase; letter-spacing: .04em; }
.tl-title { font-weight: 700; }
.tl-sum { color: var(--ink-soft); font-size: .9rem; }

/* ---------- spend bars ---------- */
.bar-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center; margin-bottom: 9px; font-size: .88rem; }
.bar-track { background: var(--orange-50); border-radius: 999px; height: 12px; overflow: hidden; }
.bar-fill { background: linear-gradient(90deg, var(--orange-400), var(--orange-600)); height: 100%; border-radius: 999px; }
.bar-val { font-weight: 700; color: var(--ink); }

/* ---------- forms ---------- */
label.field { display: block; margin-bottom: 14px; }
label.field .lab { font-weight: 700; font-size: .9rem; margin-bottom: 5px; display: block; }
textarea, input[type=text] {
  width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; font-family: inherit; font-size: .95rem; color: var(--ink);
  background: #fff; transition: border-color .15s, box-shadow .15s; resize: vertical;
}
textarea:focus, input[type=text]:focus { outline: none; border-color: var(--orange-400);
  box-shadow: 0 0 0 3px var(--orange-100); }
textarea { min-height: 190px; line-height: 1.5; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row > label.field { flex: 1; min-width: 180px; }
.hint { color: var(--muted); font-size: .82rem; }

/* ---------- table ---------- */
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.data th, table.data td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
table.data th { color: var(--ink-soft); font-weight: 700; background: var(--orange-50); position: sticky; top: 0; }
table.data tr:hover td { background: var(--orange-50); }
.ok-yes { color: var(--green); font-weight: 800; }
.ok-no  { color: var(--red); font-weight: 800; }

/* ---------- guardrails ---------- */
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rules .col h3 { display: flex; align-items: center; gap: 8px; }
.rules ul { margin: 0; padding-left: 18px; }
.rules li { margin-bottom: 8px; color: var(--ink-soft); }
.rules .can { border-top: 3px solid var(--green); }
.rules .cannot { border-top: 3px solid var(--red); }
.disclaimer { background: var(--orange-50); border: 1px solid var(--orange-200); border-radius: var(--radius-sm);
  padding: 13px 16px; color: var(--orange-700); font-size: .88rem; margin-top: 16px; }

/* ---------- misc ---------- */
.spinner { width: 20px; height: 20px; border: 3px solid var(--orange-200); border-top-color: var(--orange-500);
  border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.center-load { text-align: center; padding: 60px 0; color: var(--muted); }
.empty { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty .big { font-size: 2.6rem; margin-bottom: 8px; }
.crumb { color: var(--muted); font-size: .88rem; margin-bottom: 6px; }
.crumb a { color: var(--muted); }
.flex { display: flex; align-items: center; gap: 10px; }
.flex.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.mono { font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; }
pre.json { background: #0F172A; color: #E2E8F0; padding: 16px; border-radius: var(--radius-sm);
  overflow-x: auto; font-size: .8rem; line-height: 1.5; max-height: 380px; }

footer.foot { border-top: 1px solid var(--line); margin-top: 40px; padding: 24px 0; color: var(--muted); font-size: .85rem; }
footer.foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 11px 20px; border-radius: 999px; font-weight: 600;
  box-shadow: var(--shadow-lg); z-index: 100; font-size: .9rem; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: 1fr; }
  .grid.cols-2 { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.9rem; }
  .bar-row { grid-template-columns: 110px 1fr auto; }
}
@media (max-width: 560px) {
  .grid.cols-4 { grid-template-columns: 1fr; }
  .topbar .wrap { height: auto; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; gap: 8px; }
  .brand small { display: none; }
  nav.main { margin-left: auto; gap: 2px; }
  nav.main a { padding: 6px 10px; font-size: .82rem; }
}