/* Esteban — the project switcher. A pill in the header that opens a list.

   Same surfaces as everything else on the site: the glass tokens from
   chrome.css where they exist, plain --card/--border where they don't (the
   Pokédex pages carry their own stylesheet and never link chrome.css). */

.projwrap{position:relative;flex:none}

.projbtn{
  display:flex;align-items:center;gap:9px;
  max-width:210px;
  padding:5px 12px 5px 5px;
  border:1px solid var(--glass-brd,var(--border));
  border-radius:var(--r-pill,999px) !important;
  background:var(--glass-soft,var(--card));
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  color:var(--gray);
  font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.projbtn:hover{border-color:var(--cyan);transform:translateY(-1px)}
.projbtn:active{filter:brightness(.9)}
.projbtn[aria-expanded="true"]{border-color:var(--cyan)}

.projava{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:var(--well,var(--hover));
  color:var(--cyan);
  font-size:14px;font-weight:700;line-height:1;
  letter-spacing:-.2px;
}
.projava img{width:100%;height:100%;object-fit:cover;display:block}

.projname{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.projchev{flex:none;font-size:10px;color:var(--muted);line-height:1}

/* --------------------------------------------------------------- the menu */

.projmenu{
  position:absolute;right:0;top:calc(100% + 9px);z-index:60;
  width:284px;max-width:78vw;
  padding:10px;
  border:1px solid var(--glass-brd,var(--border));
  border-radius:var(--r-card,20px);
  background:var(--glass-bg,var(--card));
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-sh,0 8px 24px rgba(0,0,0,.28));
  text-align:left;
}
.projmenu[hidden]{display:none}

.projlbl{
  margin:2px 0 8px 8px;
  color:var(--muted);
  font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
}

.projlist{list-style:none;margin:0;padding:0;max-height:46vh;overflow:auto}
.projlist li{margin:0 0 2px}

.projpick{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:var(--r-panel,18px) !important;
  background:none;color:var(--gray);
  font:inherit;font-size:14px;text-align:left;
  cursor:pointer;
}
.projpick:hover{background:color-mix(in srgb, var(--gray) 10%, transparent)}
.projpick[aria-current="true"]{border-color:var(--cyan);color:var(--cyan)}
.projpick .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.projpick .f{
  flex:none;color:var(--muted);font-size:11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.projsep{height:1px;margin:9px 4px;background:var(--border);border:0;opacity:.7}

.projacts{display:flex;flex-wrap:wrap;gap:6px}
.projacts button{
  flex:1 1 auto;
  padding:7px 11px;
  border:1px solid var(--glass-brd,var(--border));
  border-radius:var(--r-pill,999px) !important;
  background:var(--glass-soft,var(--well,var(--card)));
  color:var(--gray);
  font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;
}
.projacts button:hover{border-color:var(--cyan);color:var(--cyan)}
.projacts button.danger{color:var(--coral)}
.projacts button.danger:hover{border-color:var(--coral)}
.projacts button[disabled]{opacity:.4;cursor:default}
.projacts button[disabled]:hover{border-color:var(--glass-brd,var(--border));color:var(--gray)}

/* ------------------------------------------------------------- the form */

.projform{margin:9px 0 0}
.projform[hidden]{display:none}
.projform label{
  display:block;margin:0 0 5px 3px;
  color:var(--muted);font-size:11px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;
}
.projform input[type=text]{
  width:100%;box-sizing:border-box;
  padding:8px 13px;margin:0 0 9px;
  border:1px solid var(--border);
  border-radius:var(--r-pill,999px) !important;
  background:var(--well,var(--card));color:var(--gray);
  font:inherit;font-size:14px;
}
.projform input[type=text]:focus{outline:2px solid var(--cyan);outline-offset:1px}
.projform .row{display:flex;gap:8px;align-items:flex-end}
.projform .row .g{flex:1;min-width:0}
.projform .row .g.narrow{flex:0 0 74px}

.projdots{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px 1px}
.projdots button{
  width:20px;height:20px;padding:0;
  border:1px solid var(--glass-brd,var(--border));
  border-radius:50% !important;
  cursor:pointer;
}
.projdots button[aria-pressed="true"]{
  box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--cyan);
}

.projmsg{margin:8px 3px 0;color:var(--muted);font-size:12px;min-height:1em}
.projmsg.bad{color:var(--coral)}
.projmsg.good{color:var(--mint)}

@media (max-width:600px){
  .projbtn{max-width:150px;padding:4px 10px 4px 4px;font-size:13px}
  .projava{width:26px;height:26px;font-size:12px}
  .projmenu{width:264px}
}

/* On the app pages the header is .topline / .navdock, which wraps its nav
   onto its own line on a narrow screen. The pill rides with it. */
@media (max-width:600px){
  .topline .projwrap{order:-1}
}

/* ------------------------------------------------ the panel on Settings */

.projrow{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  padding:11px 4px;
  border-bottom:1px solid var(--border);
}
.projrow:last-of-type{border-bottom:0}
.projrow.on .projava{box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--cyan)}
.projrow .projava{width:40px;height:40px;font-size:16px}
.projwho{flex:1;min-width:140px;line-height:1.45}
.projwho strong{font-size:15px;color:var(--gray)}
.projtag{
  margin-left:8px;padding:1px 8px;
  border-radius:var(--r-pill,999px);
  background:color-mix(in srgb, var(--cyan) 18%, transparent);
  color:var(--cyan);font-size:10.5px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
}
.projfolder{color:var(--muted);font-size:12px}
.projbar{flex:none;margin:0;gap:6px;flex-wrap:wrap}

/* --------------------------------------------- what the folder scan found */

.scanlist{margin:12px 0 0}
.scanlist[hidden]{display:none}

.scanrow{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  padding:10px 4px;
  border-bottom:1px solid var(--border);
}
.scanrow:last-child{border-bottom:0}
.scanwho{flex:1;min-width:150px;line-height:1.5}
.scanwho strong{font-size:14.5px;color:var(--gray)}
.scanbar{flex:none;margin:0;gap:6px;flex-wrap:wrap}
.scannote{color:var(--muted);font-size:12px}

.scanpoint{
  flex-basis:100%;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:2px 0 6px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-panel,18px);
  background:var(--well,var(--card));
}
.scanpoint[hidden]{display:none}
.scanpointlbl{
  flex:none;color:var(--muted);font-size:11px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;
}
.scanpick{
  flex:1;min-width:170px;max-width:100%;
  padding:7px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-pill,999px) !important;
  background:var(--card);color:var(--gray);
  font:inherit;font-size:13px;
}
.scanpick:focus{outline:2px solid var(--cyan);outline-offset:1px}

/* ------------------------------------------------------------ folder map

   Two trees on settings/foldermap.html, drawn with box characters. The
   monospace is the point: the connectors only line up if every glyph is the
   same width. */

.maptree2{
  margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:12.5px;line-height:1.65;
  overflow-x:auto;
}
.maptree2 .mrow{white-space:pre;display:block}
.maptree2 .mroot{margin-bottom:2px}
.maptree2 .mpre{color:var(--border)}
.maptree2 .mname{color:var(--gray)}
.maptree2 .mname.mdir{color:var(--cyan);font-weight:600}
.maptree2 .mname.mnote{color:var(--muted);font-style:italic}
.maptree2 .mwhy{color:var(--muted);font-style:italic;padding-left:10px}

@media (max-width:600px){
  .maptree2{font-size:11.5px}
  .maptree2 .mwhy{display:none}
}

/* the link to the map page, dimmed while there is no folder to map */
.btn.off{opacity:.45;pointer-events:none}

/* ------------------------------------------------------- links as buttons

   `.btn` was written for <button>, which centres its own label and is never
   underlined. An <a> wearing the same class gets neither for free — the map
   link on the folder page and the cross-links between settings pages are
   both anchors, and both looked wrong until this. */
.btn[href],
a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  box-sizing:border-box;
}

/* -------------------------------------------------- a card with an "i" on it

   The Settings pages put their label and its info button in a `.setuphead`
   above the card. An app page's label lives inside the card instead, so the
   two sit in a row of their own at the top of it — same idea, same button,
   one level in. */
.cardhead{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:13px;
}
.cardhead .cardlbl{margin-bottom:0}
.cardhead .infobtn{flex:none}

/* The panel that "i" opens, when it lives inside a card rather than under a
   `.setuphead`. Scoped to `.card > .info` so the Settings pages, which put
   theirs outside the card and style them in desk.css, are left alone.

   `.hint` itself is a desk.css rule, and the app pages don't load desk.css —
   so the text needs its own colour and spacing here or it comes out as body
   copy with no room around it. */
.card > .info{margin:0 0 14px}
.card > .info .hint{
  color:var(--muted);
  font-size:12.5px;line-height:1.55;
  margin:0 0 9px;
}
.card > .info .hint:last-child{margin-bottom:0}
.card > .info .hint b{color:var(--gray)}
.card > .info .hint code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;color:var(--gray);
}