:root {
  --parchment: #f2ede1;
  --ink: #2b241a;
  --accent: #b3271e;
  --panel-bg: #16181d;
  --panel-fg: #e9e9e9;
  --panel-border: #333640;
  --row-alt: #1e2127;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--parchment);
  color: var(--ink);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--parchment);
}

.topbar h1 {
  font-size: 1.05rem;
  margin: 0;
  font-weight: 600;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.plan-count {
  font-size: 0.85rem;
  opacity: 0.85;
}

.ghost-btn {
  background: transparent;
  border: 1px solid rgba(242, 237, 225, 0.5);
  color: var(--parchment);
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.ghost-btn:hover { background: rgba(242, 237, 225, 0.12); }
.ghost-btn.active { background: var(--accent); border-color: var(--accent); }
.danger-btn { border-color: rgba(179, 39, 30, 0.6); color: #ff9c94; }
.danger-btn:hover { background: rgba(179, 39, 30, 0.18); }

main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  flex-wrap: wrap;
}

.tables-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.tables-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.difficulty-section {
  width: 100%;
}
.difficulty-section h2 { margin: 0 0 0.2rem; font-size: 1rem; color: var(--ink); }
.difficulty-section .order-hint { color: var(--ink); opacity: 0.7; }
.difficulty-chart-wrap {
  position: relative;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 0.6rem 0.8rem 0.4rem;
}
.difficulty-chart-svg {
  width: 100%;
  height: 200px;
  display: block;
  cursor: crosshair;
}
.difficulty-tooltip {
  position: absolute;
  pointer-events: none;
  background: #0f1116;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  color: var(--panel-fg);
  white-space: nowrap;
  z-index: 10;
  transform: translate(-50%, -100%);
  margin-top: -10px;
}
.difficulty-tooltip strong { color: #fff; }
.difficulty-tooltip .dt-area { color: #9aa0ac; }

.map-wrap {
  position: relative;
  max-width: 1000px;
  width: 100%;
  flex: 1 1 600px;
  min-width: 0;
  line-height: 0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  container-type: inline-size;
}

.map-wrap img#mapImg {
  width: 100%;
  height: auto;
  display: block;
}

.map-missing {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #ddd, #ddd 10px, #eee 10px, #eee 20px);
  color: #333;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
}

.hotspot-layer {
  position: absolute;
  inset: 0;
}

.arrow-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.hotspot-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2px;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(242, 237, 225, 0.85);
  padding: 1px 4px;
  border-radius: 3px;
  pointer-events: none;
}

.hotspot {
  --hs-size: clamp(14px, 3.4cqw, 34px);
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--hs-size);
  height: var(--hs-size);
  border-radius: 50%;
  background: rgba(179, 39, 30, 0.85);
  border: 2px solid #fff;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--hs-size) * 0.33);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s ease;
}
.hotspot:hover { transform: translate(-50%, -50%) scale(1.15); }
.hotspot { touch-action: none; }
body.calibrating .hotspot { cursor: grab; }
.hotspot.dragging {
  cursor: grabbing;
  z-index: 10;
  transform: translate(-50%, -50%) scale(1.25);
}
.hotspot.chart-highlight {
  z-index: 9;
  transform: translate(-50%, -50%) scale(1.35);
  background: #ffd24d;
  color: #16181d;
  box-shadow: 0 0 0 5px rgba(255, 210, 77, 0.35);
}

/* overlays */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  z-index: 50;
}

.overlay-panel {
  background: var(--panel-bg);
  color: var(--panel-fg);
  width: min(760px, 100%);
  max-height: 85vh;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--panel-border);
}
.overlay-header h2 { margin: 0; font-size: 1.1rem; }

.close-btn {
  background: none;
  border: none;
  color: var(--panel-fg);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
}

.overlay-controls {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--panel-border);
  flex-wrap: wrap;
}
.overlay-controls input, .overlay-controls select {
  background: #0f1116;
  color: var(--panel-fg);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
}
#searchBox { flex: 1; min-width: 140px; }

.overlay-body {
  overflow-y: auto;
  padding: 0.25rem 0;
}

.sub-area-heading {
  padding: 0.6rem 1.1rem 0.3rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9aa0ac;
  border-top: 1px solid var(--panel-border);
}
.sub-area-heading:first-child { border-top: none; }

.route-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.1rem;
  font-size: 0.9rem;
}
.route-row:nth-child(odd) { background: var(--row-alt); }
.route-row:hover { background: #2a2e37; }

.route-row input[type="checkbox"] { flex: none; }

.overlay-columns {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0.4rem 1.1rem 0;
}
.oc-spacer { flex: none; width: 0; }
.oc-col {
  flex: none;
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #9aa0ac;
}
.oc-col-remove {
  background: none;
  border: none;
  color: #6b7180;
  font-size: 0.6rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.oc-col-remove:hover { color: #ff9c94; }
.oc-add-btn { margin-left: 0.5rem; padding: 0.15rem 0.5rem; font-size: 0.72rem; }

.route-checks {
  flex: none;
  display: flex;
  gap: 3px;
}
.route-checks input[type="checkbox"] {
  width: 18px;
  height: 14px;
  margin: 0;
  flex: none;
}
.route-num { flex: none; width: 2.4rem; color: #8b909b; font-variant-numeric: tabular-nums; }
.route-type {
  flex: none;
  width: 1.6rem;
  text-align: center;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0;
}
.route-type.S { background: #274b7a; }
.route-type.T { background: #6a4423; }
.route-type.M { background: #4a3a6a; }
.route-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-grade { flex: none; width: 5rem; text-align: left; font-variant-numeric: tabular-nums; color: #c9cdd6; }
.route-points { flex: none; width: 3.2rem; text-align: right; font-weight: 700; }
.route-bonus { flex: none; width: 1rem; color: var(--accent); }

.empty-msg { padding: 1.2rem; color: #9aa0ac; font-size: 0.9rem; }

/* legend panel */
.legend-panel {
  flex: 0 0 260px;
  width: 260px;
  max-width: 100%;
  background: var(--panel-bg);
  color: var(--panel-fg);
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  padding: 0.9rem;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
.legend-panel h2 { margin: 0 0 0.4rem; font-size: 1rem; }

.legend-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-top: 0.4rem;
}
.legend-table th {
  text-align: left;
  color: #9aa0ac;
  font-weight: 600;
  padding: 0.2rem 0.3rem;
  border-bottom: 1px solid var(--panel-border);
}
.legend-table td {
  padding: 0.2rem 0.3rem;
  font-variant-numeric: tabular-nums;
}
.legend-table td:last-child { text-align: left; font-weight: 700; }
.legend-table tr:nth-child(odd) td { background: var(--row-alt); }

.legend-note {
  margin: 0.8rem 0 0;
  font-size: 0.78rem;
  color: #9aa0ac;
  line-height: 1.45;
}
.legend-note .route-bonus { color: var(--accent); }

.grade-legend { margin-top: 0.9rem; border-top: 1px solid var(--panel-border); padding-top: 0.7rem; }
.grade-legend summary {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--panel-fg);
  list-style: revert;
}
.grade-legend summary::-webkit-details-marker { color: #9aa0ac; }
.grade-legend[open] summary { margin-bottom: 0.4rem; }

/* order panel */
.order-panel {
  flex: 0 0 440px;
  width: 440px;
  max-width: 100%;
  background: var(--panel-bg);
  color: var(--panel-fg);
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  padding: 0.9rem;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
.order-panel h2 { margin: 0 0 0.4rem; font-size: 1rem; }
.order-hint { margin: 0 0 0.7rem; font-size: 0.78rem; color: #9aa0ac; line-height: 1.4; }

.order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.order-item {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  background: var(--row-alt);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  font-size: 0.82rem;
}
.order-item:hover { background: #262a33; }
.order-item.is-start { border-color: #2e7d32; box-shadow: inset 2px 0 0 #2e7d32; }

.order-start-radio {
  flex: none;
  width: 14px;
  height: 14px;
  accent-color: #2e7d32;
  cursor: pointer;
}

.order-num {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #3a6ea5;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.move-btn {
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
}
.move-btn:disabled { color: #444750; cursor: default; }
.move-btn:disabled:hover { background: none; }

.order-icon-btn {
  flex: none;
  background: none;
  border: none;
  color: #6b7180;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.2rem 0.3rem;
  cursor: pointer;
  border-radius: 4px;
}
.order-icon-btn:hover { color: #e9e9e9; background: rgba(255, 255, 255, 0.08); }
.remove-stop-btn:hover { color: #ff9c94; }
.order-name {
  flex: 1 1 50px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-stats {
  flex: none;
  width: 6.4rem;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: #9aa0ac;
}
.order-badge-count {
  flex: none;
  background: #0f1116;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 0.05rem 0.4rem;
  font-size: 0.72rem;
  color: #9aa0ac;
}

.plan-save-row input[type="text"] { flex: 1; min-width: 120px; }

.plan-summary-empty {
  font-size: 0.82rem;
  color: #9aa0ac;
  margin: 0;
}
.summary-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  color: #9aa0ac;
  margin-bottom: 0.5rem;
  cursor: pointer;
  line-height: 1.3;
}
.summary-option input[type="checkbox"] { accent-color: #2e7d32; cursor: pointer; flex: none; }
.plan-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.plan-summary-table th {
  text-align: left;
  color: #9aa0ac;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.4rem;
  border-bottom: 1px solid var(--panel-border);
}
.plan-summary-table td {
  padding: 0.2rem 0.4rem;
  font-variant-numeric: tabular-nums;
}
.plan-summary-table th:not(:first-child),
.plan-summary-table td:not(:first-child) { text-align: right; }
.plan-summary-table tr.total-row td {
  border-top: 1px solid var(--panel-border);
  font-weight: 700;
  padding-top: 0.35rem;
}
.plan-summary-table tr.bonus-row.bonus-active td { color: #7fd08a; }
.plan-summary-table tr.bonus-row.bonus-inactive td { color: #6b7180; }
.bonus-checkbox-label { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.bonus-checkbox-label input[type="checkbox"] { accent-color: #2e7d32; cursor: pointer; }

.plan-summary-pace {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: #9aa0ac;
  line-height: 1.4;
}

/* calibration */
body.calibrating .hotspot { outline: 2px dashed #ffd24d; }
#calibrateBtn.active { background: #ffd24d; color: #16181d; border-color: #ffd24d; }

/* mobile: trade secondary info for more room to read names */
@media (max-width: 640px) {
  .order-stats { display: none; }
  #overlay .route-num { display: none; }
  #overlay .route-grade {
    width: 3.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}