/* Red Folder ATL — shared look, matching the ATL Site Sign-In app:
   warm off-white page, charcoal primary actions, white cards with a thin
   line and soft shadow, pill-shaped chips and secondary buttons.
   The second half of this file restyles the class names tool.js already
   renders (.section, .grid2, .check, .attRow, .btn…), so the forms pick up
   the new look without any change to the PDF engine. */
* { box-sizing: border-box; }
:root {
  --bg: #f5f4f0;
  --card: #ffffff;
  --panel: #ffffff;
  --red: #ba1f1f;
  --red-dark: #951717;
  --text: #101014;
  --muted: #5e5e66;
  --line: #d9d9de;
  --yellow: #f6d40b;
  --green: #146b38;
  --charcoal: linear-gradient(165deg, #27272c, #18181b);
  --shadow-sm: 0 1px 3px rgba(16, 16, 20, 0.08), 0 1px 2px rgba(16, 16, 20, 0.05);
  --shadow-card: 0 2px 8px rgba(16, 16, 20, 0.1), 0 1px 2px rgba(16, 16, 20, 0.05);
  --radius-card: 20px;
  --radius: 20px;

  /* status colours tool.js reads through var() in showBanner() */
  --okBg: #e4f6ec;  --okBd: #b7e4c9;  --okTx: #146b38;
  --badBg: #fdeaea; --badBd: #f3c3c3; --badTx: #951717;
  --warnBg: #fff6d5; --warnBd: #f0deac; --warnTx: #7a5600;
}

html { background: var(--bg); margin: 0; overflow-x: hidden; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:focus-visible { outline: 3px solid #1a56db; outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.shell-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  animation: fade-in 220ms ease both;
}
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
[hidden] { display: none !important; }

/* ===== Top bar ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 22px;
}
.topbar-end { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { height: 34px; width: auto; display: block; flex-shrink: 0; user-select: none; -webkit-user-drag: none; mix-blend-mode: multiply; }
.brand-logo.tp { height: 38px; }
.brand-name { font-weight: 700; font-size: 0.95rem; white-space: nowrap; }

.page-title {
  margin: 8px 0 4px;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.page-sub { margin: 0 0 18px; color: var(--muted); font-size: 0.98rem; }

.pill-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.pill-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.pill-chip:empty { display: none; }
.site-selector { min-height: 44px; max-width: 60vw; gap: 8px; cursor: pointer; }
.site-selector-label { overflow: hidden; text-overflow: ellipsis; }
.site-selector svg { width: 20px; height: 20px; flex-shrink: 0; }
.site-selector:active { background: #eeedf0; }
@media (hover: hover) { .site-selector:hover { border-color: #92929b; } }

/* ===== Buttons ===== */
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  min-height: 44px;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 100ms ease, background 120ms ease;
}
.pill-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.pill-btn-muted { background: #eceaea; }
@media (hover: hover) { .pill-btn-muted:hover { background: #e2e0e0; } }

.btn-black {
  border: none;
  border-radius: 14px;
  padding: 14px 18px;
  min-height: 50px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--charcoal);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-block { width: 100%; }
button:active:not(:disabled), a.pill-btn:active { transform: scale(0.97); }
button:disabled { background: #e2e2e6 !important; color: #9a9aa2 !important; cursor: not-allowed; box-shadow: none !important; }

/* ===== Site picker ===== */
.site-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
@media (max-width: 480px) { .site-list { grid-template-columns: repeat(2, 1fr); } }
.site-card {
  position: relative;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: var(--radius-card);
  padding: 20px 14px;
  min-height: 130px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  animation: pop-in 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--pop-delay, 0ms);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.site-icon-badge { width: 48px; height: 48px; border-radius: 50%; background: #f0f0f2; display: flex; align-items: center; justify-content: center; }
.site-icon-badge svg { width: 24px; height: 24px; }
.site-check {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--text); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700;
  opacity: 0; transform: scale(0.4);
  transition: opacity 150ms ease, transform 150ms ease;
}
@media (hover: hover) { .site-card:hover { border-color: #c7c7cc; transform: translateY(-2px); box-shadow: var(--shadow-card); } }
.site-card.selected { border-color: var(--text); background: #f6f6f7; box-shadow: var(--shadow-card); }
.site-card.selected .site-icon-badge { background: var(--text); color: #fff; }
.site-card.selected .site-check { opacity: 1; transform: scale(1); }
#btn-site-continue { margin-top: 18px; }
.view-site { justify-content: center; }

/* ===== Home ===== */
.intro h1 { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.intro-clock { margin: 6px 0 10px; display: flex; align-items: baseline; gap: 8px; font-size: 17px; }
.clock-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.clock-date { color: #6e6e73; }

.check-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
@media (max-width: 760px) { .check-choices { grid-template-columns: 1fr; gap: 12px; } }
.action-card {
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: 28px;
  padding: 20px 24px;
  min-height: 170px;
  background: #fff;
  color: #1c1c1e;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 14px 36px rgba(0, 0, 0, 0.06);
  transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 150ms ease;
}
.action-card.primary {
  background: var(--charcoal);
  border-color: #18181b;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 14px 36px rgba(0, 0, 0, 0.18);
}
.action-card-icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: rgba(28, 28, 30, 0.06);
  border-top: 5px solid var(--red);
  display: flex; align-items: center; justify-content: center;
}
.action-card.primary .action-card-icon { background: rgba(255, 255, 255, 0.12); }
.cal-num { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.action-card-text { display: flex; flex-direction: column; gap: 4px; }
.action-card-title { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.action-card-desc { font-size: 15px; font-weight: 500; color: #6e6e73; }
.action-card.primary .action-card-desc { color: rgba(255, 255, 255, 0.62); }
.action-card-arrow { position: absolute; top: 22px; right: 22px; width: 22px; height: 22px; opacity: 0.55; }
.action-card:active { transform: scale(0.98); }
@media (hover: hover) {
  .action-card:hover { transform: translateY(-2px); }
  .action-card:not(.primary):hover { border-color: #c7c7cc; }
}
@media (max-width: 760px) {
  .action-card { min-height: 0; flex-direction: row; align-items: center; padding: 18px 20px; }
  .action-card-title { font-size: 22px; }
  .action-card-arrow { position: static; margin-left: auto; }
}

/* ===== Forms list ===== */
.list-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.list-item:last-child { border-bottom: none; }
.list-item:active { background: #f6f6f7; }
@media (hover: hover) { .list-item:hover { background: #fafafa; } }
.list-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: #f0f0f2; color: var(--muted);
  font-size: 0.85rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.list-item.ready .list-num { background: var(--text); color: #fff; }
.list-tag {
  margin-left: auto;
  font-size: 0.75rem; font-weight: 600;
  color: var(--muted); background: #f0f0f2;
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.list-item.ready .list-tag { background: #e4f6ec; color: var(--green); }
.list-chevron { width: 18px; height: 18px; color: #9a9aa2; flex-shrink: 0; }

.empty-card {
  background: #fff;
  border: 1px dashed #c7c7cc;
  border-radius: var(--radius-card);
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
}
.empty-card strong { display: block; color: var(--text); font-size: 1.05rem; margin-bottom: 6px; }

/* =====================================================================
   Form pages (tool.html). Everything below targets markup produced by
   tool.js — keep the class names in sync with it.
   ===================================================================== */
#app.card { background: transparent; border: 0; padding: 0; }

.head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.head h1 { margin: 0; font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 600; letter-spacing: -0.01em; }
.sub { margin: 6px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.4; }

.pillRow { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid transparent;
  background: #f0f0f2; color: var(--muted);
  font-weight: 700; font-size: 0.78rem; white-space: nowrap;
}
.pill.ok { background: var(--okBg); color: var(--okTx); }
.pill.bad { background: var(--badBg); color: var(--badTx); }
.pill.warn { background: var(--warnBg); color: var(--warnTx); }

.banner {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--warnBd);
  background: var(--warnBg);
  color: var(--warnTx);
  font-weight: 600;
  font-size: 0.92rem;
  display: none;
}

.section {
  margin-top: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.sectionTitle {
  margin: 0 0 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

#app label { display: block; font-size: 0.92rem; font-weight: 600; color: var(--text); margin: 0 0 6px; }
#app input, #app select, #app textarea, .modal input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
}
#app input::placeholder, #app textarea::placeholder { color: #a5a5ac; }
#app input:focus, #app select:focus, #app textarea:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(16, 16, 20, 0.08);
}
#app textarea { min-height: 110px; resize: vertical; }

.grid1 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid3auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }

#app .check {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
#app .check:has(input:checked) { border-color: var(--text); background: #f6f6f7; }
#app .check input, #app input[type='checkbox'], #app input[type='radio'] {
  width: 24px; height: 24px; min-height: 0; padding: 0; margin: 0;
  flex-shrink: 0; accent-color: var(--red); cursor: pointer;
}

.attTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.attRow {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fcfcfb;
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr auto;
  grid-template-areas: "name date sig remove";
  gap: 12px;
  align-items: end;
}
.attName { grid-area: name; }
.attDate { grid-area: date; }
.attSig { grid-area: sig; }
.attRemove { grid-area: remove; }

.sigPreview {
  height: 56px;
  border: 1.5px dashed #c7c7cc;
  border-radius: 12px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.sigPreview img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sigPreview span { color: var(--muted); font-weight: 600; font-size: 0.85rem; }

/* tool.js buttons: .btn = charcoal primary, .btnYellow = main call to
   action (kept ATL yellow), .btnGhost = white secondary, .btnDanger = remove */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #18181b;
  border-radius: 999px;
  background: var(--charcoal);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--shadow-sm);
  transition: transform 100ms ease, border-color 120ms ease;
}
.btnYellow { background: var(--yellow); border-color: #d9b800; color: #111; }
.btnGhost { background: #fff; color: var(--text); border: 1.5px solid var(--line); box-shadow: none; }
.btnDanger { background: #fff; color: var(--red-dark); border: 1.5px solid #efc9c9; box-shadow: none; }
@media (hover: hover) {
  .btnGhost:hover { border-color: #c7c7cc; }
  .btnDanger:hover { border-color: #e2a6a6; }
}
.btnRow { display: flex; gap: 8px; flex-wrap: wrap; }

.stickyBar {
  position: sticky;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  margin-top: 16px;
  z-index: 5;
}
.actionBar {
  display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 10px 10px 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}
.note { margin-top: 10px; color: var(--muted); font-size: 0.85rem; line-height: 1.4; }

.pdfWrap { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.pdfFrame { width: 100%; height: 78vh; border: 0; display: block; background: #fff; }

/* Signature modal */
.modalOverlay {
  position: fixed; inset: 0;
  background: rgba(16, 16, 20, 0.45);
  display: none; align-items: center; justify-content: center;
  padding: 14px; z-index: 50;
}
.modal {
  width: min(760px, 100%);
  background: #fff;
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.modalHead { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.modalHead strong { font-size: 1rem; }
.modalBody { padding: 14px 16px; }
.sigCanvasWrap { border: 1.5px dashed #c7c7cc; border-radius: 16px; overflow: hidden; background: #fff; touch-action: none; }
.sigCanvasWrap canvas { width: 100%; height: 260px; display: block; background: #fff; }
.modalFoot { padding: 12px 16px 16px; border-top: 1px solid var(--line); display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.modalHelp { color: var(--muted); font-weight: 600; font-size: 0.85rem; }

@media (max-width: 900px) {
  .grid2 { grid-template-columns: 1fr; }
  .attRow { grid-template-columns: 1fr; grid-template-areas: "name" "date" "sig" "remove"; }
  .sigCanvasWrap canvas { height: 220px; }
  .pillRow { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .head { flex-direction: column; }
  .brand-logo.tp { height: 32px; }
}

/* Install prompt */
.install-banner {
  position: fixed; left: 16px; right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 18px;
  background: var(--text); color: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(16, 16, 20, 0.25);
  font-weight: 600; font-size: 0.92rem;
}
.install-banner span { flex: 1; }
.install-banner button { border: 0; border-radius: 999px; padding: 10px 16px; min-height: 40px; font: inherit; font-weight: 700; cursor: pointer; }
.install-banner .install-yes { background: #fff; color: var(--text); }
.install-banner .install-no { background: transparent; color: rgba(255, 255, 255, 0.75); }