/* Esteban — shared chrome. Glass surfaces, corner radii, press feedback.
   Every page links this AFTER its own <style>, so it stays last in the cascade
   exactly where each page used to carry its own copy. */

:root{
  --glass-blur:blur(20px) saturate(180%);
  --glass-bg:color-mix(in srgb, var(--card) 70%, transparent);
  --glass-soft:color-mix(in srgb, var(--well, var(--card)) 62%, transparent);
  --glass-brd:color-mix(in srgb, var(--gray) 13%, transparent);
  --glass-hi:color-mix(in srgb, var(--gray) 15%, transparent);
  --glass-sh:0 8px 24px rgba(0,0,0,.28);
  --r-card:20px;
  --r-panel:18px;
  --r-pill:999px;
}

html[data-color-mode="light"]{
  --glass-bg:color-mix(in srgb, var(--card) 62%, transparent);
  --glass-soft:color-mix(in srgb, var(--card) 55%, transparent);
  --glass-brd:color-mix(in srgb, var(--navy) 14%, transparent);
  --glass-hi:color-mix(in srgb, #fff 70%, transparent);
  --glass-sh:0 8px 24px rgba(0,0,0,.10);
}

html{
  background:var(--navy);
}

/* Every page sets its own body font; this one arrives last and hands the job
   to a variable instead, with that same stack as the fallback inside it. So
   with nothing set the site reads exactly as it did before, and Settings →
   Typeface only has to point `--font-ui` somewhere else to move the whole
   thing. The monospace blocks name their own family and are left alone. */
body{
  background-color:transparent;
  font-family:var(--font-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif);
}

/* Form controls don't inherit type from the page — left alone, a browser
   draws them in its own Arial. Most already say `font:inherit` one by one;
   this catches the ones that were missed, so nothing is left reading in a
   different face from the text beside it. Anything deliberately monospace
   says so on a class, which outranks this. */
input,select,textarea,button{
  font-family:inherit;
}

body::before{
  content:"";
  position:fixed;
  inset:-25%;
  z-index:-1;
  pointer-events:none;
  background: radial-gradient(34% 28% at 16% 10%, color-mix(in srgb, var(--cyan) 30%, transparent), transparent 70%), radial-gradient(30% 26% at 84% 20%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 70%), radial-gradient(38% 32% at 50% 86%, color-mix(in srgb, var(--teal) 26%, transparent), transparent 72%);
  filter:blur(48px);
}

html[data-color-mode="light"] body::before{
  opacity:.55;
}

.pane,
.card,
.tile,
details,
.folder,
.storage,
.pokelink,
.linkout{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-color:var(--glass-brd);
  box-shadow:var(--glass-sh), inset 0 1px 0 var(--glass-hi);
}
.pane,
.card,
details,
.folder,
.storage,
.pokelink{
  border-radius:var(--r-card);
}


.btn,
.chip,
.fbtn,
.opt,
.snd,
.editbtn,
.seg button,
.modes button,
.segtog,
.shelfrow{
  background:var(--glass-soft);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-color:var(--glass-brd);
}@media (hover:hover) and (pointer:fine){.btn:not(.primary):not(.go):not([aria-pressed="true"]):hover, .fbtn:not([aria-pressed="true"]):hover, .seg button:not([aria-pressed="true"]):hover, .modes button:not([aria-selected="true"]):hover{ background:color-mix(in srgb, var(--gray) 10%, var(--glass-soft)); }
}


textarea,
.kgrid input,
pre,
.tile,
.chip{
  border-radius:var(--r-panel);
}

button:not(.mon):not(.evo):not(.chip):not(.tile):not(.poke),
a.btn,
.btn,
.go,
.spin,
.addbtn,
.ico,
.back,
.danger,
.util,
.op,
.fn,
.k,
.eq,
input[type=button],
input[type=submit],
input[type=reset],
select,
input[type=text],
input[type=search],
input[type=url],
input[type=email],
input[type=number],
input[type=password],
input[type=date],
input[type=time],
.seg > button,
.segtog,
.segtog > button{
  border-radius:var(--r-pill) !important;
}

.mon,
.evo,
.chip,
.tile{
  border-radius:var(--r-panel) !important;
}

/* the Colors pages: the big read-out and the picker swatch are both discs.
   The ids cover the pages with a single colour block; .disc is for the ones
   carrying more than one, where the ids have to be prefixed to stay unique. */
#chip,
#pick,
.disc{
  border-radius:50% !important;
}@media (max-width:600px){.prefstog{gap:6px}
.segtog{padding:2px}
.segtog button{min-width:32px;height:27px;padding:0 9px;font-size:11px}
.segtog.modesw button{min-width:30px;padding:0 8px}
.segtog button svg{width:14px;height:14px}
}


.seg{
  border-radius:0;
  overflow:visible;
}button:active,
.btn:active,
a.btn:active,
.chip:active,
.k:active,
.seg button:active,
.modes button:active,
.segtog button:active,
.subscribe:active,
.go:active,
.spin:active,
.addbtn:active,
.newbtn:active,
.pokelink:active,
.back:active{
  filter:brightness(.86);
}
@media (hover:hover) and (pointer:fine){.btn.primary:hover, .btn.primary:hover:not(:disabled), .btn[aria-pressed="true"]:hover, .fbtn[aria-pressed="true"]:hover, .chip[aria-pressed="true"]:hover, .seg button[aria-pressed="true"]:hover, .modes button[aria-selected="true"]:hover, .segtog button[aria-pressed="true"]:hover, .viewsw button[aria-pressed="true"]:hover, .editbtn[aria-pressed="true"]:hover, .subscribe:hover, .k.eq:hover, .spin:hover, .addbtn:hover, .newbtn:hover, .go:hover:not(:disabled), .btn.go:hover{ filter:brightness(.92); }
.btn.primary:active, .btn.primary:hover:active, .btn[aria-pressed="true"]:active, .seg button[aria-pressed="true"]:active, .segtog button[aria-pressed="true"]:active, .subscribe:active, .k.eq:active, .go:active:not(:disabled), .btn.go:active{ filter:brightness(.86); }
}


.previewhead .pvtog{
  margin-left:auto;
  font-size:12.5px;
  padding:6px 14px;
  min-height:0;
}

#preview[hidden]{
  display:none;
}

.pokelink{
  background:linear-gradient(120deg,color-mix(in srgb, #EE1515 28%, transparent),color-mix(in srgb, #EE1515 12%, transparent));
  border-color:color-mix(in srgb, #EE1515 65%, transparent);
}

.pokelink:hover{
  background:linear-gradient(120deg,color-mix(in srgb, #EE1515 38%, transparent),color-mix(in srgb, #EE1515 18%, transparent));
  border-color:#EE1515;
}

/* the round site links at the foot of every tool page */
.navdock{display:flex;justify-content:center;align-items:center;gap:10px;margin:34px auto 0;flex-wrap:wrap}
.navdock a{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--well,var(--card));border:1px solid var(--border);color:var(--muted);text-decoration:none;
  overflow:hidden;transition:border-color .15s,color .15s,transform .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.navdock a:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.navdock a:active{filter:brightness(.86)}
.navdock a svg{width:23px;height:23px;fill:currentColor}
.navdock a.ball svg{width:27px;height:27px}
.navdock a img{width:100%;height:100%;object-fit:cover;padding:0;display:block;border-radius:50%}
.navdock a.home{border:0;background:var(--card);
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px color-mix(in srgb, var(--cyan) 35%, transparent)}
.navdock a.home:hover{box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--cyan)}@media(prefers-reduced-motion:reduce){.navdock a{transition:none}.navdock a:hover{transform:none}
}
/* --- desk pages (index / settings / apps) ------------------------------- */
.card,
#deskBoard.boxed .sec,
.note,
.nojs{border-radius:var(--r-card)}

.tile,.shelfrow,textarea,pre,.boxgrid,.orgrow,.boxopts,.quickbar{border-radius:var(--r-panel)}
.boxopts .step button:first-child{border-radius:var(--r-pill) 0 0 var(--r-pill)}
.boxopts .step button:last-child{border-radius:0 var(--r-pill) var(--r-pill) 0}
.boxchip,.orgchip{border-radius:12px}
/* the type chips in the Pokémon box, the same 7px the Pokédex gives them */
.pkw .type{border-radius:7px}
.orgchip .x,.boxres::before{border-radius:var(--r-pill)}
.linkout,.movers button,.secbtns button{border-radius:var(--r-pill) !important}
.head .mark{border-radius:50%}
.avanow,.avanow img,.avaopt,.avaopt img{border-radius:50% !important}
.syncrow{border-radius:var(--r-panel)}
.ico{border-radius:9px}
.tools[data-view="grid"] a.tile .ico{border-radius:26%}
.editbtn{border-radius:var(--r-pill) !important}@media (hover:hover) and (pointer:fine){.editbtn[aria-pressed="true"]:hover{filter:brightness(.92)}
}

.editbtn:active,.linkout:active{filter:brightness(.86)}

.head .gear{border-radius:50% !important}

/* --- the "i" panel: what this page is, folded away at the foot ----------
   The bar always sits at the foot of the page, hard against the right edge,
   so the button lands under the round site links rather than mid-column. */
.infobar{display:flex;justify-content:flex-end;margin:30px 0 0}
.infobtn{
  width:22px;height:22px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--well,var(--card));border:1px solid var(--border);color:var(--muted);
  font-family:Georgia,"Times New Roman",serif;font-size:12px;font-weight:700;font-style:italic;
  line-height:1;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s,transform .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.infobtn:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.infobtn:active{filter:brightness(.86)}
.infobtn[aria-expanded="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
.info{margin:16px auto 0;max-width:100%}
.info[hidden]{display:none}
.info > .sub{margin:0 0 14px}
.info > .note,.info > p.note{margin-top:12px}
.info > :first-child{margin-top:0}
@media(prefers-reduced-motion:reduce){.infobtn{transition:none}.infobtn:hover{transform:none}}

/* --- page header --------------------------------------------------------
   Title on the left, round site links on the right, one row. Same shape the
   Pokédex pages already use, so every page reads the same way.
   The subtitle used to sit between the title and the first block and carried
   the gap with it. It lives in the "i" panel now, so the title owns the gap. */
.topline{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;margin:0 0 24px}
.topline > h1{
  margin:0 auto 0 0;min-width:0;
  display:flex;align-items:center;gap:6px;
}
.topline > h1 > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topline > h1 > .pen{flex:none}
.topline .navdock{margin:0;flex:none;flex-wrap:nowrap;justify-content:flex-end}
.wrap > h1{margin-bottom:24px}
@media(max-width:600px){
  .wrap > h1{margin-bottom:20px}
  /* the round site links drop to their own row above the title instead of
     crowding it — same fix as the desk pages' .head */
  .topline{gap:10px;margin-bottom:20px;flex-wrap:wrap}
  .topline .navdock{gap:7px;order:-1;flex-basis:100%;justify-content:flex-end}
  .topline .navdock a{width:40px;height:40px}
  .topline .navdock a svg{width:20px;height:20px}
  .topline .navdock a.ball svg{width:23px;height:23px}
}
@media(max-width:380px){
  .topline .navdock{gap:5px}
  .topline .navdock a{width:36px;height:36px}
  .topline .navdock a svg{width:18px;height:18px}
  .topline .navdock a.ball svg{width:21px;height:21px}
}