/* Florida Procurement Atlas (/florida).
   Hand-written, not built by the Tailwind CLI: the map, district list and directory table are
   their own component, styled to match the agency site's dark sage palette. The site header and
   footer on the page still use the compiled /css/styles.css. Lives here rather than /css/
   because /css/* is served immutable for a year. */

.atlas {
  --bg: #0E1A17;
  --panel: #152E26;
  --panel-2: #10241E;
  --raise: #1B3A30;
  --line: rgba(224, 230, 227, 0.10);
  --line-strong: rgba(224, 230, 227, 0.18);
  --ink: #E0E6E3;
  --muted: #A3B2AB;
  --sage: #8FB5A6;
  --sage-light: #A8CCBD;
  --off: #213D34;
  color: var(--ink);
}

.atlas-wrap a { color: var(--sage-light); }
.atlas-wrap button { font: inherit; color: inherit; cursor: pointer; }
.atlas :focus-visible { outline: 3px solid #D4A853; outline-offset: 3px; }

.atlas-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .atlas-wrap { padding: 0 32px; } }

/* --- Workspace: district list beside the map --- */
.atlas-workspace {
  display: grid;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 14px;
  overflow: hidden;
}

.atlas-sidebar { padding: 24px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.atlas-section-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.atlas-section-line h2 { font-family: var(--font-display, 'Clash Display', sans-serif); font-size: 18px; font-weight: 600; margin: 0; color: #fff; }
.atlas-small-actions { display: flex; gap: 4px; }
.atlas-text-button {
  background: none; border: 0; padding: 10px 8px; min-height: 44px;
  color: var(--sage-light); font-size: 14px; text-decoration: underline; text-underline-offset: 3px;
}
.atlas-instruction { font-size: 14px; color: var(--muted); margin: 4px 0 16px; }

.atlas-district-list { display: flex; flex-direction: column; gap: 8px; }
.atlas-district {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  background: var(--panel-2);
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.atlas-district:hover { background: var(--raise); }
.atlas-district:has(input:checked) { border-color: var(--line-strong); background: var(--raise); }
.atlas-district input { accent-color: var(--sage); width: 18px; height: 18px; margin: 0; cursor: pointer; flex-shrink: 0; }
.atlas-district-num {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
  background: var(--district-color); color: #0E1A17;
}
.atlas-district:not(:has(input:checked)) .atlas-district-num { opacity: 0.45; }
.atlas-district-copy { flex: 1; line-height: 1.35; }
.atlas-district-copy strong { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.atlas-district-copy small { font-size: 13px; color: var(--muted); }

.atlas-export { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.atlas-stats { display: flex; gap: 32px; margin-bottom: 16px; }
.atlas-stats strong { display: block; font-family: var(--font-display, 'Clash Display', sans-serif); font-size: 32px; font-weight: 600; line-height: 1.1; color: #fff; }
.atlas-stats span { font-size: 13px; color: var(--muted); }
.atlas .atlas-export-button {
  width: 100%; min-height: 48px; padding: 12px 16px; border: 0; border-radius: 8px;
  background: var(--sage); color: #0E1A17; font-weight: 600; font-size: 15px;
  display: flex; justify-content: center; align-items: center; gap: 8px;
  transition: background-color 150ms ease-out, scale 120ms ease-out;
}
.atlas .atlas-export-button:hover { background: var(--sage-light); }
.atlas .atlas-export-button:active { scale: 0.97; }
.atlas .atlas-export-button:disabled { background: var(--off); color: var(--muted); cursor: not-allowed; scale: 1; }
.atlas-export-note { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 12px 0 0; }
.atlas-status { font-size: 14px; min-height: 20px; color: var(--sage-light); margin: 8px 0 0; }

/* --- Map --- */
.atlas-map-area {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background-color: var(--panel-2);
  background-image: radial-gradient(rgba(143, 181, 166, 0.16) 0.7px, transparent 0.7px);
  background-size: 16px 16px;
}
.atlas-map-top { padding: 20px 24px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.atlas-map-top strong { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.atlas-map-top small { font-size: 13px; color: var(--muted); }
.atlas-map-controls { display: flex; gap: 8px; }
.atlas-map-controls button {
  width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--panel); font-size: 20px; line-height: 1;
  transition: background-color 150ms ease-out;
}
.atlas-map-controls button:hover { background: var(--raise); }
.atlas-map-controls button:disabled { opacity: 0.4; cursor: default; }
.atlas-map-stage { position: relative; flex: 1; overflow: hidden; min-height: 480px; }
.atlas-map-stage svg { width: 100%; height: 100%; min-height: 480px; max-height: 640px; display: block; }

.atlas .district {
  stroke: #0E1A17; stroke-width: 2; stroke-linejoin: round; fill-rule: evenodd; cursor: pointer;
  vector-effect: non-scaling-stroke;
  transition: fill 200ms ease-out, opacity 200ms ease-out;
}
.atlas .district:hover, .atlas .district:focus-visible { filter: brightness(1.12); stroke: #fff; stroke-width: 2.5; outline: none; }
.atlas .district:not(.active) { fill: var(--off) !important; }
.atlas .county-lines { pointer-events: none; fill: none; stroke: #0E1A17; stroke-width: 0.6; opacity: 0.5; }
.atlas .map-label { pointer-events: none; }
.atlas .map-label circle { fill: #0E1A17; stroke: var(--sage); stroke-width: 1.2; }
.atlas .map-label text { font: 600 16px 'General Sans', sans-serif; text-anchor: middle; dominant-baseline: middle; fill: #fff; }
.atlas .map-label:not(.active) { opacity: 0.45; }
.atlas .ocean { font: italic 17px 'General Sans', sans-serif; fill: rgba(163, 178, 171, 0.7); letter-spacing: 3px; }

.atlas-map-caption { padding: 12px 24px 18px; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--muted); }
.atlas-compass { position: absolute; left: 28px; bottom: 24px; color: var(--muted); text-align: center; font-size: 12px; pointer-events: none; }
.atlas-compass::after { content: '\2191'; font-size: 28px; display: block; line-height: 1.2; }
.atlas-tooltip {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #0E1A17; border: 1px solid var(--line-strong); color: var(--ink);
  padding: 8px 12px; border-radius: 6px; pointer-events: none; font-size: 13px;
  max-width: 90%; white-space: nowrap;
}
.atlas-tooltip:empty { display: none; }

/* --- Directory table --- */
.atlas-directory { margin-top: 48px; }
.atlas-directory-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 16px; }
.atlas-directory h2 { font-family: var(--font-display, 'Clash Display', sans-serif); font-size: 28px; font-weight: 600; color: #fff; margin: 0 0 4px; }
.atlas-directory-head p { margin: 0; color: var(--muted); font-size: 15px; }
.atlas-search input {
  width: 320px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--panel); padding: 10px 14px; color: var(--ink); font-size: 15px;
}
.atlas-search input::placeholder { color: var(--muted); }

.atlas-tabs { display: flex; gap: 24px; align-items: center; border-bottom: 1px solid var(--line); }
.atlas-tab {
  min-height: 48px; padding: 8px 2px; border: 0; background: none;
  border-bottom: 2px solid transparent; font-size: 15px; color: var(--muted);
}
.atlas-tab[aria-selected="true"] { color: #fff; font-weight: 600; border-bottom-color: var(--sage); }
.atlas-tab span { font-size: 12px; background: var(--raise); color: var(--ink); padding: 2px 8px; border-radius: 10px; margin-left: 6px; }
.atlas-row-count { margin-left: auto; font-size: 13px; color: var(--muted); }

.atlas-table-wrap {
  border: 1px solid var(--line); border-top: 0; background: var(--panel);
  overflow: auto; max-height: 560px; border-radius: 0 0 10px 10px;
}
.atlas-table-wrap + .atlas-table-wrap { margin-top: 32px; }
.atlas table { border-collapse: collapse; width: 100%; font-size: 14px; }
.atlas caption { text-align: left; padding: 16px; font-weight: 600; color: #fff; }
.atlas thead th { position: sticky; top: 0; z-index: 1; }
.atlas th {
  background: var(--raise); text-align: left; color: var(--ink); font-size: 12px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase; padding: 12px 16px; white-space: nowrap;
}
.atlas td { border-top: 1px solid var(--line); padding: 12px 16px; vertical-align: top; color: var(--ink); }
.atlas tbody th { position: static; background: none; text-transform: none; letter-spacing: 0; font-size: 14px; color: #fff; white-space: normal; min-width: 160px; border-top: 1px solid var(--line); vertical-align: top; }
.atlas tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.atlas td.atlas-notes { min-width: 260px; max-width: 420px; color: var(--muted); font-size: 13px; }
.atlas tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.atlas tbody tr[hidden] { display: none; }
.atlas-link { display: block; font-size: 13px; white-space: nowrap; text-decoration: none; line-height: 1.9; }
.atlas-link:hover { text-decoration: underline; }
.atlas-none { color: var(--muted); }
.atlas-pill { display: inline-block; border-radius: 4px; padding: 2px 8px; background: var(--raise); white-space: nowrap; font-size: 12px; }
.atlas-empty td { padding: 48px; text-align: center; color: var(--muted); }

.atlas-js .atlas-table-wrap + .atlas-table-wrap { margin-top: 0; }
.atlas-js caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.atlas-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .atlas-workspace { grid-template-columns: 280px minmax(0, 1fr); }
  .atlas-sidebar { padding: 16px; }
  .atlas-map-stage, .atlas-map-stage svg { min-height: 420px; }
  .atlas-map-caption span:last-child { display: none; }
}
@media (max-width: 720px) {
  .atlas-workspace { display: flex; flex-direction: column; }
  .atlas-sidebar { order: 1; border-right: 0; border-top: 1px solid var(--line); }
  .atlas-map-top { padding: 16px 16px 0; }
  .atlas-map-stage, .atlas-map-stage svg { min-height: 340px; height: 360px; }
  .atlas-map-caption { padding: 8px 16px 12px; }
  .atlas-compass { bottom: 16px; left: 16px; }
  .atlas-tooltip { white-space: normal; text-align: center; width: 80%; }
  .atlas-district-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .atlas-district { padding: 8px; gap: 8px; }
  .atlas-district input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .atlas-district:has(input:focus-visible) { outline: 3px solid #D4A853; outline-offset: 2px; }
  .atlas-district:has(input:checked) { border-color: var(--sage); }
  .atlas-district-copy strong { font-size: 13px; }
  .atlas-district-copy small { font-size: 12px; }
  .atlas-district-num { width: 26px; height: 26px; font-size: 12px; }
  .atlas-directory-head { display: block; }
  .atlas-search input { width: 100%; margin-top: 16px; }
  .atlas-tabs { gap: 16px; }
  .atlas-directory h2 { font-size: 24px; }
}
@media (pointer: coarse) { .atlas-hint-fine { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .atlas *, .atlas *::before, .atlas *::after { transition: none !important; }
}