/* ===== Base ===== */
* { box-sizing: border-box; }
html, body {
  margin:0; padding:0; height:100%;
  background:#f7f7f7; color:#222;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
img { max-width:100%; height:auto; display:block; }
.container { max-width:1100px; margin:0 auto; padding:16px; }
.tool {
  background:#fff; border:1px solid #ddd; border-radius:8px;
  padding:16px; box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.sr-only,.visually-hidden{
  position:absolute!important; height:1px;width:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* ===== GLOBAL HEADER ===== */
.app-header{
  display:grid;
  grid-template-areas:"burger titles spacer";
  grid-template-columns:48px 1fr 48px;
  align-items:center; gap:8px;
  min-height:58px;
  padding:calc(env(safe-area-inset-top,0px)+12px) 12px 12px;
  background:#222; color:#fff;
  position:sticky; top:0; z-index:1100;
  border-bottom:1px solid rgba(255,255,255,.10);
}

/* Titles — bigger, with Field Tools slightly larger */
.titles{ grid-area:titles; text-align:center; line-height:1.15; }
.site-title{
  font-weight:900; letter-spacing:.2px;
  font-size: clamp(22px, 3.2vw, 26px);
}
.page-title{
  font-weight:700; opacity:.95; margin-top:4px;
  font-size: clamp(16px, 2.4vw, 20px);
}

/* Hamburger (pure CSS bars) — force white so nothing overrides it */
.menu-toggle{
  grid-area:burger; width:40px; min-width:40px; height:40px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; cursor:pointer;
  color:#fff !important; background:transparent !important; border:0 !important;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
  outline:0;
}
.menu-toggle .bar{
  display:block; width:24px; height:3px;
  background:#fff !important; /* hard-force white bars */
  border-radius:2px;
}

/* ===== Slide-out menu ===== */
.drawer-scrim[hidden], .drawer[hidden]{ display:none; }

.drawer-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:1099;
}
.drawer{
  position:fixed; top:0; left:0; height:100vh; width:min(86vw,300px);
  background:#111; color:#fff; transform:translateX(-100%);
  transition:transform .22s ease; z-index:1101;
  padding:calc(env(safe-area-inset-top,0px)+12px) 12px 12px;
  box-shadow:2px 0 12px rgba(0,0,0,.35);
}
.drawer h3{ margin:0 0 10px; font-size:16px; font-weight:700; }
.drawer ul{ list-style:none; margin:0; padding:0; }
.drawer a{
  display:block; color:#fff; text-decoration:none; padding:10px 8px; border-radius:6px;
}
.drawer a:hover{ background:#1b1b1b; }

body.nav-open .drawer{ transform:translateX(0); }
body.nav-open .drawer-scrim{ opacity:1; pointer-events:auto; }

/* ===== Tools grid (tools.html) ===== */
.tools-grid{ display:grid; gap:12px; margin-top:12px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .tools-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .tools-grid{ grid-template-columns:1fr; } }
.tool-card{
  display:block; padding:16px; border:1px solid #ddd; border-radius:8px; background:#fff;
  color:#111; text-decoration:none; font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.tool-card:hover{ background:#f3f3f3; }

/* ===== Shared forms/tables ===== */
.row{ display:grid; gap:12px; }
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .cols-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .cols-3{ grid-template-columns:1fr; } }
.field span:first-child{ display:block; font-size:14px; margin-bottom:4px; }
.field input,.field select,.form-group input,.form-group select, label>select,label>input{
  width:100%; padding:8px 10px; border:1px solid #bbb; border-radius:6px; background:#fff; font-size:14px;
}
.table-container{ overflow:auto; border:1px solid #e3e3e3; border-radius:8px; margin-top:12px; }
#resultsTable,#resultTable{ width:100%; border-collapse:collapse; }
#resultsTable thead th,#resultTable thead th{
  text-align:left; background:#f0f0f0; border-bottom:1px solid #ddd; padding:10px; font-weight:600;
}
#resultsTable td,#resultTable td{ padding:10px; border-bottom:1px solid #eee; }
#resultsTable tbody tr:nth-child(even),#resultTable tbody tr:nth-child(even){ background:#fafafa; }

.hidden{ display:none!important; }
.muted{ color:#666; font-size:13px; }
.toolbar{ display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; }
.toolbar button{ border:1px solid #bbb; background:#fff; padding:8px 12px; border-radius:6px; cursor:pointer; }
.toolbar button:hover{ background:#f3f3f3; }