/* === EveryClearNight-inspired theme (compact) =============================== */
/* Variables */
:root{
  --ghost-accent-color:#22c55e; /* change to match your ECN accent */
  --color-white:#fff;
  --color-gray-50:#fafafa; --color-gray-100:#f4f4f5; --color-gray-200:#e4e4e7;
  --color-gray-300:#d4d4d8; --color-gray-400:#a1a1aa; --color-gray-500:#71717a;
  --color-gray-600:#52525b; --color-gray-700:#3f3f46; --color-gray-800:#27272a;
  --color-gray-900:#18181b;

  --color-bg:var(--color-white);
  --color-bg-muted:var(--color-gray-100);
  --color-bg-inverse:var(--color-gray-900);
  --color-text:var(--color-gray-600);
  --color-text-muted:var(--color-gray-400);
  --color-text-highlight:var(--color-gray-900);
  --color-text-inverse:var(--color-gray-200);
  --color-border:var(--color-gray-200);
  --color-border-highlight:var(--color-gray-900);

  --font-primary:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
}
html{font-family:var(--font-primary);font-size:16px;}
body{margin:0;background:var(--color-bg);color:var(--color-text);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{color:var(--color-text-highlight);text-decoration:underline;text-decoration-color:var(--ghost-accent-color);text-underline-position:from-font;}
a:hover{text-decoration-thickness:2px;}
h1,h2,h3,h4,h5{color:var(--color-text-highlight);font-weight:700;line-height:1.15;margin:0 0 .5rem}
h1{font-size:2rem} h2{font-size:1.5rem} h3{font-size:1.25rem}
@media(min-width:640px){h1{font-size:2.5rem} h2{font-size:2rem}}

/* Layout */
.site{min-height:100vh;display:flex;flex-direction:column}
.header, .footer{border-top:1px solid transparent;border-bottom:1px solid var(--color-border);}
.outer{padding-left:1rem;padding-right:1rem}
@media(min-width:480px){.outer{padding-left:1.5rem;padding-right:1.5rem}}
.inner{max-width:860px;margin:0 auto}
main{flex:1;padding:1.5rem 0}
.header{padding:1rem 0;margin-bottom:.5rem}
.header h1{letter-spacing:.01em;font-size:1.375rem}
.footer{padding:1rem 0;color:var(--color-text-muted);font-size:.825rem}

/* Cards / sections */
.card{background:#fff;border:1px solid var(--color-border);padding:1rem;border-radius:0;box-shadow:none;margin:0 0 1rem}
.section{margin-top:1.5rem}

/* Form */
label{font-weight:600;color:var(--color-text-highlight);display:block;margin:.25rem 0}
input,select,textarea{
  background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text);
  width:100%;padding:.625em .75em;font-size:1rem;border-radius:0;box-sizing:border-box
}
input:focus,select:focus{outline:0;border-color:var(--color-border-highlight)}
button, .btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--ghost-accent-color);color:#fff;border:2px solid var(--ghost-accent-color);
  text-transform:uppercase;letter-spacing:.075em;font-weight:600;font-size:.8125rem;
  padding:.6em 1em;cursor:pointer;text-decoration:none
}
.btn-outline{background:transparent;color:var(--color-text-highlight);border-color:var(--color-border-highlight)}
.btn:hover{opacity:.9}
.grid{display:grid;gap:1rem}
@media(min-width:640px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Table */
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{border:1px solid var(--color-border);padding:.6em}
th{color:var(--color-text-highlight);text-align:left}
.num{text-align:right}
.mt-3{margin-top:1rem}
.muted{color:var(--color-text-muted)}

/* Chart wrapper */
.chart-box{background:var(--color-gray-50);border:1px solid var(--color-border);padding:16px;border-radius:8px}
.chart-toolbar{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}
.chart-caption{font-size:.9rem;color:var(--color-text-muted);margin-top:.25rem}

/* Small helpers */
hr{border:none;border-top:1px solid var(--color-border);margin:1rem 0}

/* === Form layout: stacked + 2-col ===================== */
.form-grid{
  display:grid;
  gap:1rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    "target"
    "location"
    "min"
    "year"
    "actions";
}
.field-target  { grid-area: target; }
.field-location{ grid-area: location; }
.field-minalt  { grid-area: min; }
.field-year    { grid-area: year; }
.form-actions  { grid-area: actions; display:flex; gap:.5rem; align-items:flex-end; }

@media (min-width: 640px){
  .form-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "target target"
      "location location"
      "min year"
      "actions actions";
  }
}

@media (min-width: 960px){
  .form-grid{
    grid-template-columns: 2fr 1.5fr;
    grid-template-areas:
      "target target"
      "location location"
      "min year"
      "actions actions";
  }
}

/* Small inline hint under labels */
.field-hint{ color: var(--color-text-muted); font-size: .85rem; margin-top:.25rem }

/* === Form layout override: 2 columns on >=640px === */
@media (min-width: 640px){
  .form-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "target location"
      "min year"
      "actions actions";
  }
}

/* --- Accordion (details/summary) --- */
details.accordion summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 700;
}
details.accordion summary::-webkit-details-marker { display: none; }
details.accordion summary::after {
  content: "▾";
  float: right;
  transition: transform .2s ease;
}
details.accordion[open] summary::after { transform: rotate(180deg); }
details.accordion .accordion-body {
  border-top: 1px solid var(--color-border);
  margin-top: .75rem;
  padding-top: .75rem;
}

/* --- Sortable tables --- */
table.sortable thead th {
  cursor: pointer;
  position: relative;
  user-select: none;
}
table.sortable thead th::after {
  content: "";
  position: absolute;
  right: .5em;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-text-muted);
  opacity: .6;
}
table.sortable thead th[data-sort-dir="asc"]::after {
  border-top-color: transparent;
  border-bottom-color: var(--color-text-highlight);
  transform: translateY(-50%) rotate(180deg);
  opacity: 1;
}
table.sortable thead th[data-sort-dir="desc"]::after {
  border-bottom-color: transparent;
  border-top-color: var(--color-text-highlight);
  opacity: 1;
}

/* --- Sortable tables --- */
table.sortable thead th {
  cursor: pointer;
  position: relative;
  user-select: none;
}
table.sortable thead th::after {
  content: "";
  position: absolute;
  right: .5em;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-text-muted);
  opacity: .6;
}
table.sortable thead th[data-sort-dir="asc"]::after {
  border-top-color: transparent;
  border-bottom-color: var(--color-text-highlight);
  transform: translateY(-50%) rotate(180deg);
  opacity: 1;
}
table.sortable thead th[data-sort-dir="desc"]::after {
  border-bottom-color: transparent;
  border-top-color: var(--color-text-highlight);
  opacity: 1;
}

/* --- Sortable table header spacing so text doesn't overlap caret --- */
table.sortable thead th {
  padding-right: 1.6em;       /* room for the caret */
  white-space: nowrap;        /* keep header on one line */
}

/* Slightly nudge the caret and make it a touch smaller */
table.sortable thead th::after {
  right: .55em;
  border-width: 4px;
}

/* On very small screens give a bit more room for the caret */
@media (max-width: 480px) {
  table.sortable thead th { padding-right: 2em; }
}