/* Basic Pico override — light background, electric blue accent. */

/* This page is desktop-only by design: it must render as a fixed desktop
   layout at every viewport size (phone, tablet, resized window) and simply
   scroll horizontally when the screen is narrower. The viewport meta is the
   plain `width=device-width` (a pinned width=1024 meta caused separate iOS
   Safari bugs), so the only thing holding the layout together is this hard
   width floor on the content wrappers. It must be wide enough to contain
   the controls panel's two side-by-side fieldsets at their natural size —
   the Date range pair and the four Area selects (the Metro select can reach
   its 220px cap). 1024 was too tight and let the Area row's Metro select
   spill past the panel's right border on iOS/Firefox. Set on the wrappers,
   not html/body — min-width on the root elements is an iOS Safari
   page-height-miscalculation trigger. */
header.container,
main.container {
  min-width: 1280px;
}

/* Pico scales html font-size up at wider breakpoints (up to ~122%).
   Lock it down so nothing balloons on a normal desktop screen. */
html {
  font-size: 16px;
}

main.container > section {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

h1 {
  font-size: 1.4rem;
  margin-bottom: 0.35rem;
}

:root {
  --pico-primary: #0066ff;
  --pico-primary-background: #0066ff;
  --pico-primary-hover: #0052cc;
  --pico-primary-hover-background: #0052cc;
  --pico-primary-focus: rgba(0, 102, 255, 0.25);
  --pico-primary-inverse: #ffffff;
}

.subtitle {
  color: var(--pico-muted-color);
  max-width: 60ch;
  font-size: 0.9rem;
}

.load-marker {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.7rem;
  color: var(--pico-muted-color);
}

.status-line {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* Reverted to CSS Grid (was briefly flexbox — that caused a much worse
   bug: the fieldset's own text content collapsing to zero-width and
   wrapping one letter per line in Chrome AND Firefox, not just a caching
   artifact). Grid's default track sizing doesn't have that failure mode.
   The remaining vertical-alignment nitpick this originally shipped with
   is a much smaller problem than what the flexbox rewrite caused. */
#controlsPanel > .grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 1.5rem;
}

#dateRangeBox legend,
#areaBox legend {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

#dateRangeBox,
#areaBox {
  margin-bottom: 0;
}

.control-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
}

.control-row > label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  margin-bottom: 0;
  font-size: 0.8rem;
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 0; /* flex items default to min-width:auto, which silently
                   overrides max-width on the select below with a long
                   option list — this lets it actually shrink. */
}

.control-row select {
  width: auto;
  max-width: 190px; /* Hard cap so four Area selects (Region/Division/Size
                       class/Metro) plus the Date range pair always fit
                       inside the 1280px content floor without the Metro
                       select spilling past the controls panel's border.
                       Long option text is clipped with the ellipsis below. */
  min-width: 0; /* same trap applies to the select itself as a flex child
                   of the label above — without this, its longest <option>
                   forces a min-content width that wins over max-width. */
  font-size: 0.85rem;
  padding: 0.3rem 1.75rem 0.3rem 0.5rem;
  margin-bottom: 0;
  margin-top: 0; /* Pico's `label > select` rule adds a 4px margin-top only
                    when the select is a direct child of the label (true in
                    #areaBox, false in #dateRangeBox where selects are wrapped
                    in .control-pair). That asymmetry pushed the Area row 4px
                    below the Date range row. The label's flex `gap` already
                    provides the text-to-control spacing. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-pair {
  display: flex;
  gap: 0.4rem;
}

#fromYear,
#toYear {
  min-width: 4.5rem;
}

#fromMonth,
#toMonth {
  min-width: 4rem;
}

.table-scroll {
  overflow-x: auto;
}

table {
  font-size: 0.85rem;
}

th,
td {
  padding: 0.5rem 0.75rem;
}

td.num,
th:nth-child(n + 2) {
  text-align: right;
}

td.num {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

input[type="number"].weight-input {
  width: 5.5rem;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.9rem;
  text-align: right;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0;
}

.weight-pct-label {
  margin-left: 4px;
  color: var(--pico-muted-color);
}

.weight-sum {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.weight-warnings {
  font-size: 0.8rem;
  color: #cc0000;
  margin-bottom: 1rem;
}

.bad {
  color: #cc0000;
}
.ok {
  color: #2e7d32;
}

.action-row {
  display: flex;
  gap: 0.75rem;
}

.action-row button {
  width: auto;
  margin-bottom: 0;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
}

.weight-cell {
  text-align: right;
}

.dongle {
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 10px;
  padding: 0;
  margin-right: 8px;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 4px;
  cursor: pointer;
}
.dongle:hover:not(:disabled) {
  background-color: #f0f0f0;
}
.dongle:disabled {
  background-color: #ffffff;
  border-color: #cccccc;
  color: #cccccc;
  cursor: not-allowed;
}

.arrow-icon {
  display: inline-block;
  width: 0;
  height: 0;
}
.arrow-icon.arrow-right {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid currentColor;
}
.arrow-icon.arrow-down {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}
.arrow-icon.spinner {
  width: 10px;
  height: 10px;
  border: 2px solid #cccccc;
  border-top-color: #000000;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.dongle-spacer {
  display: inline-block;
  width: 22px;
  margin-right: 8px;
}
.subrow td {
  font-size: 0.85rem;
}
.subrow-level-1 td {
  background: #f0f8ff;
} /* alice blue */
.subrow-level-2 td {
  background: #f0fff0;
} /* honeydew */
.subrow-level-3 td {
  background: #fffff0;
} /* ivory */
.subrow-level-4 td {
  background: #fff0f5;
} /* lavender blush */
.subrow-level-5 td {
  background: #f5f0ff;
} /* lavender */
.subrow-level-6 td {
  background: #fff5ee;
} /* seashell */
.subrow-level-7 td {
  background: #f0ffff;
} /* azure */
.subrow-level-8 td {
  background: #f5fffa;
} /* mint cream */
.subrow-level-9 td {
  background: #fdf5e6;
} /* old lace */
.subrow-level-10 td {
  background: #f8f8ff;
} /* ghost white */

.results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

/* Advanced page is desktop-only by design (viewport is pinned in
   advanced.html) — no responsive collapse here. */

.results-grid article {
  padding: 0.9rem 1rem;
  margin: 0;
  background: #ffffff;
}

.results-grid article > p {
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.results-grid article small {
  font-size: 0.8rem;
}

.bignum {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 1.4rem;
  font-weight: 600;
  display: block;
  color: inherit;
  margin-bottom: 0.2rem;
}

.advanced-link-footer {
  text-align: center;
  font-size: 0.85rem;
  border: none !important;
  padding-top: 0 !important;
}

.advanced-link-footer a {
  color: var(--pico-muted-color);
}

.weight-vintage-note {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--pico-muted-border-color);
  font-size: 0.8rem;
  color: var(--pico-muted-color);
}

/* Centered loading state for the main table: big Pico spinner with the
   message centered underneath. Hidden via inline display once data lands. */
.table-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 320px;
}

.table-loading [aria-busy="true"] {
  font-size: 2.5rem;
  line-height: 1;
}

.table-loading p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--pico-muted-color);
}