/* Free Cooling Tool — styles. Brand tokens from AKCP design-system.md. */

:root {
  /* surfaces & ink (light) */
  --bg:#fafafa; --surface:#ffffff; --surface2:#f5f5f7;
  --ink:#1f2430; --ink2:#5b6472; --line:#e3e6eb;
  /* AKCP blue (primary accent) */
  --blue:#3d83e4; --blue-deep:#2563eb; --blue-soft:rgba(61,131,228,.10);
  /* status / heatmap palette */
  --good:#1AB394; --good-soft:rgba(26,179,148,.10);
  --warn:#F59C1A; --warn-soft:rgba(245,156,26,.12);
  --heat:linear-gradient(90deg,var(--blue) 0%,var(--good) 55%,var(--warn) 100%);
  --maxw:960px; --radius:10px; --gap:1.25rem;
  --font:"Geist","Geist Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}

.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: .85rem 1.25rem; background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.wordmark { font-weight: 700; letter-spacing: -0.01em; font-size: 1.15rem; }
.disclosure { color: var(--ink2); font-size: .8125rem; font-weight: 500; }
.heatbar { height: 3px; background: var(--heat); }

#app {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 800px){ #app { grid-template-columns: 1fr; } }

/* left column: input panel + CTA boxes stacked */
.side { display: flex; flex-direction: column; gap: var(--gap); }
.cta {
  display: block; background: var(--blue); color: #fff;
  border-radius: var(--radius); padding: .85rem 1rem;
  font-size: .9rem; line-height: 1.4; text-decoration: none;
  transition: background .12s;
}
.cta:hover { background: var(--blue-deep); }
.cta-contact { display: inline-block; margin-top: .3rem; font-weight: 700; text-decoration: underline; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
}
.field + .field { margin-top: 1.25rem; }
.kicker {
  display: block; text-transform: uppercase; letter-spacing: .04em;
  font-size: .8125rem; font-weight: 500; color: var(--ink2);
  margin-bottom: .5rem;
}

#map { height: 220px; border-radius: 8px; border: 1px solid var(--line); }

/* expand-map control + enlarged overlay */
.map-expand {
  width: 100%; margin-top: .4rem; padding: .35rem;
  background: var(--surface2); color: var(--ink2);
  border: 1px solid var(--line); border-radius: 6px;
  font-size: .8rem; font-weight: 500;
}
.map-expand:hover { color: var(--blue); border-color: var(--blue); background: var(--surface2); }
.map-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; }
#map.expanded {
  /* !important so this overrides Leaflet's own container styles (it can leave
     `position` set on the element, which would keep the enlarged map in normal
     flow and balloon it off the bottom/right). Explicit size with symmetric
     margins so it fits the viewport with room for the shadow. */
  position: fixed !important; top: 6vh !important; left: 5vw !important;
  right: auto !important; bottom: auto !important;
  width: 90vw !important; height: 88vh !important;
  z-index: 1001; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.map-close {
  position: fixed; top: calc(6vh + 8px); right: calc(5vw + 8px); z-index: 1002;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0,0,0,.25); font-size: 1rem; line-height: 1;
}
.map-close:hover { color: var(--blue); border-color: var(--blue); background: var(--surface); }

.coords {
  display: flex; align-items: end; gap: .5rem; margin-top: .6rem; flex-wrap: wrap;
}
.coords label { font-size: .8125rem; color: var(--ink2); display: grid; gap: .2rem; }
.coords input {
  width: 6.5rem; padding: .4rem .5rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface2); color: var(--ink);
}
button {
  padding: .45rem .9rem; font: inherit; font-weight: 600;
  color: #fff; background: var(--blue); border: none; border-radius: 6px;
  cursor: pointer;
}
button:hover { background: var(--blue-deep); }

/* Generate: full-width action at the bottom of the input panel. */
.generate-btn { width: 100%; margin-top: 1.5rem; padding: .65rem; font-size: .95rem; }

/* info (i) icon + hover help box */
.info {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: .3rem;
  border: 1px solid var(--ink2); border-radius: 50%;
  color: var(--ink2); font-size: 9px; font-weight: 700; font-style: normal;
  text-transform: none; letter-spacing: 0; line-height: 1; cursor: help; user-select: none;
}
.info:hover, .info:focus { border-color: var(--blue); color: var(--blue); outline: none; }
.help-box {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 60;
  width: 220px; padding: .55rem .65rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
  font-size: .75rem; font-weight: 400; font-style: normal;
  text-transform: none; letter-spacing: normal; line-height: 1.45; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none;
}
.info:hover .help-box, .info:focus .help-box { opacity: 1; visibility: visible; }

/* Share / Help links under Generate */
.actions { margin-top: .55rem; text-align: center; font-size: .8rem; }
.action-link {
  color: var(--ink2); text-decoration: none;
  border-bottom: 1px dotted var(--ink2); padding-bottom: 1px; transition: color .12s, border-color .12s;
}
.action-link:hover { color: var(--blue); border-bottom-color: var(--blue); }
.action-sep { color: var(--line); margin: 0 .5rem; }

.params { display: grid; gap: .55rem; }
.params label {
  display: grid; grid-template-columns: 1fr 6rem; align-items: center;
  gap: .5rem; font-size: .85rem; color: var(--ink2);
}
.params input {
  padding: .4rem .5rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface2); color: var(--ink); text-align: right;
}

.class-list { display: grid; gap: .4rem; }
.class-list label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .95rem; cursor: pointer;
}

.chart { display: grid; gap: .5rem; }

/* output location title */
.output-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }

/* subtle centered divider that splits the Annual and Weekly sections */
.section-title {
  display: flex; align-items: center; gap: .75rem;
  margin: .35rem 0 .25rem; color: var(--ink2);
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
}
.section-title::before, .section-title::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.short-term .section-title { margin-top: 1.5rem; }
#densityMap { width: 100%; height: auto; }
.status { color: var(--ink2); font-size: .72rem; margin: 0; }

.results {
  width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 1rem;
}
.results th, .results td {
  padding: .5rem .6rem; text-align: right; border-bottom: 1px solid var(--line);
}
.results th:first-child, .results td:first-child { text-align: left; font-weight: 600; }
/* Blue header row: creates the split between heatmap and table, no extra band. */
.results thead th {
  background: var(--blue); color: #fff; font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .03em; border-bottom: none;
}
.results thead th:first-child { border-radius: 6px 0 0 0; }
.results thead th:last-child  { border-radius: 0 6px 0 0; }
.results tbody tr:hover { background: var(--surface2); }
.results td.num { font-variant-numeric: tabular-nums; }

/* ---- short-term (this week / next week) ---- */
.short-term { margin-top: 1.5rem; padding-top: .25rem; }
.day-strip { display: block; width: 100%; height: 82px; margin-bottom: .35rem; }
.strip-legend { margin: 0 0 1.1rem; }
.strip-legend .pair { display: inline-flex; gap: 2px; margin-right: .35rem; }
.strip-legend .pair .sw { margin-right: 0; }
.sw-up    { background: var(--blue); }
.sw-up-l  { background: var(--blue); opacity: .4; }
.sw-down  { background: #d64545; }
.sw-down-l{ background: #d64545; opacity: .4; }
.legend {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  justify-content: flex-end;
  font-size: .78rem; color: var(--ink2); margin: .5rem 0 .1rem;
}
.legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: .3rem; }
.sw-fc { background: var(--blue); }
.sw-ly { background: var(--ink2); }
.sw-zone { background: var(--good); opacity: .35; }
.violins { display: flex; gap: 1rem; flex-wrap: wrap; }
.violins canvas { flex: 1 1 240px; width: 100%; height: auto; min-width: 220px; }
/* economy tables: this week / next week */
.econ-tables { display: grid; gap: 1.5rem; margin-top: 1.25rem; }
.econ-block .kicker { margin-bottom: .4rem; }
.results.econ td.up   { color: var(--good); font-weight: 600; }
.results.econ td.down { color: #d64545; font-weight: 600; }

.footer {
  max-width: var(--maxw); margin: 1rem auto 2rem; padding: 0 1.25rem;
  color: var(--ink2); font-size: .8125rem; line-height: 1.7;
}
.footer a { color: var(--blue); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ---- printer-friendly page: print the same tabloid image as the PNG ---- */
#printSheet { display: none; }
@page { margin: 0.6cm; }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; }
  body > *:not(#printSheet) { display: none !important; }   /* hide the whole app */
  #printSheet {
    display: flex !important; align-items: center; justify-content: center;
    width: 100%; height: 100vh;
  }
  #printImg { max-width: 100%; max-height: 100vh; }          /* fit the 9:16 sheet to one page */
}