/* ── Agent IV theme ───────────────────────────────────────────────────────
   Palette taken from the Caras Group office: charcoal ink Austin skyline on
   warm plaster, walnut and brass. Light is the default; dark switches on the
   device setting. `[data-theme]` beats the media query by specificity, so a
   manual override can win in either direction later.

   Agent branding (logo + colors from the Branding page) applies to the
   generated PDFs, which are rendered server-side. It has never driven the app
   chrome — the old --brand-* vars were referenced but never set, so every
   page always used the literal fallback. The chrome is Agent IV's own.
   ------------------------------------------------------------------------ */
:root {
  --ground:       #EDE7DA;
  --ink:          #2A2522;
  --muted:        #6E6558;
  --faint:        #635B4E;
  --panel:        #FBF9F4;
    --panel-glass:  rgba(251, 249, 244, .86);
    --panel-edge:   #C7BA9C;
  --panel-line:   #DED5C2;
  --panel-shadow: 0 1px 2px rgba(42,37,34,.07), 0 14px 38px rgba(42,37,34,.13);
  --field:        #FFFFFF;
  --field-line:   #D8D0BE;
  --soft:         #F2EDE2;
  --soft-line:    #E2DBCA;
  --accent:       #82632B;
  --on-accent:    #FBF9F4;
  --btn-bg:       #2A2522;
  --btn-bg-hover: #3D3733;
  --btn-fg:       #FBF9F4;
    --danger:       #C0392B;
  --success:      #2E7D32;
--warn:         #A8730C;
  --pill:         #E0D8C6;
  --pill-fg:      #2A2522;
  --overlay:      rgba(42,37,34,.62);
  --sky:          url("/skyline-light.svg");
    --base: linear-gradient(to bottom,
                          rgba(155,150,141,0) var(--floor),
                          #9B968D calc(var(--floor) + 150px), #9B968D 100%);
  --footfade: linear-gradient(to bottom,
                          rgba(237,231,218,0) calc(var(--floor) + 190px),
                          #EDE7DA calc(var(--floor) + 420px), #EDE7DA 100%);
  --veil: linear-gradient(180deg, #EDE7DA 0,
                          rgba(237,231,218,.70) calc(var(--band) * .34),
                          rgba(237,231,218,.60) calc(var(--band) * .72),
                          rgba(237,231,218,.60) 100%);
  --grain:        url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMjQwIj48ZmlsdGVyIGlkPSJwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iNCIgc2VlZD0iNCIvPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMjQwIiBoZWlnaHQ9IjI0MCIgZmlsdGVyPSJ1cmwoI3ApIiBvcGFjaXR5PSIuMDU1Ii8+PC9zdmc+");
  --grain-blend:  multiply;
  --band:         min(96vh, 760px);
  --sky-h:        calc(var(--band) * 3200 / 620);
  --floor:        700px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;

  /* Aliases still referenced by a few inline page styles. */
  --gold: var(--accent);
  --grey: var(--muted);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:       #131110;
    --ink:          #F2EDE2;
    --muted:        #AFA598;
    --faint:        #9A9086;
    --panel:        #262220;
      --panel-glass:  rgba(45, 41, 38, .92);
    --panel-edge:   #7A7165;
  --panel-line:   #3A3430;
    --panel-shadow: 0 1px 2px rgba(0,0,0,.40), 0 16px 40px rgba(0,0,0,.66);
    --field:        #1F1C1A;
    --field-line:   #453E39;
    --soft:         #221F1D;
    --soft-line:    #3A3430;
    --accent:       #C9A24B;
    --on-accent:    #131110;
    --btn-bg:       #C9A24B;
    --btn-bg-hover: #D9B463;
    --btn-fg:       #131110;
      --danger:       #E06C5F;
  --success:      #6FBF7A;
--warn:         #F0B429;
  --pill:         rgba(237,231,218,.10);
    --pill-fg:      #F2EDE2;
    --overlay:      rgba(10,9,8,.78);
    --sky:          url("/skyline-dark.svg");
      --base: linear-gradient(to bottom,
                          rgba(84,81,77,0) var(--floor),
                          #54514D calc(var(--floor) + 150px), #54514D 100%);
  --footfade: linear-gradient(to bottom,
                          rgba(19,17,16,0) calc(var(--floor) + 190px),
                          #131110 calc(var(--floor) + 420px), #131110 100%);
  --veil: linear-gradient(180deg, rgba(19,17,16,.95) 0,
                          rgba(19,17,16,.72) calc(var(--band) * .34),
                          rgba(19,17,16,.60) calc(var(--band) * .72),
                          rgba(19,17,16,.60) 100%);
    --grain:        url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMjQwIj48ZmlsdGVyIGlkPSJwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iNCIgc2VlZD0iOSIvPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMjQwIiBoZWlnaHQ9IjI0MCIgZmlsdGVyPSJ1cmwoI3ApIiBvcGFjaXR5PSIuMDciLz48L3N2Zz4=");
    --grain-blend:  overlay;
  }
}

:root[data-theme="light"] {
  --ground:       #EDE7DA;
  --ink:          #2A2522;
  --muted:        #6E6558;
  --faint:        #635B4E;
  --panel:        #FBF9F4;
    --panel-glass:  rgba(251, 249, 244, .86);
    --panel-edge:   #C7BA9C;
  --panel-line:   #DED5C2;
  --panel-shadow: 0 1px 2px rgba(42,37,34,.07), 0 14px 38px rgba(42,37,34,.13);
  --field:        #FFFFFF;
  --field-line:   #D8D0BE;
  --soft:         #F2EDE2;
  --soft-line:    #E2DBCA;
  --accent:       #82632B;
  --on-accent:    #FBF9F4;
  --btn-bg:       #2A2522;
  --btn-bg-hover: #3D3733;
  --btn-fg:       #FBF9F4;
    --danger:       #C0392B;
  --success:      #2E7D32;
--warn:         #A8730C;
  --pill:         #E0D8C6;
  --pill-fg:      #2A2522;
  --overlay:      rgba(42,37,34,.62);
  --sky:          url("/skyline-light.svg");
    --base: linear-gradient(to bottom,
                          rgba(155,150,141,0) var(--floor),
                          #9B968D calc(var(--floor) + 150px), #9B968D 100%);
  --footfade: linear-gradient(to bottom,
                          rgba(237,231,218,0) calc(var(--floor) + 190px),
                          #EDE7DA calc(var(--floor) + 420px), #EDE7DA 100%);
  --veil: linear-gradient(180deg, #EDE7DA 0,
                          rgba(237,231,218,.70) calc(var(--band) * .34),
                          rgba(237,231,218,.60) calc(var(--band) * .72),
                          rgba(237,231,218,.60) 100%);
  --grain:        url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMjQwIj48ZmlsdGVyIGlkPSJwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iNCIgc2VlZD0iNCIvPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMjQwIiBoZWlnaHQ9IjI0MCIgZmlsdGVyPSJ1cmwoI3ApIiBvcGFjaXR5PSIuMDU1Ii8+PC9zdmc+");
  --grain-blend:  multiply;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;

  /* Aliases still referenced by a few inline page styles. */
  --gold: var(--accent);
  --grey: var(--muted);
}

:root[data-theme="dark"] {
  --ground:       #131110;
  --ink:          #F2EDE2;
  --muted:        #AFA598;
  --faint:        #9A9086;
  --panel:        #262220;
    --panel-glass:  rgba(45, 41, 38, .92);
    --panel-edge:   #7A7165;
  --panel-line:   #3A3430;
  --panel-shadow: 0 1px 2px rgba(0,0,0,.40), 0 16px 40px rgba(0,0,0,.66);
  --field:        #1F1C1A;
  --field-line:   #453E39;
  --soft:         #221F1D;
  --soft-line:    #3A3430;
  --accent:       #C9A24B;
  --on-accent:    #131110;
  --btn-bg:       #C9A24B;
  --btn-bg-hover: #D9B463;
  --btn-fg:       #131110;
    --danger:       #E06C5F;
  --success:      #6FBF7A;
--warn:         #F0B429;
  --pill:         rgba(237,231,218,.10);
  --pill-fg:      #F2EDE2;
  --overlay:      rgba(10,9,8,.78);
  --sky:          url("/skyline-dark.svg");
    --base: linear-gradient(to bottom,
                          rgba(84,81,77,0) var(--floor),
                          #54514D calc(var(--floor) + 150px), #54514D 100%);
  --footfade: linear-gradient(to bottom,
                          rgba(19,17,16,0) calc(var(--floor) + 190px),
                          #131110 calc(var(--floor) + 420px), #131110 100%);
  --veil: linear-gradient(180deg, rgba(19,17,16,.95) 0,
                          rgba(19,17,16,.72) calc(var(--band) * .34),
                          rgba(19,17,16,.60) calc(var(--band) * .72),
                          rgba(19,17,16,.60) 100%);
  --grain:        url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMjQwIj48ZmlsdGVyIGlkPSJwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iNCIgc2VlZD0iOSIvPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMjQwIiBoZWlnaHQ9IjI0MCIgZmlsdGVyPSJ1cmwoI3ApIiBvcGFjaXR5PSIuMDciLz48L3N2Zz4=");
  --grain-blend:  overlay;
}


*, *::before, *::after { box-sizing: border-box; }

/* Platform wordmark shown on every page (agent brand stays the headline). */
.powered {
  text-align: center;
  color: var(--faint);
  font-size: 0.78rem;
  letter-spacing: 0.3px;
  margin: 1.4rem 0 0.5rem;
}
.powered b { color: var(--accent); font-weight: 700; }

/* The `hidden` attribute must win over element display rules below. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  padding: 1.5rem;

  /* Three layers, top to bottom: plaster grain, the fade that lifts content
     off the art, then the skyline itself. The skyline is a band anchored to
     the top of the document — sized to the full page it would sit below the
     fold. Each building runs to the bottom of its artboard and the veil fades
     it out, so there is no hard edge where the band ends. */
  background-color: var(--ground);
  background-image: var(--grain), var(--footfade), var(--veil),
                    var(--base), var(--sky);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 240px 240px, 100% 100%, 100% var(--sky-h),
                   100% 100%, auto var(--sky-h);
  background-position: top left, top center, top center,
                       top center, top center;
  background-blend-mode: var(--grain-blend), normal, normal, normal, normal;
}

/* Flex items default to min-width:auto, so they refuse to shrink below their
   content. Every page but the landing one lays its body out as flex, which
   meant a single wide child — a seven-column table, a long unbroken string —
   stretched past the viewport and scrolled the WHOLE page sideways instead of
   overflowing inside itself. Letting body's children shrink confines the
   overflow to the element that actually has it. */
body > * { min-width: 0; }

.card {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 3px;
  box-shadow: var(--panel-shadow);
  padding: 2.5rem;
  width: 100%;
  max-width: 480px;
  text-align: center;
  border-top: 3px solid var(--accent);
}

h1 {
  margin: 0 0 0.35rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.9rem;
  letter-spacing: 0.3px;
}

.tagline {
  color: var(--muted);
  margin: 0 0 1.75rem;
  font-size: 0.95rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

input, select {
  padding: 0.85rem 1rem;
  font-size: 1rem;
  border: 1.5px solid var(--field-line);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s;
  background: var(--field);
  color: var(--ink);
}

input:focus, select:focus { border-color: var(--accent); }

/* Native controls (date pickers, dropdown arrows, checkboxes) render with the
   OS light palette unless the form is told which scheme it is painted on. */
input, select, textarea { color-scheme: inherit; }

/* File inputs have a wide intrinsic minimum (button + filename text) and, as
   flex children, refuse to shrink — which overflows the card on phones.
   min-width:0 lets them shrink to the container. */
input[type="file"] { width: 100%; min-width: 0; max-width: 100%; }

button {
  padding: 0.85rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

button:hover:not(:disabled) { background: var(--btn-bg-hover); }
button:disabled { opacity: 0.6; cursor: not-allowed; }

.status {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--muted);
  min-height: 1.2em;
}

.status.error { color: var(--danger); }

.download {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
}

.download:hover { filter: brightness(1.05); }

/* ---- Auth: dev capture modal + header account widget -------------------- */
.cs-auth-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--overlay);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.cs-auth-card {
  background: var(--panel); border-radius: 3px; width: 100%; max-width: 380px;
  padding: 1.8rem 1.7rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  border-top: 3px solid var(--accent); text-align: left;
}
.cs-auth-card h3 { margin: 0 0 0.3rem; color: var(--ink); font-size: 1.3rem;
  font-family: var(--serif); font-weight: 400; }
.cs-auth-card p { margin: 0 0 1.1rem; color: var(--muted); font-size: 0.9rem; }
.cs-auth-card label {
  display: block; font-size: 0.78rem; font-weight: 600;
  color: var(--ink); margin: 0.6rem 0 0.25rem;
}
.cs-auth-card input {
  width: 100%; padding: 0.7rem 0.8rem; font-size: 1rem;
  border: 1.5px solid var(--field-line); border-radius: 6px;
}
.cs-auth-card input:focus { border-color: var(--accent); outline: none; }
.cs-auth-card #cs-go {
  width: 100%; margin-top: 1.1rem; padding: 0.8rem; font-size: 1rem;
  font-weight: 700; color: var(--btn-fg); background: var(--btn-bg);
  border: none; border-radius: 6px; cursor: pointer;
}
.cs-auth-card #cs-go:hover { background: var(--btn-bg-hover); }
.cs-auth-card .cs-link {
  display: block; width: 100%; margin-top: 0.5rem; background: none;
  border: none; color: var(--muted); font-size: 0.85rem; cursor: pointer;
}
.cs-auth-err { color: var(--danger); font-size: 0.82rem; margin-top: 0.5rem; }

.cs-account {
  position: absolute; top: 1.25rem; left: 1.5rem;
  font-size: 0.85rem; color: var(--faint);
}
.cs-account .cs-email { color: var(--ink); font-weight: 600; }
.cs-account a { color: var(--faint); text-decoration: none; font-weight: 600; }
.cs-account a:hover { color: var(--ink); }

/* ---- E&O review gate (AI reports: check before download) ---------------- */
.review-gate {
  display: flex; gap: 0.55rem; align-items: flex-start;
  margin: 1.1rem 0 0.35rem; padding: 0.75rem 0.9rem; border-radius: 6px;
  background: var(--soft); border: 1px solid var(--soft-line); font-size: 0.85rem;
  line-height: 1.4; color: var(--ink); text-align: left; cursor: pointer;
}
.review-gate input { margin-top: 0.15rem; flex-shrink: 0; cursor: pointer; }

/* ---- In-browser PDF preview -------------------------------------------- */
.preview-box { margin: 1.1rem 0 0.25rem; text-align: left; }
.preview-head { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.8rem; font-weight: 700; color: var(--ink); margin-bottom: 0.35rem; }
.preview-head a { font-weight: 600; color: var(--accent); text-decoration: none;
  font-size: 0.78rem; }
.preview-head a:hover { text-decoration: underline; }
/* The PDF itself is always a white page — keep its frame white in both themes
   so a dark surround doesn't read as part of the document. */
.preview-frame { width: 100%; height: 460px; border: 1px solid var(--field-line);
  border-radius: 6px; background: #fff; }

/* ---- Full-screen modal preview (My Reports) ---------------------------- */
.preview-modal { position: fixed; inset: 0; z-index: 1000;
  background: var(--overlay); display: flex; align-items: center;
  justify-content: center; padding: 1rem; }
/* Grid, not flex: Safari won't stretch an <iframe> flex child, so `flex: 1`
   collapses it to its intrinsic ~150px and the PDF shows as a sliver. A grid
   row of `1fr` sizes it correctly everywhere. */
.preview-modal-card { background: var(--panel); border-radius: 6px; width: 100%;
  max-width: 1100px; height: 94vh; display: grid; grid-template-rows: auto 1fr;
  overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.preview-modal-head { display: flex; justify-content: space-between;
  align-items: center; padding: 0.7rem 1rem; border-bottom: 1px solid var(--soft-line);
  font-weight: 700; color: var(--ink); font-size: 0.95rem; gap: 1rem; }
.preview-modal-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.preview-modal-head a { color: var(--accent); text-decoration: none;
  font-weight: 600; font-size: 0.82rem; }
.preview-modal-head button { background: none; border: none; font-size: 1.2rem;
  line-height: 1; cursor: pointer; color: var(--muted); padding: 0.2rem; }
.preview-modal-head button:hover { color: var(--ink); }
.preview-modal-frame { display: block; width: 100%; height: 100%;
  min-height: 0; border: none; background: #fff; }

/* A table that cannot fit a phone scrolls inside itself rather than widening
   the whole page. display:block keeps the cells' table roles (the browser
   generates an anonymous table box) so the columns still line up. A page that
   wants a nicer treatment opts out with .stack — admin.html turns its Teams
   table into labelled blocks that way. */
@media (max-width: 640px) {
  table:not(.stack) {
    display: block; width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* On phones in portrait, side-by-side form columns don't fit — stack them.
   Landscape phones / tablets (>640px) keep the two-column layout. */
@media (max-width: 640px) {
  /* The body centers a single card on desktop; on phones, stack its children
     (card + "Powered by" footer) top-to-bottom so nothing gets squeezed. */
  body { flex-direction: column; justify-content: flex-start; }
  /* The signed-in avatar is bigger than the old "Sign in" link — pinning it
     over the corner crowds page headings on a narrow screen. Let it flow. */
  .cs-account { position: static; order: -1; align-self: flex-start;
    padding: 0 0 0.75rem; }
  /* Same reasoning as the landing nav: the account link is a 16px text box,
     which is too small to hit accurately on a phone. */
  .cs-account a { display: inline-flex; align-items: center; min-height: 44px; }
  .row2, .previews { flex-direction: column; gap: 0.75rem; }
  .preview-modal-card { max-width: 100%; height: 100vh; border-radius: 0; }
}