/* DronePermit — dark, warm, generous. Ink and amber rather than maroon and coral. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#0C1418;          /* page ground */
  --ink-2:#121D23;        /* raised card */
  --ink-3:#18262E;        /* hover / inner panel */
  --line:#22353F;         /* hairline */
  --line-2:#2E4653;
  --text:#ECE6DF;         /* warm off-white */
  --muted:#93A6B0;
  --faint:#6B808C;
  --amber:#F0A868;        /* primary accent, runway light */
  --amber-2:#E08C45;
  --amber-soft:#F5C89C;
  --sky:#7FC4DE;          /* secondary, informational */
  --ok:#7FD1A4;
  --warn:#F0C070;
  --bad:#F08A80;
  --radius:14px;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font:16px/1.6 var(--sans);
  background-image:radial-gradient(1100px 520px at 78% -12%, rgba(240,168,104,.11), transparent 62%),
                   radial-gradient(760px 420px at 6% 4%, rgba(127,196,222,.06), transparent 60%);
  background-attachment:fixed;min-height:100vh}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- nav */
nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:18px 34px;
  border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
nav a{color:var(--muted);font-size:14.5px;font-weight:500;text-decoration:none;transition:color .15s}
nav a:hover{color:var(--text);text-decoration:none}
nav a.active{color:var(--text)}
nav .brand{margin-right:auto;display:flex;align-items:center;gap:10px;color:var(--text);
  font-family:var(--serif);font-size:25px;letter-spacing:.01em}
nav .brand:hover{text-decoration:none}
nav .brand svg{display:block;flex:0 0 auto}
nav .cta{border:1px solid var(--line-2);border-radius:999px;padding:8px 18px;color:var(--text)}
nav .cta:hover{background:var(--ink-3);border-color:var(--amber);color:var(--amber)}

main{max-width:1120px;margin:0 auto;padding:34px}
footer{max-width:1120px;margin:12px auto 48px;padding:0 34px;color:var(--faint);font-size:12.5px}
footer a{color:var(--muted)}

/* ---- type */
h1{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1.1;letter-spacing:-.01em;margin:8px 0 18px}
h2{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2;margin:30px 0 12px}
h1 em,h2 em,.accent{font-style:normal;color:var(--amber)}
p{margin:0 0 12px}
/* A row of buttons needs air above it, or it crowds the field it sits under. */
form p:has(button),form p:has(.btn),.card p:has(button),.card p:has(.btn){margin-top:18px}
.lede{font-size:18px;color:var(--muted);max-width:62ch;margin-bottom:22px}
.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:13.5px}
.narrow{max-width:470px;margin:0 auto}

/* ---- surfaces */
.card{background:linear-gradient(180deg, var(--ink-2), rgba(18,29,35,.72));
  border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-bottom:18px}
.card h2:first-child,.card h1:first-child{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.row{display:flex;gap:16px;flex-wrap:wrap}.row>*{flex:1 1 210px}

/* ---- forms */
label{display:block;font-size:11px;font-weight:600;color:var(--faint);margin:14px 0 5px;
  text-transform:uppercase;letter-spacing:.09em}
input[type=text],input[type=date],input[type=time],input[type=number],input[type=email],
input[type=password],input[type=tel],select,textarea{
  width:100%;padding:11px 13px;background:var(--ink);color:var(--text);
  border:1px solid var(--line-2);border-radius:10px;font:15px var(--sans);transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(240,168,104,.13)}
textarea{min-height:100px;line-height:1.55}
textarea[readonly]{background:var(--ink-3);border-color:var(--line);
  font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--muted)}
input[type=checkbox]{width:auto;accent-color:var(--amber)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}

button,.btn{display:inline-block;background:var(--amber);color:#1A1005;border:0;border-radius:999px;
  padding:11px 24px;font:600 14.5px var(--sans);cursor:pointer;text-decoration:none;transition:.15s}
button:hover,.btn:hover{background:var(--amber-soft);text-decoration:none;transform:translateY(-1px)}
.btn.secondary,button.secondary{background:transparent;color:var(--text);border:1px solid var(--line-2)}
.btn.secondary:hover,button.secondary:hover{border-color:var(--amber);color:var(--amber);background:transparent}
.btn.small{padding:6px 15px;font-size:13px}
button.copied,.btn.copied{background:var(--ok);color:#07231a;border-color:var(--ok)}
.btn.danger{background:transparent;color:var(--bad);border:1px solid rgba(240,138,128,.45)}
.btn.danger:hover{background:rgba(240,138,128,.12);color:var(--bad)}

/* ---- pills */
.pill{display:inline-block;padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:600;
  letter-spacing:.03em;border:1px solid transparent}
.pill.in,.pill.overdue,.pill.status-declined,.pill.status-error{background:rgba(240,138,128,.14);color:var(--bad);border-color:rgba(240,138,128,.3)}
.pill.near,.pill.soon{background:rgba(240,192,112,.13);color:var(--warn);border-color:rgba(240,192,112,.28)}
.pill.clear,.pill.ok,.pill.status-submitted,.pill.status-approved{background:rgba(127,209,164,.13);color:var(--ok);border-color:rgba(127,209,164,.28)}
.pill.status-prepared,.pill.status-draft{background:rgba(127,196,222,.12);color:var(--sky);border-color:rgba(127,196,222,.26)}

/* ---- tables */
.card>table,.tablewrap{display:block;overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top;font-size:14px}
th{font-size:10.5px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.09em}
tr:last-child td{border-bottom:0}

/* ---- bits */
.flash{background:rgba(240,168,104,.1);border:1px solid rgba(240,168,104,.3);color:var(--amber-soft);
  padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:14.5px}
.warnbox{background:rgba(240,192,112,.08);border:1px solid rgba(240,192,112,.26);
  border-radius:10px;padding:13px 17px;margin:14px 0;font-size:14.5px}
.copy{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;
  background:var(--ink);border:1px solid var(--line);color:var(--amber-soft);
  padding:5px 9px;border-radius:7px;white-space:pre-wrap;word-break:break-word}
ul.notes{margin:8px 0 0 18px;padding:0;color:var(--muted)}ul.notes li{margin:4px 0}
ol.steps{margin:8px 0 16px 20px;padding:0}ol.steps li{margin:7px 0}
ol.steps::marker,ol.steps li::marker{color:var(--amber);font-weight:600}
details summary{cursor:pointer;color:var(--muted)}
#map{height:380px;border-radius:var(--radius);border:1px solid var(--line);background:var(--ink)}
/* Darken the map without needing a paid tile key. Only the tiles are filtered, so the
   zone outline and the pin drawn on top keep their real colours. */
.leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.93) contrast(.85) saturate(.6)}
.leaflet-control-zoom a{background:var(--ink-2)!important;color:var(--text)!important;border-color:var(--line)!important}
.leaflet-control-attribution{background:rgba(12,20,24,.75)!important;color:var(--faint)!important}
.leaflet-control-attribution a{color:var(--muted)!important}
.leaflet-tooltip{background:var(--ink-2);color:var(--text);border:1px solid var(--line);box-shadow:none}
.leaflet-tooltip::before{border-top-color:var(--line)}
hr{border:0;border-top:1px solid var(--line);margin:26px 0}

/* ---- hero, for the signed-out pages */
.hero{text-align:center;padding:46px 0 12px}
.hero h1{font-size:56px;margin-bottom:14px}
.hero .lede{margin:0 auto 26px;font-size:18.5px}
.hero .rule{width:64px;height:1px;background:var(--line-2);margin:0 auto 30px}

@media (max-width:720px){
  nav{padding:14px 18px;gap:15px}
  nav .brand{flex:1 0 100%;margin-bottom:2px;font-size:22px}
  main{padding:20px 18px}footer{padding:0 18px}
  h1{font-size:33px}.hero h1{font-size:37px}h2{font-size:22px}
  .row>*{flex:1 1 100%}
  .card{padding:18px 17px}
  #map{height:290px}
}