/* Job board web app. */
body.app{font-size:16px}
nav.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:rgba(251,252,248,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-links{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-links a,.nav-links .link{padding:8px 12px;border-radius:999px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:15px}
.nav-links a.on{background:var(--green-soft);color:var(--green-2)}
.link{background:none;border:0;color:var(--green-2);font:600 15px var(--font);cursor:pointer;padding:8px 0}
.page{max-width:1120px;margin:0 auto;padding:24px 20px 64px}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.page h1,.side h1,.card h1{font-size:2rem}
.narrow{max-width:480px;margin:32px auto;padding:28px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:block;color:inherit;text-decoration:none}
a.card:hover{border-color:var(--ink-3)}
.cards{display:grid;gap:12px}
.card.job p,.card.zone p{margin:.4em 0 0}
.lead{color:var(--ink-2)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;flex:1;min-width:0}
.field span{font-weight:600;font-size:15px;color:#314c3b}
.field small{color:var(--ink-3);font-size:13px}
.field.inline{flex-direction:row;align-items:center;margin:0}
input,select,textarea{border:1.5px solid #8aa294;background:#fff;border-radius:10px;min-height:48px;padding:10px 12px;font:16px var(--font);color:var(--ink);width:100%}
textarea{min-height:90px}
.field.inline input{width:90px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.tab{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font:600 15px var(--font);color:var(--ink-2);cursor:pointer}
.tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.row>input{flex:1}
.pill{display:inline-block;background:var(--paper-2);color:var(--ink-2);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:700}
.pill.big{font-size:15px;padding:8px 14px}
.note{background:var(--amber-soft);border-radius:10px;padding:10px 14px;color:#5a4410}
.split{display:grid;grid-template-columns:minmax(320px,420px) 1fr;min-height:calc(100vh - 66px)}
.split .side{padding:24px 20px;overflow:auto;max-height:calc(100vh - 66px);border-right:1px solid var(--line)}
.split .map-wrap{position:sticky;top:66px;height:calc(100vh - 66px)}
.split .map{height:100%}
@media (max-width:860px){.split{grid-template-columns:1fr}.split .side{max-height:none;border-right:0}.split .map-wrap{position:relative;top:0;height:60vh;order:-1}}
.map-wrap{position:relative}
.map{width:100%;height:380px;background:var(--paper-3);border-radius:var(--radius);overflow:hidden}
.map.tall{height:520px}
.split .map{border-radius:0}
.map-tools{position:absolute;left:12px;top:12px;display:flex;gap:8px;flex-wrap:wrap}
.legend{position:absolute;left:12px;bottom:12px;background:#fff;border-radius:10px;padding:8px 12px;display:flex;gap:12px;flex-wrap:wrap;font-size:13px;box-shadow:var(--shadow)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i,.swatch{display:inline-block;width:12px;height:12px;border-radius:3px}
.price{background:var(--green-soft);border-radius:12px;padding:14px 16px;margin:8px 0 14px}
.price b{font-size:1.8rem;letter-spacing:-.03em;margin-right:6px}
.stats{display:flex;gap:28px;flex-wrap:wrap;margin:18px 0}
.stat b{display:block;font-size:1.6rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--ink-3)}
.zone-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.zone-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.zone-card p{margin:.3em 0 0;font-size:15px}
.zone-head{display:flex;align-items:center;gap:8px;justify-content:space-between}
.zone-head strong{font-size:1.1rem}
.code-box{display:flex;flex-direction:column;gap:2px;background:var(--paper-2);border-radius:12px;padding:12px 16px;margin:12px 0}
.code-box:empty{display:none}
.code-box b{font-size:2.2rem;letter-spacing:.18em;font-family:ui-monospace,Menlo,monospace}
.code-box span,.code-box small{font-size:13px;color:var(--ink-3)}
.table{width:100%;border-collapse:collapse;background:#fff;margin:12px 0;font-size:15px}
.table th,.table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.splitter{margin:16px 0}
.splitter .map{margin:12px 0}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;transition:.25s;pointer-events:none;max-width:90vw;z-index:50}
#toast.show{opacity:1;transform:translateX(-50%)}
#toast.bad{background:var(--red)}