/* Pathfinder (dashboard/pathfinder.js). Every colour, size and space is a token
   from tracker.css, so both themes follow without a rule of their own here. */

/* ---- the box: two rows of chips with a field at the end of each ---------- */
.pf-box{overflow:visible}
.pf-box form{position:relative}
.pf-row{
  display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:var(--s4);
  padding:var(--s3) var(--s6);border-bottom:1px solid var(--border);cursor:text;
}
.pf-row label{font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--fg)}
.pf-field{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);min-height:34px;min-width:0}
.pf-field>span{display:contents}
.pf-field input{
  flex:1;min-width:180px;height:30px;border:0;outline:none;background:none;
  font-size:var(--t-body);color:var(--fg);
}
.pf-field input::placeholder{color:var(--faint)}
.pf-field input:disabled{min-width:0;flex:0 0 0}
.pf-row:focus-within{background:var(--stripe)}
.pf-chip{
  display:inline-flex;align-items:center;gap:var(--s1);height:27px;padding:0 var(--s1) 0 var(--s3);
  border-radius:var(--r-pill);background:var(--chip-on-bg);color:var(--chip-on-fg);
  font-size:var(--t-xs);font-weight:var(--w-semi);white-space:nowrap;
}
.pf-chip button{
  width:20px;height:20px;border-radius:50%;color:inherit;opacity:.75;font-size:15px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.pf-chip button:hover{opacity:1;background:color-mix(in srgb,var(--chip-on-fg) 18%,transparent)}
.pf-actions{display:flex;justify-content:flex-end;padding:var(--s3) var(--s6);background:var(--raised);
  border-radius:0 0 var(--r-lg) var(--r-lg)}
.pf-actions .btn:disabled{opacity:.45;cursor:not-allowed}

.pf-suggest{
  position:absolute;z-index:30;left:calc(112px + var(--s6) + var(--s4));right:var(--s6);
  max-height:320px;overflow:auto;padding:var(--s1) 0;
  background:var(--card);border:1px solid var(--border-firm);border-radius:var(--r);box-shadow:var(--e3);
}
.pf-suggest[hidden]{display:none}
.pf-sg{display:flex;align-items:baseline;gap:var(--s3);padding:6px var(--s4);font-size:var(--t-sm);cursor:pointer}
.pf-sg span:first-child{flex:1;min-width:0}
.pf-sg.on,.pf-sg:hover{background:var(--hover)}
.pf-sg-via{font-size:var(--t-xs);color:var(--faint);white-space:nowrap}
.pf-sg-group{padding:var(--s3) var(--s4) 2px;font-size:var(--t-xs);color:var(--faint);font-weight:var(--w-semi)}
.pf-sg-none{padding:var(--s3) var(--s4);font-size:var(--t-sm);color:var(--faint)}

/* ---- coverage rows add a country ---------------------------------------- */
.pf-add{text-align:left;color:var(--fg)}
.pf-add:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ---- the answer ---------------------------------------------------------- */
.pf-tabs{display:flex}
.pf-country[hidden]{display:none}
.pf-country-head h2{font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:var(--tr-h1);font-weight:var(--w-semi)}
.pf-summary{margin-top:var(--s3);max-width:84ch;font-size:var(--t-h3);line-height:1.55;color:var(--fg);
  padding-left:var(--s5);border-left:2px solid var(--accent)}
.pf-country-head .faint{margin-top:var(--s2)}
.pf-limits{
  padding:var(--s4) var(--s5);border:1px solid var(--warn-bd);border-radius:var(--r);
  background:var(--warn-bg);color:var(--warn-fg);font-size:var(--t-sm);
}
.pf-limits ul{margin:var(--s2) 0 0;padding-left:var(--s5);list-style:disc}
.pf-limits li+li{margin-top:var(--s1)}

.dt.pf-class tbody td{vertical-align:top}
.dt.pf-class tbody td:first-child{width:22%}
.dt.pf-class tbody td:last-child{width:26%}
.pf-ask{color:var(--accent);font-weight:var(--w-medium);font-size:var(--t-xs);margin-left:var(--s2)}
.pf-ask:hover{text-decoration:underline;text-underline-offset:3px}

.pf-lics{display:flex;flex-direction:column;gap:var(--s6);border-top:1px solid var(--border)}
.pf-lic h4,.pf-line h4{font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);font-weight:var(--w-semi)}
.pf-lic .kv{margin-top:var(--s2)}
.pf-lic .kv-row dd a,.pf-src a,.pf-cell a{color:var(--accent)}
.pf-lic .kv-row dd a:hover,.pf-src a:hover,.pf-cell a:hover{text-decoration:underline;text-underline-offset:3px}
.pf-route{padding:var(--s5);border:1px solid var(--border);border-radius:var(--r);display:flex;flex-direction:column;gap:var(--s3)}
.pf-route h3{font-size:var(--t-h3);font-weight:var(--w-semi)}
.pf-route>p{font-size:var(--t-sm);color:var(--muted-fg);max-width:84ch}
.pf-route-lines{display:flex;flex-direction:column;gap:var(--s4)}

.pf-lines{display:flex;flex-direction:column;gap:0;padding-top:0;padding-bottom:0}
.pf-line{padding:var(--s5) 0;border-bottom:1px solid var(--border)}
.pf-lines>.pf-line:last-child,.pf-group:last-child>.pf-line:last-child{border-bottom:0}
.pf-line-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3)}
.pf-line p{margin-top:var(--s2);max-width:88ch;font-size:var(--t-body);color:var(--fg)}
.pf-val{font-family:var(--mono);font-size:var(--t-num);font-weight:var(--w-medium);color:var(--accent);
  padding:2px var(--s2);border-radius:var(--r-sm);background:var(--accent-tint)}
.pf-tier{font-size:var(--t-xs);color:var(--muted-fg);padding:2px var(--s2);border:1px solid var(--border);border-radius:var(--r-pill)}
.pf-group-name{padding:var(--s5) 0 0;font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--muted-fg)}
.pf-group+.pf-group{border-top:1px solid var(--border)}
.pf-more{margin-top:var(--s2);font-size:var(--t-sm)}
.pf-more summary{cursor:pointer;color:var(--accent);font-weight:var(--w-medium);width:max-content}
.pf-more p{color:var(--muted-fg);white-space:pre-line}
.pf-src{display:flex;align-items:baseline;gap:var(--s2);margin-top:var(--s3);font-size:var(--t-xs);line-height:1.5;color:var(--muted-fg)}
.pf-src .src-chip{flex:none}
.pf-class .pf-src{margin-top:var(--s2)}

/* ---- side by side -------------------------------------------------------- */
.pf-cmp th[scope="row"]{text-align:left;font-weight:var(--w-semi);color:var(--fg);width:17%;vertical-align:top;
  padding:var(--s3) var(--s5);border-bottom:1px solid var(--border);font-size:var(--t-sm)}
.dt.pf-cmp tbody td{vertical-align:top}
.pf-cmp thead th{font-size:var(--t-sm);color:var(--fg);font-weight:var(--w-semi);text-transform:none;letter-spacing:0}
.pf-cell+.pf-cell{margin-top:var(--s3);padding-top:var(--s3);border-top:1px dashed var(--border)}

@media (max-width:760px){
  .pf-row{grid-template-columns:1fr;gap:var(--s1)}
  .pf-suggest{left:var(--s6)}
}