/* Salary Map — page-specific styles. Layout, cards, fields, the verdict and
   the metrics are shared.css's; only the map, its legend and the city table
   live here.

   The map's colours are tokens, one set per theme, so the canvas reads them
   like every other colour (readColors() in script.js). The three arms of the
   scale were run through the data-viz validator as a set, all pairs (a map
   puts any two dots side by side): blue for cheaper than your city, amber
   for dearer, red only where your savings go below zero (Global salary
   mode). Their extremes clear colour-blind separation in both themes; the
   light amber sits just under 3:1 on the land, which the labels and the
   table relieve. */
:root{
  --cm-sea:#0F1728; --cm-land:#1C2942; --cm-border:#34476A; --cm-coast:#2A3B5C;
  --cm-label:#EAF1FF; --cm-label-muted:#A8B6CF; --cm-halo:#1C2942;
  --cm-mid:#66738A;
  --cm-cheap-1:#4F74A8; --cm-cheap-2:#3A82DC; --cm-cheap-3:#7FB2FF;
  --cm-dear-1:#7E6F45; --cm-dear-2:#B08A12; --cm-dear-3:#E0B13A;
  --cm-neg-1:#8E4655;  --cm-neg-2:#D23F57;  --cm-neg-3:#FF7A8C;
  --cm-home:#EAF1FF; --cm-nodata:#46536B; --cm-ring:#0F1728;
  --cm-hover:#8DBBFF;
}
body.light{
  --cm-sea:#DCE6F4; --cm-land:#FAFBFD; --cm-border:#B9C6DA; --cm-coast:#A9BBD6;
  --cm-label:#2D3436; --cm-label-muted:#66727F; --cm-halo:#FAFBFD;
  --cm-mid:#AEB6C2;
  --cm-cheap-1:#86B6EF; --cm-cheap-2:#2A78D6; --cm-cheap-3:#1C5CAB;
  --cm-dear-1:#EAC56A; --cm-dear-2:#D99A00; --cm-dear-3:#C98500;
  --cm-neg-1:#EE9A9A; --cm-neg-2:#D64545; --cm-neg-3:#A11D1D;
  --cm-home:#2D3436; --cm-nodata:#B4BDCA; --cm-ring:rgba(30,40,60,.42);
  --cm-hover:#3A71C8;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
@media(min-width:1101px){ .layout{grid-template-columns:380px 1fr;} }
.quick-start-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.quick-start-label{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:.82rem;color:var(--muted);white-space:nowrap;flex-shrink:0;}
.quick-start-label .tico{width:1.05em;height:1.05em;}
.quick-start-btns{display:flex;gap:6px;flex-wrap:wrap;}
.quick-start-btn{background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--muted);padding:5px 11px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all var(--motion-fast);white-space:nowrap;font-family:inherit;}
.quick-start-btn:hover{border-color:var(--accent);color:var(--text);}
.quick-start-btn.active{border-color:var(--accent2);color:var(--text);background:color-mix(in srgb,var(--accent2) 15%,transparent);}
.controls .ctrl-panel{padding-top:4px;}
.field-group .toggle-row{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:10px 0 12px;}
.field-group .toggle-row .seg-group{display:flex;}
.field-group .toggle-row .seg-btn{flex:1 1 auto;}
.toggle-label{display:inline-flex;align-items:center;gap:5px;font-size:.9rem;font-weight:700;color:var(--text);}
.seg-group{display:inline-flex;flex-wrap:wrap;max-width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px;}
.seg-btn{background:transparent;border:none;border-radius:7px;padding:5px 12px;font-size:.84rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all 140ms;font-family:inherit;white-space:nowrap;}
.seg-btn.active{background:var(--accent-strong);color:var(--text-inv);box-shadow:var(--shadow-sm);}
.seg-btn:hover:not(.active){color:var(--text);}
.field-sub{color:var(--muted);font-size:.8rem;line-height:1.35;}
.cur-tag{font-family:'DM Mono',monospace;font-size:.78rem;}
.currency-wrap .currency-input{padding-left:48px;}
.currency-wrap .prefix:not([hidden])~.currency-input.has-suffix{padding-left:48px;}

/* City picker: the site's searchable combobox (dropdown.css), the same
   picker the comparator uses. */
.city-picker{position:relative;}
.city-search{width:100%;}
.city-search.has-value{border-color:var(--accent-strong);background-color:var(--positive-bg);padding-right:28px;}
.city-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--muted);line-height:0;padding:4px;display:none;z-index:1;}
.city-clear .ico{width:16px;height:16px;}
.city-clear:hover{color:var(--text);background:var(--input-bg);}
.city-search.has-value~.city-clear{display:block;}
.city-dropdown{display:none;}
.city-dropdown.open{display:block;}

/* Detailed rows: a category and its monthly amount. */
.exp-row{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr) auto;gap:6px;align-items:center;margin-bottom:6px;}
.exp-row select{padding:8px 26px 8px 9px;font-size:.84rem;border-radius:var(--radius-sm);--sel-pad:24px;--sel-chev:8px;}
.exp-row .currency-input{padding:8px 8px 8px 44px;font-size:.88rem;}
.exp-row .currency-wrap .prefix{left:9px;}
.btn-add{background:transparent;border:1.5px dashed var(--border);border-radius:var(--radius-sm);color:var(--muted);font-family:inherit;font-weight:700;font-size:.82rem;padding:7px 10px;width:100%;cursor:pointer;margin-top:2px;}
.btn-add:hover{border-color:var(--accent);color:var(--text);}
.rows-total{display:flex;justify-content:space-between;font-size:.84rem;color:var(--muted);margin-top:10px;padding-top:8px;border-top:1px dashed var(--border);}
.rows-total strong{color:var(--text);font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;}

/* ── Results ─────────────────────────────────────────────────────────── */
.results{min-width:0;}
.metrics{grid-template-columns:repeat(4,1fr);}
.metric{padding:12px 14px;min-height:92px;}
.metric .value{font-size:1.15rem;}
.metric .sub{color:var(--muted);font-size:.78rem;margin-top:4px;line-height:1.35;}
.metric .value.neg{color:var(--negative-em);}
.nowrap{white-space:nowrap;}

.map-card{padding:16px 18px 12px;margin-bottom:18px;}
.map-card .chart-head{margin-bottom:6px;}
.view-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.view-row .toggle-label{min-width:0;color:var(--muted);font-weight:600;}
.map-note{font-size:.82rem;color:var(--info-text);background:var(--info-bg);border:1px solid var(--info-border);border-radius:var(--radius-sm);padding:6px 10px;margin:4px 0 8px;}
.map-foot{font-size:.76rem;color:var(--muted);margin-top:8px;}

/* Legend: the scale the dots are coloured on, living cost against yours. */
.map-legend{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 18px;margin:4px 0 10px;font-size:.78rem;color:var(--muted);}
.lg-scale{flex:1 1 320px;min-width:240px;}
.lg-title{font-weight:600;color:var(--text);margin-bottom:4px;font-size:.8rem;}
.lg-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;border:1px solid var(--border);}
.lg-bar span{display:block;height:100%;}
.lg-barwrap{position:relative;}
.lg-mark{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--cm-home);border-radius:1px;}
.lg-ticks{position:relative;height:16px;margin-top:3px;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:.72rem;}
.lg-ticks span{position:absolute;top:0;white-space:nowrap;}
.lg-ticks .t-lo{left:0;}
.lg-ticks .t-hi{right:0;}
.lg-ticks .t-mid{transform:translateX(-50%);}
.lg-keys{display:flex;flex-wrap:wrap;gap:4px 14px;}
.lg-key{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.lg-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.lg-dot.home{background:var(--cm-mid);box-shadow:0 0 0 2px var(--cm-ring),0 0 0 3.5px var(--cm-home);}
.lg-dot.nodata{background:transparent;border:1.5px solid var(--cm-nodata);}
.lg-tri{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:10px solid var(--cm-neg-2);flex-shrink:0;}

.map-wrap{position:relative;width:100%;height:clamp(420px,68vh,760px);border-radius:var(--radius-lg);overflow:hidden;background:var(--cm-sea);border:1px solid var(--border);touch-action:pan-y;-webkit-user-select:none;user-select:none;}
.map-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;}
.map-wrap canvas.dragging{cursor:grabbing;}
.map-wrap canvas.over-city{cursor:pointer;}
.map-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.9rem;}
.map-loading[hidden]{display:none;}
.map-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(15,23,40,.78);color:#fff;padding:10px 16px;border-radius:10px;font-size:.88rem;font-weight:600;pointer-events:none;z-index:4;}
.map-zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:3;}
.map-zbtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:1.1rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow-sm);font-family:inherit;line-height:1;padding:0;}
.map-zbtn:hover{border-color:var(--accent);color:var(--accent-strong);}

/* Hover / tap card */
.map-card-pop{position:absolute;left:0;top:0;z-index:5;min-width:220px;max-width:min(300px,calc(100% - 16px));background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:10px 12px 11px;font-size:.82rem;pointer-events:none;}
.map-card-pop.pinned{pointer-events:auto;}
.map-card-pop[hidden]{display:none;}
.pop-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.pop-name{font-weight:800;font-size:.95rem;line-height:1.25;}
.pop-country{color:var(--muted);font-size:.78rem;}
.pop-x{margin:-4px -6px 0 0;}
.pop-big{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-weight:700;font-size:1.15rem;margin-top:6px;}
.pop-local{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.84rem;}
.pop-what{color:var(--muted);font-size:.74rem;margin-top:1px;}
.pop-rows{margin-top:8px;border-top:1px solid var(--border);padding-top:6px;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;}
.pop-rows span:nth-child(odd){color:var(--muted);}
.pop-rows span:nth-child(even){text-align:right;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;}
.pop-rel{margin-top:7px;font-weight:600;}
.neg{color:var(--negative-em);}
.nowrap{white-space:nowrap;}

/* ── Table ───────────────────────────────────────────────────────────── */
.table-card{padding:16px 18px;margin-bottom:18px;}
.table-tools{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:10px 0 6px;}
.table-tools .txt-input{max-width:280px;padding:8px 11px;font-size:.88rem;}
.table-tools .unit-note{margin:0;}
.city-table{font-size:.82rem;}
.city-table th{position:sticky;top:0;background:var(--panel);z-index:1;text-align:left;font-family:'DM Sans',sans-serif;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
.city-table th.num,.city-table td.num{text-align:right;}
.city-table td{padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
.city-table td.name{font-family:'DM Sans',sans-serif;font-weight:600;}
.city-table td.ctry{font-family:'DM Sans',sans-serif;color:var(--muted);}
.city-table tbody tr{cursor:pointer;}
.city-table tbody tr:hover td{background:var(--input-bg);}
.city-table tr.home td{background:var(--positive-bg);}
.city-table .sw{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:0;}
.table-wrap{max-height:520px;}
.assumptions{margin:0;padding-left:18px;color:var(--muted);font-size:.88rem;line-height:1.55;}
.assumptions li{margin:4px 0;}
.assumptions strong{color:var(--text);}

@media(max-width:1300px){ .metrics{grid-template-columns:repeat(2,1fr);} }
@media(max-width:1100px){ .controls{max-height:none;} }
@media(max-width:600px){
  .metrics{grid-template-columns:1fr 1fr;}
  .map-card{padding:12px 10px 10px;}
  .map-wrap{height:62vh;min-height:380px;}
  .map-zoom{right:6px;top:6px;}
  .map-zbtn{width:32px;height:32px;}
}
@media(max-width:400px){ .metrics{grid-template-columns:1fr;} }