/* 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);
}

body{
  background-color:transparent;
}

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),
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 */
#chip,
#pick{
  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}
.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%}
.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:34px;height:34px;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:17px;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}
  .topline{gap:10px;margin-bottom:20px}
  .topline .navdock{gap:7px}
  .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}
}