/* Creekside contractor portal — phone first. Every target >=44px.
   Navy #0f172a, gold #eab308. Nothing contractor-specific in here. */
:root{
  --navy:#0f172a; --navy-2:#1e293b; --navy-3:#334155;
  --gold:#eab308; --gold-dim:#a16207;
  --paper:#f8fafc; --grey:#94a3b8; --grey-d:#64748b;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
  --line:#1e293b; --radius:12px;
  --pad:max(1rem, env(safe-area-inset-left));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--navy);color:var(--paper);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--gold)}
button,input,select,textarea{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2,h3{margin:0;line-height:1.2}
.wrap{max-width:820px;margin:0 auto;padding-inline:var(--pad)}
.hide{display:none !important}
.muted{color:var(--grey)}
.small{font-size:.8125rem}
.center{text-align:center}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(15,23,42,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:.75rem;padding:.7rem 0;max-width:820px;
  margin:0 auto;padding-inline:var(--pad)}
.mark{width:34px;height:34px;border-radius:8px;background:var(--gold);color:var(--navy);
  display:grid;place-items:center;font-weight:800;font-size:.9rem;flex:0 0 auto}
.hdr h1{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.signout{flex:0 0 auto;min-height:36px;padding:.35rem .7rem;border:1px solid var(--navy-3);
  border-radius:8px;background:transparent;color:var(--grey);font-size:.75rem;font-weight:700}
.hdr .by{font-size:.6875rem;color:var(--grey);letter-spacing:.06em;text-transform:uppercase}

/* gate */
.gate{min-height:100dvh;display:grid;place-items:center;padding:2rem var(--pad)}
.gate-card{width:100%;max-width:340px;text-align:center}
.gate h2{font-size:1.35rem;margin-bottom:.4rem}
.gate input{width:100%;margin-top:1.25rem;padding:.9rem 1rem;font-size:1.25rem;text-align:center;
  letter-spacing:.4em;background:var(--navy-2);border:1px solid var(--navy-3);
  border-radius:var(--radius);color:var(--paper)}
.gate .err{color:var(--bad);font-size:.875rem;min-height:1.2rem;margin-top:.6rem}

/* tabs */
.tabs{display:flex;gap:.4rem;overflow-x:auto;padding:.6rem var(--pad);scrollbar-width:none;
  border-bottom:1px solid var(--line);background:var(--navy)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;min-height:40px;padding:.5rem .9rem;border-radius:99px;border:1px solid var(--navy-3);
  background:transparent;color:var(--grey);font-size:.875rem;font-weight:600;white-space:nowrap}
.tab[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy)}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  min-height:52px;padding:.85rem 1.1rem;border:1px solid transparent;border-radius:var(--radius);
  font-weight:700;font-size:1rem;text-decoration:none}
.btn-gold{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn-gold:active{background:#ca9a06}
.btn-out{background:transparent;color:var(--paper);border-color:var(--navy-3)}
.btn-out:active{background:var(--navy-2)}
.btn-sm{min-height:44px;font-size:.875rem;padding:.55rem .8rem;width:auto;flex:1}
.btn-row{display:flex;gap:.5rem;margin-top:.75rem}
.btn:disabled{opacity:.5}

/* sections + cards */
.sec{padding:1.35rem 0 .25rem}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:.15rem}
.sec-h h2{font-size:1.0625rem;font-weight:700}
.sec-note{color:var(--grey);font-size:.875rem;margin:.15rem 0 .9rem}
.card{background:var(--navy-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:.95rem 1rem;margin-bottom:.7rem}
.card-t{font-weight:700;font-size:.95rem}
.card-s{color:var(--grey);font-size:.8125rem;margin-top:.15rem}
.row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.pill{flex:0 0 auto;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:.2rem .5rem;border-radius:99px;border:1px solid currentColor}
.p-ok{color:var(--ok)} .p-bad{color:var(--bad)} .p-warn{color:var(--warn)} .p-grey{color:var(--grey)}
.empty{color:var(--grey-d);font-size:.875rem;padding:1.1rem;text-align:center;
  border:1px dashed var(--navy-3);border-radius:var(--radius)}

/* certs — tap a name to expand */
.acc{width:100%;background:none;border:0;padding:0;text-align:left;color:inherit}
.acc-body{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.55rem}
.cert{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.875rem}
.cert .d{color:var(--grey);font-size:.75rem;margin-top:.1rem}
.cert.soon{color:var(--gold)}
.cert.soon .d{color:var(--gold-dim)}
.chev{transition:transform .18s;color:var(--grey);flex:0 0 auto}
[aria-expanded="true"] .chev{transform:rotate(90deg)}

/* stats */
.stat-tbl{width:100%;border-collapse:collapse;font-size:.875rem;
  font-variant-numeric:tabular-nums;display:block;overflow-x:auto;white-space:nowrap}
.stat-tbl th,.stat-tbl td{padding:.55rem .6rem;text-align:right;border-bottom:1px solid var(--line)}
.stat-tbl th:first-child,.stat-tbl td:first-child{text-align:left;position:sticky;left:0;
  background:var(--navy-2)}
.stat-tbl thead th{color:var(--grey);font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em}
.stat-tbl td.calc{color:var(--gold);font-weight:700}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.5rem}
.f-grid label{display:block;font-size:.75rem;color:var(--grey);margin-bottom:.25rem}
.f-grid .full{grid-column:1/-1}
.f-grid .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--grey-d)}
/* list every type we use — a missing one falls back to a white browser
   default, which is what happened to type=tel */
input[type=text],input[type=number],input[type=tel],input[type=email],
input[type=search],input[type=password],select,textarea{width:100%;min-height:48px;padding:.6rem .7rem;
  background:var(--navy);border:1px solid var(--navy-3);border-radius:10px;color:var(--paper)}
textarea{min-height:80px;resize:vertical}
/* Chrome paints autofilled fields white, which wrecks the dark theme. There is
   no way to set the background directly, so pin it with an inset shadow. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--paper);
  -webkit-box-shadow:0 0 0 1000px var(--navy) inset;
  caret-color:var(--paper);
  transition:background-color 9999s ease-in-out 0s;
}


.doc-cat{margin-bottom:1.1rem}
.doc-cat h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);
  margin-bottom:.5rem}
.file-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(1.25rem + env(safe-area-inset-bottom));
  transform:translateX(-50%);background:var(--navy-2);border:1px solid var(--navy-3);
  color:var(--paper);padding:.7rem 1.1rem;border-radius:99px;font-size:.875rem;z-index:99;
  max-width:calc(100vw - 2rem);text-align:center}

/* Date filter — a real iOS segmented control.
   Deliberately NOT gold: gold means "an action you can take" on this app
   (Start inspection, Share, Apply). A filter is state, so it uses a raised
   thumb on a sunken track, the way iOS does it, and stays quieter than the
   cards it sits above. */
.filter-row{ display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; }
.segbar{
  display:flex; flex:1; gap:0; padding:3px;
  background:rgba(255,255,255,.055); border-radius:10px;
}
.seg{
  flex:1; min-height:36px; padding:.3rem .25rem; border:0; border-radius:7px;
  background:transparent; color:var(--grey);
  font-size:.8125rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  transition:background .15s, color .15s;
}
.seg[aria-pressed="true"]{
  background:var(--navy-3); color:var(--paper);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* custom range: two fields side by side, never wrapping on a phone */
.range{
  display:grid; grid-template-columns:1fr 1fr; gap:.55rem;
  padding:.7rem; margin-bottom:.6rem;
  background:rgba(255,255,255,.04); border-radius:10px;
}
.range-f label{
  display:block; margin-bottom:.25rem;
  font-size:.6875rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey-d);
}
.range input[type=date]{
  width:100%; min-height:40px; padding:.3rem .5rem;
  background:var(--navy); border:1px solid var(--navy-3); border-radius:8px;
  color:var(--paper); font:inherit; font-size:.8125rem;
  -webkit-appearance:none; appearance:none;
}
.range input[type=date]:focus{ border-color:var(--gold); outline:none; }
/* color-scheme:dark makes the browser draw the calendar glyph light AND opens
   the picker sheet dark. Do NOT add filter:invert on top of it - that flips the
   already-light glyph back to black, which is the bug this replaced. */
.range input[type=date]{ color-scheme:dark; }
.range input[type=date]::-webkit-calendar-picker-indicator{
  opacity:.9; cursor:pointer; padding:2px; margin-left:2px;
}
.range input[type=date]::-webkit-calendar-picker-indicator:hover{ opacity:1; }

.range-note{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  font-size:.75rem; color:var(--grey-d); margin:0 0 .8rem;
}
.range-clear{
  flex:0 0 auto; min-height:32px; padding:.2rem .6rem; border:0; border-radius:8px;
  background:transparent; color:var(--gold); font-size:.8125rem; font-weight:700;
}

/* the printable report (used for PDF fallback) */
@media print{
  body{background:#fff;color:#000}
  .hdr,.tabs,.filter-row,.range,.no-print{display:none !important}
  .card{border:1px solid #ccc;background:#fff;color:#000}
}