/* ProTec Field App — home page stylesheet (theme tokens)
   ProTec palette: Dark Green #0d1f12 chrome, ProTec Green #16a34a action accent,
   Green #15803d links and rules, Dark Gray #272727 body text. Saira
   Condensed headings, IBM Plex Sans body, IBM Plex Mono numbers. Every selector
   home.js touches is preserved. */

:root {
  --ink: #272727;          /* ProTec Dark Gray — body text */
  --chrome: #0d1f12;       /* ProTec Dark Green — top bar and dark surfaces */
  --chrome-2: #123d1f;
  --chrome-3: #1a5c30;
  --chrome-text: #e6f2ea;
  --chrome-dim: #9dbba8;
  --accent: #16a34a;       /* ProTec Green — accent surfaces carry dark text */
  --accent-dark: #15803d;
  --accent-text: #15803d;  /* ProTec Green — the accent as text on white */
  --accent-soft: #f1f8f3;
  --progress: #1d9b52;
  --rfi: #e8930c;
  --photo: #0b66c3;
  --pin: #e0342b;
  --muted: #595959;        /* ProTec Light Gray */
  --line: #cbdfcf;
  --bg: #F7FAFB;
  --surface: #fff;
  --r: 3px;
  --shadow-1: 0 1px 3px rgba(13, 31, 18, .06);
  --shadow-2: 0 8px 24px rgba(13, 31, 18, .12);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: #0d1f12; }

[data-i]::before {
  content: "";
  width: 16px; height: 16px; flex: none;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
[data-i="logo"] { --i: url(/icons/ui/map-pinned.svg); }
[data-i="plus"] { --i: url(/icons/ui/plus.svg); }
[data-i="drawing"] { --i: url(/icons/ui/ruler.svg); }
[data-i="active"] { --i: url(/icons/ui/hard-hat.svg); }
[data-i="upload"] { --i: url(/icons/ui/file-up.svg); }
[data-i="satellite"] { --i: url(/icons/ui/satellite.svg); }
[data-i="pin"] { --i: url(/icons/ui/map-pin.svg); }
[data-i="sheets"] { --i: url(/icons/ui/files.svg); }
[data-i="photos"] { --i: url(/icons/ui/images.svg); }
[data-i="camera"] { --i: url(/icons/ui/camera.svg); }
[data-i="check"] { --i: url(/icons/ui/check.svg); }
[data-i="arrow-right"] { --i: url(/icons/ui/arrow-right.svg); }
[data-i="folder"] { --i: url(/icons/ui/folder-open.svg); }
[data-i="phone"] { --i: url(/icons/ui/smartphone.svg); }
[data-i="search"] { --i: url(/icons/ui/search.svg); }
[data-i="more"] { --i: url(/icons/ui/ellipsis.svg); }
[data-i="trash"] { --i: url(/icons/ui/trash-2.svg); }

/* ---- top bar: dark chrome, 3px accent rule, name lockup -------------------- */
header.app {
  background: var(--chrome);
  border-top: 3px solid var(--accent);
  color: #fff;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
}
header.app .brand { display: flex; align-items: center; gap: 12px; }
/* the ProTec wordmark is the lockup; no separate accent bar, which would
   read as a second brand mark competing with the logo's own green */
header.app .brand .lk {
  font-family: "Saira Condensed", "IBM Plex Sans", sans-serif;
  font-size: 19px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  display: flex; align-items: center;
}
/* reverse lockup, sized off the 60px bar rather than a fixed width so it
   scales with the header instead of fighting it */
header.app .brand .lk img { display: block; height: 30px; width: auto; }
header.app .brand .div { width: 1px; height: 24px; background: rgba(255, 255, 255, .16); }
header.app h1 {
  font-family: "Saira Condensed", "IBM Plex Sans", sans-serif;
  font-size: 17px; margin: 0; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #A7C6D2;
}
header.app .tag { color: var(--chrome-dim); font-size: 13px; }
header.app .spacer { flex: 1; }
header.app button {
  background: var(--chrome-2); color: var(--chrome-text); border: 0; border-radius: 2px;
  padding: 10px 14px; font-size: 12px; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
header.app button:hover { background: var(--chrome-3); color: #fff; }
header.app button.primary { background: var(--accent); color: #272727; font-weight: 700; }
header.app button.primary:hover { background: var(--accent-dark); color: #272727; }

.wrap { max-width: 1100px; margin: 26px auto 60px; padding: 0 24px; }

/* ---- tabs + search: underline tabs, 2px accent active edge ---------------- */
.tabs {
  display: flex; align-items: center; gap: 4px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted);
  padding: 10px 14px; font-size: 12px; font-family: inherit; letter-spacing: .08em;
  text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center;
  gap: 8px; font-weight: 600; margin-bottom: -1px;
}
.tabs button:hover { color: var(--ink); }
.tabs button.on { border-bottom-color: var(--accent); color: var(--ink); font-weight: 700; }
.tabs button .n {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  background: none; color: var(--muted); border-radius: 0; padding: 0; font-size: 12px; font-weight: 600;
}
.tabs button.on .n { background: none; color: var(--accent-text); }
.tabs .spacer { flex: 1; }
.search { position: relative; display: flex; align-items: center; width: 270px; margin-bottom: 6px; }
.search::before {
  content: ""; position: absolute; left: 11px; width: 15px; height: 15px; background: #9dbba8;
  -webkit-mask: url(/icons/ui/search.svg) center / contain no-repeat;
  mask: url(/icons/ui/search.svg) center / contain no-repeat;
}
.search input {
  width: 100%; border: 1px solid var(--line); border-radius: 2px;
  padding: 10px 13px 10px 34px; font-size: 13.5px; font-family: inherit;
  background: var(--surface); color: var(--ink);
}
.search input:focus { outline: none; box-shadow: 0 0 0 3px rgba(107, 191, 78, .55); border-color: var(--accent); }

/* ---- new project card ---------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--r);
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-1);
}
.card h2 {
  font-family: "Saira Condensed", "IBM Plex Sans", sans-serif;
  font-size: 22px; margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.card .csub { font-size: 13px; color: var(--muted); margin-top: 4px; }

label.field {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em;
  color: var(--muted); margin: 18px 0 7px; text-transform: uppercase;
}
label.field .hint { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 11.5px; }

input[type="text"], textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 15px; /* 16px+ stops iOS Safari zooming on focus; 15 is fine on desktop */
  font-family: inherit;
  color: var(--ink);
}
input[type="text"]:focus, textarea:focus {
  outline: none; box-shadow: 0 0 0 3px rgba(107, 191, 78, .55); border-color: var(--accent);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--accent); color: #272727; border: 0; border-radius: 2px;
  padding: 13px 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; font-family: inherit;
}
.btn:hover { background: var(--accent-dark); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn.danger-text {
  background: none; border: 1px solid #EBC7C4; color: #A8271F; font-weight: 600;
  font-size: 12px; padding: 8px 12px; letter-spacing: .04em;
}
.btn.danger-text:hover { background: #F7E9E7; }

.phase-pick { display: flex; gap: 10px; }
.phase-pick button {
  flex: 1; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 2px; padding: 13px 14px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 11px; text-align: left;
}
.phase-pick button::before { width: 17px; height: 17px; }
.phase-pick button:hover { background: var(--accent-soft); }
.phase-pick button small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); margin-top: 1px; }
.phase-pick button.on { background: var(--chrome); border-color: var(--chrome); color: #fff; }
.phase-pick button.on small { color: var(--chrome-dim); }

/* drop zone */
.drop {
  border: 1px dashed #A9BAC2;
  border-radius: var(--r);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop .big {
  width: 46px; height: 46px; flex: none; border-radius: 2px; background: var(--chrome);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.drop .big::before {
  content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url(/icons/ui/file-up.svg) center / contain no-repeat;
  mask: url(/icons/ui/file-up.svg) center / contain no-repeat;
}
.drop strong { color: var(--ink); font-size: 14.5px; display: block; margin-bottom: 3px; }
.drop .dtext { flex: 1; line-height: 1.45; }
.drop .dbtn {
  flex: none; background: var(--accent); border: 0; color: #272727; border-radius: 2px;
  padding: 11px 16px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-family: inherit; cursor: pointer;
}

.progress { height: 6px; background: #e6f2ea; border-radius: 0; overflow: hidden; margin-top: 14px; display: none; }
.progress > div { height: 100%; width: 0%; background: var(--accent); transition: width .32s cubic-bezier(.2,.6,.2,1); }

#status { font-size: 13px; color: var(--muted); margin-top: 12px; min-height: 18px; }

.or-row { display: flex; align-items: center; gap: 12px; color: #9dbba8; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin: 16px 0; }
.or-row::before, .or-row::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---- project cards ------------------------------------------------------- */
.section-head { display: flex; align-items: center; gap: 12px; margin: 30px 0 14px; }
.section-head b { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.section-head span { font-size: 12.5px; color: var(--muted); }
.section-head .rule { flex: 1; height: 1px; background: var(--line); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

.proj {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
}
.proj:hover { border-color: #A9BAC2; box-shadow: var(--shadow-2); }
.proj .thumb {
  height: 128px; background: #e6f2ea; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.proj .sheetish {
  width: 150px; height: 104px; background: #fff; border: 1px solid #A9BAC2; position: relative;
}
.proj .sheetish::after { content: ""; position: absolute; inset: 6px; border: 1px solid #cbdfcf; }
.proj .dot {
  position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); border: 1.5px solid #fff;
}
.proj .body { padding: 15px 16px; display: flex; flex-direction: column; flex: 1; }
.proj a.title {
  font-family: "Saira Condensed", "IBM Plex Sans", sans-serif;
  color: var(--ink); font-weight: 700; font-size: 18px; line-height: 1.15;
  text-transform: uppercase; letter-spacing: .01em;
}
.proj a.title:hover { color: var(--accent-text); }
.proj .meta {
  display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; margin-top: 10px;
}
.proj .meta span { display: inline-flex; align-items: center; gap: 6px; }
.proj .meta span::before { width: 14px; height: 14px; }
.proj .areas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.proj .areas i {
  font-style: normal; font-size: 11px; font-weight: 600; color: #0d1f12; background: #f1f8f3;
  border: 1px solid #bedcc4; border-radius: 2px; padding: 3px 8px;
}
.proj .foot {
  display: flex; align-items: center; gap: 8px; margin-top: auto;
  padding-top: 13px; border-top: 1px solid #e6f2ea;
}
.proj .foot .grow { flex: 1; }

.badge {
  position: absolute; top: 10px; left: 12px;
  font-size: 10px; border-radius: 2px; padding: 3px 8px;
  background: #2F7A4F; color: #fff; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.badge.site {
  left: auto; right: 12px; background: rgba(13, 31, 18, .88); color: #A7C6D2;
  display: inline-flex; align-items: center; gap: 5px;
}
.badge.site::before {
  content: ""; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url(/icons/ui/satellite.svg) center / contain no-repeat;
  mask: url(/icons/ui/satellite.svg) center / contain no-repeat;
}
.badge.pursuit { background: var(--chrome-2); }

.mover {
  background: #fff; border: 1px solid var(--line); border-radius: 2px; color: var(--ink);
  font-size: 11px; cursor: pointer; padding: 8px 12px; font-family: inherit; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px;
}
.mover:hover { background: var(--accent-soft); border-color: var(--accent); }
.mover::before { width: 14px; height: 14px; }

/* ---- empty state --------------------------------------------------------- */
.empty {
  grid-column: 1 / -1;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 30px 24px; display: flex; flex-direction: column; align-items: center;
  gap: 6px; box-shadow: var(--shadow-1);
}
.empty .ic {
  width: 52px; height: 52px; border-radius: 2px; background: var(--chrome);
  display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 6px;
}
.empty .ic::before {
  content: ""; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: url(/icons/ui/folder-open.svg) center / contain no-repeat;
  mask: url(/icons/ui/folder-open.svg) center / contain no-repeat;
}
.empty b {
  font-family: "Saira Condensed", "IBM Plex Sans", sans-serif;
  font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.empty p { font-size: 13px; color: var(--muted); text-align: center; max-width: 430px; line-height: 1.5; margin: 2px 0 0; }
.steps {
  display: flex; gap: 26px; margin-top: 22px; padding-top: 20px;
  border-top: 1px solid #e6f2ea; width: 100%; justify-content: center; flex-wrap: wrap;
}
.steps div { display: flex; gap: 11px; align-items: flex-start; max-width: 200px; }
.steps em {
  width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--chrome);
  color: var(--accent); font-size: 11.5px; font-weight: 600; font-style: normal;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  display: flex; align-items: center; justify-content: center;
}
.steps p { font-size: 12.5px; color: #1a5c30; line-height: 1.45; margin: 0; text-align: left; }
.steps p b { color: var(--ink); }

/* install prompt */
.install {
  background: var(--chrome); border-top: 3px solid var(--accent); border-radius: var(--r);
  padding: 18px 22px; display: flex; align-items: center; gap: 16px; color: #fff; margin-top: 22px;
}
.install::before {
  content: ""; width: 22px; height: 22px; flex: none; background: var(--accent);
  -webkit-mask: url(/icons/ui/smartphone.svg) center / contain no-repeat;
  mask: url(/icons/ui/smartphone.svg) center / contain no-repeat;
}
.install div { flex: 1; }
.install b { font-size: 14px; }
.install p { font-size: 12.5px; color: #A9BAC2; margin: 3px 0 0; line-height: 1.45; }

@media (max-width: 720px) {
  header.app { padding: 0 14px; gap: 8px; }
  header.app .tag, header.app .brand .div, header.app h1 { display: none; }
  .wrap { padding: 0 14px; }
  .tabs { flex-wrap: wrap; }
  .search { width: 100%; }
  .phase-pick { flex-direction: column; }
  .drop { flex-direction: column; align-items: flex-start; }
}