/* Esteban — shared stylesheet for index.html and settings.html */

:root{
  --navy:#000116; --cyan:#17B4D8; --gray:#EAEBEC;
  --teal:#0A7FA3; --gold:#FCC615; --olive:#685C38;
  --mint:#2FE6B0; --coral:#FF6B6B; --sunset:#FF9F45;
  --card:#0a0d22; --border:#1c2340; --muted:#8b93ad;
  --well:#070a1c; --hover:#0d1230;
  --wheel-sat:70; --wheel-light:57;
  --accent:var(--cyan);
  --wrap:760px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--navy)}
body{
  background-color:transparent; color:var(--gray);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  line-height:1.6; min-height:100vh; padding:28px 20px 60px;
  display:flex; flex-direction:column; align-items:center;
}
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(--accent) 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}

.wrap{width:100%;max-width:var(--wrap);transition:max-width .2s ease}
body.narrow .wrap{max-width:760px}

/* ---------- brand head ---------- */
.head{display:flex;align-items:center;gap:14px;margin:0 4px 22px}
.head .mark{
  flex:0 0 64px;width:64px;height:64px;display:block;overflow:hidden;
  border:0;padding:0;background:none;
  box-shadow:0 0 0 3px var(--navy), 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent);
  transition:box-shadow .15s ease, transform .15s ease;
}
.head .mark img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
a.mark{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a.mark:hover{transform:translateY(-2px);box-shadow:0 0 0 3px var(--navy), 0 0 0 5px var(--accent)}
a.mark:active{filter:brightness(.86)}
.head .hnav{flex:none;display:flex;align-items:center;gap:16px}
/* the big avatar: sandbox-style ring, sitting to the left of the title */
.head.big{gap:20px;margin-bottom:26px}
.head.big .mark{flex-basis:104px;width:104px;height:104px}
.head.big h1{font-size:31px}
.head.big .tag{font-size:15px}
@media(max-width:600px){
  .head.big{gap:15px}
  .head.big .mark{flex-basis:78px;width:78px;height:78px}
  .head.big h1{font-size:26px}
  .head.big .tag{font-size:13px}
}
@media(max-width:400px){
  .head.big{gap:12px}
  .head.big .mark{flex-basis:64px;width:64px;height:64px}
  .head.big h1{font-size:23px}
}

.head .who{flex:1;min-width:0}
.head h1{font-size:27px;letter-spacing:-.4px;line-height:1.15;margin:0}
.head .tag{color:var(--accent);font-size:14px;font-weight:600;letter-spacing:normal;text-transform:none;margin:0}
.head .pen{
  background:none;border:0;color:var(--border);font:inherit;font-size:15px;
  cursor:pointer;vertical-align:middle;padding:2px 6px;margin-left:6px;
}
.head .pen:hover{color:var(--accent)}
.head .pen[hidden]{display:none}
.head .gear{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;overflow:hidden;border-radius:50%;
  background:var(--card);border:0;color:var(--muted);text-decoration:none;
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent);
  transition:color .15s, box-shadow .15s ease, transform .15s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.head .gear:hover{color:var(--accent);transform:translateY(-2px);
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--accent)}
.head .gear svg{width:29px;height:29px;fill:currentColor;transition:transform .35s ease}
.head .gear.cog:hover svg{transform:rotate(60deg)}
.head .gear.ball svg{width:100%;height:100%;transition:none}
/* the home link carries the same avatar as the mark on the desk itself */
.head .gear.avatar{background:none}
.head .gear.avatar img{width:100%;height:100%;object-fit:cover;display:block}
@media(prefers-reduced-motion:reduce){
  .head .gear,.head .gear svg{transition:none}
  .head .gear:hover{transform:none}
  .head .gear.cog:hover svg{transform:none}
}
@media(max-width:480px){
  .head{gap:11px}
  .head .mark{flex-basis:52px;width:52px;height:52px}
  .head h1{font-size:23px}
  .head .tag{font-size:13px}
  .head .hnav{gap:13px}
  .head .gear{width:46px;height:46px}
  .head .gear svg{width:26px;height:26px}
}

/* ---------- generic surfaces ---------- */
.card{background:var(--card);border:1px solid var(--border);padding:18px 20px;margin-bottom:14px}
.back{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;
  background:var(--card);border:1px solid var(--border);
  padding:0 18px;min-height:46px;
  transition:border-color .15s,color .15s,background .15s,transform .06s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.back:hover{color:var(--accent);border-color:var(--accent);background:var(--hover)}
.back.dash{display:flex;width:max-content;max-width:100%;margin:34px auto 0}

.toolbar{display:flex;align-items:center;gap:8px;margin:0 4px 14px;flex-wrap:wrap}
/* the same row of options, sitting under the board instead of over it */
.toolbar.bottom{margin:22px 4px 0}
.editbtn{
  background:var(--well);border:1px solid var(--border);color:var(--muted);
  font:inherit;cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  height:36px;padding:0 13px;font-size:12.5px;font-weight:700;letter-spacing:.3px;
}
.editbtn:hover{border-color:var(--accent);color:var(--gray)}
.editbtn.right{margin-left:auto}
.editbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--navy)}
.editbtn[hidden]{display:none}

/* The quick-add row reads as one panel rather than five controls loose on the
   page, and every control shares a height so the row lines up. */
.quickbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 16px;padding:13px 14px;
  background:var(--well);border:1px solid var(--border);
}
.quickbar[hidden]{display:none}
.quickbar input,
.quickbar select{
  flex:1 1 200px;min-width:0;height:44px;
  background:var(--card);border:1px solid var(--border);
  color:var(--gray);font:inherit;font-size:14px;padding:0 14px;
}
.quickbar select{flex:0 1 170px;cursor:pointer}
.quickbar input:focus,
.quickbar select:focus{outline:none;border-color:var(--accent)}
.quickbar input.bad{border-color:var(--coral)}
.quickbar .btn{flex:none;height:44px;padding:0 20px;font-size:13.5px}
@media(max-width:620px){
  .quickbar{gap:8px;padding:11px}
  .quickbar input,.quickbar select{flex:1 1 100%}
  .quickbar .btn{flex:1 1 0;padding:0 14px}
}

/* ---------- the board ----------
   Plain stacked sections: apps.html and the settings previews use this. */
.sec{margin:0 0 8px;min-width:0}
.sechead{display:flex;align-items:center;gap:8px;margin:22px 4px 12px}

/* The desk (index.html) adds .boxed: every section becomes a box on a
   12-column grid. x/w/y come from the section's saved box; a row is as tall
   as its tallest box and boxes sit at the top of it rather than stretching.
   Below 720px the grid is dropped and the boxes stack in the order they are
   written, which is reading order because layoutNormalize() sorts them so. */
#deskBoard.boxed{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:14px;align-items:start;
}
#deskBoard.boxed .sec{
  grid-column:calc(var(--bx) + 1) / span var(--bw);
  grid-row:calc(var(--by) + 1);
  margin:0;
  background:var(--card);border:1px solid var(--border);
  padding:15px 16px 17px;
  transition:border-color .15s ease;
}
/* The header is a hair taller in Reorder mode, where its buttons are 30px.
   Holding it at that height in both states keeps the squares area from
   shifting when you turn Reorder on. */
#deskBoard.boxed .sechead{margin:0 0 12px;min-height:30px}
#deskBoard.boxed .sec.folded{padding-bottom:15px}
#deskBoard.boxed .sec.dragover{border-color:var(--accent)}

/* A box with a height set keeps exactly that height; the header stays put and
   the squares scroll inside it. min-height:0 on the scroller is what lets a
   flex child shrink below its content instead of pushing the box taller. */
/* --bctl is the height the Reorder controls take up, measured in JS. Adding
   it keeps the squares area at exactly the height you chose instead of the
   strip eating into it. It is 0px whenever the strip is not there. */
#deskBoard.boxed .sec.fixedh{height:calc(var(--bh) + var(--bctl, 0px));display:flex;flex-direction:column}
#deskBoard.boxed .sec.fixedh .sechead,
#deskBoard.boxed .sec.fixedh .secctl{flex:none}
#deskBoard.boxed .sec.fixedh .tools{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
#deskBoard.boxed .sec.fixedh .tools[data-view="grid"]{align-content:flex-start}

/* Top-aligned stacking. Rows are dropped and each box is placed at the lowest
   free point across the columns it spans, so a short box does not leave dead
   space under it — the next box in that column rises to meet it. Positions are
   worked out in JS because they depend on measured heights; the grid rules
   above stay as the fallback whenever this class is off. */
#deskBoard.boxed.masonry{display:block;position:relative}
#deskBoard.boxed.masonry .sec{position:absolute;margin:0}

@media(max-width:720px){
  #deskBoard.boxed{display:block}
  #deskBoard.boxed .sec{margin:0 0 14px}
  /* Stacked on a phone, a scroller inside a scroller is more nuisance than
     help — the boxes just run their natural length. */
  #deskBoard.boxed .sec.fixedh{height:auto;display:block}
  #deskBoard.boxed .sec.fixedh .tools{overflow:visible}
  /* One column: the measured positions are meaningless, so they are overruled
     rather than unset, which keeps the JS out of the responsive logic. */
  #deskBoard.boxed.masonry{height:auto !important}
  #deskBoard.boxed.masonry .sec{position:static;width:auto !important;margin:0 0 14px}
}
.sectitle{flex:1;min-width:0;font-size:inherit;font-weight:inherit}
.sectoggle{
  display:flex;align-items:center;gap:9px;width:100%;min-width:0;
  background:none;border:0;padding:4px 0;margin:0;font:inherit;text-align:left;
  color:var(--muted);cursor:pointer;transition:color .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.sectoggle:hover{color:var(--accent)}
.sectoggle .chev{flex:none;font-size:9px;line-height:1;transition:transform .15s ease}
.sectoggle[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.sectoggle .n{
  font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.secbtns{display:flex;gap:5px}
.secbtns button{
  width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--well);border:1px solid var(--border);color:var(--muted);
  font:inherit;font-size:13px;line-height:1;cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.secbtns button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.secbtns button.del:hover{border-color:var(--coral);color:var(--coral)}
.secbtns button:disabled{opacity:.3;cursor:default}
/* Size and density for one box, under its header while the desk is in
   Reorder mode. Wraps to as many lines as the box is narrow enough to need. */
.secctl{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin:0 0 12px;padding:9px 10px;
  background:var(--well);border:1px solid var(--border);
}
/* On apps.html the strip carries one control, so it hugs it instead of
   stretching the width of the page. */
#deskBoard:not(.boxed) .secctl{width:max-content;max-width:100%}
.secctl .step button{width:29px;height:29px;font-size:14px;background:var(--card)}
.secctl .step .n{min-width:30px;font-size:12.5px}
.secctl .step .n.wide{min-width:50px}
.secctl .lbl2{font-size:11px;letter-spacing:.4px}
.secctl .seg{margin:0}
.secctl .seg button{min-height:29px;padding:0 10px;font-size:11.5px}
@media(max-width:560px){
  .secctl{gap:6px;padding:8px}
  .secctl .lbl2{display:none}
}

.sec.dragover .sectoggle{color:var(--accent)}
.sec.folded .sechead{margin-bottom:0}
.sec.folded .sectoggle .n{color:var(--accent)}

/* ---------- tiles ---------- */
.tools{display:grid;gap:10px}
a.tile{
  position:relative;display:flex;align-items:center;gap:14px;text-decoration:none;
  background:var(--card);border:1px solid var(--border);
  padding:14px 18px;
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
a.tile:hover{border-color:var(--accent);transform:translateY(-2px);background:var(--hover)}
a.tile .nm{display:block;color:var(--gray);font-size:15px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.tile .blurb{display:block;color:var(--muted);font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.tile .txt{flex:1;min-width:0}
.arrow{color:var(--border);font-size:17px;transition:color .15s}
a.tile.local .arrow{color:color-mix(in srgb, var(--accent) 45%, transparent)}

.ico{
  flex:0 0 34px;height:34px;overflow:hidden;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-weight:800;font-size:14px;letter-spacing:.5px;
}
.ico img{width:100%;height:100%;object-fit:contain;padding:5px;display:block}
.ico svg{width:17px;height:17px;fill:var(--accent)}

.tools[data-view="grid"]{--tc:6;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px}
.tools[data-view="grid"] a.tile{
  flex:0 0 calc((100% - 40.5px) / 6);
  aspect-ratio:1/1;flex-direction:column;justify-content:center;
  text-align:center;gap:7px;padding:8px 5px;
}
.tools[data-view="grid"] .empty{flex:1 1 100%}
.tools[data-view="grid"] a.tile .ico{
  flex:none;width:46%;height:auto;aspect-ratio:1/1;
  min-width:28px;max-width:56px;
  font-size:clamp(12px, 1.5vw, 19px);
}
.tools[data-view="grid"] a.tile .ico img{padding:4px}
.tools[data-view="grid"] a.tile .ico svg{width:20px;height:20px}
.tools[data-view="grid"] a.tile .txt{flex:none;width:100%}
.tools[data-view="grid"] a.tile .nm{font-size:13px;line-height:1.25;white-space:normal;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tools[data-view="grid"] a.tile .blurb,
.tools[data-view="grid"] a.tile .arrow{display:none}
.tools[data-view="list"]{grid-template-columns:1fr}
/* A widget box hands its whole area to one panel. */
.tools.widget{display:block}

.movers{position:absolute;inset:auto 4px 5px 4px;display:none;gap:3px;justify-content:center}
.tools.editing .movers{display:flex}
.tools.editing a.tile{transform:none;cursor:grab}
.tools.editing a.tile:hover{transform:none}
.tools.editing a.tile.dragging{opacity:.4}
.tools.editing a.tile.dropbefore{box-shadow:-3px 0 0 0 var(--accent)}
.tools.editing a.tile.dropafter{box-shadow:3px 0 0 0 var(--accent)}
.tools.editing[data-view="list"] a.tile.dropbefore{box-shadow:0 -3px 0 0 var(--accent)}
.tools.editing[data-view="list"] a.tile.dropafter{box-shadow:0 3px 0 0 var(--accent)}
.movers button{
  flex:1;max-width:30px;min-height:24px;padding:0;
  background:var(--well);border:1px solid var(--border);color:var(--gray);
  font:inherit;font-size:11px;line-height:1;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.movers button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.movers button.del:hover{border-color:var(--coral);color:var(--coral)}
.movers button:disabled{opacity:.3;cursor:default}
.tools.editing[data-view="grid"] a.tile{padding-bottom:32px;gap:5px}
.tools.editing[data-view="grid"] a.tile .nm{-webkit-line-clamp:1}
.tools.editing[data-view="list"] .movers{position:static;inset:auto;flex:none;width:auto;gap:5px}
.tools.editing[data-view="list"] .movers button{width:36px;max-width:none;min-height:30px;font-size:13px;flex:none}

/* Squares per row. --tc is set by whichever renderer drew the grid: on the
   desk it is scaled down for a narrow box, so a 3-column-wide box does not
   try to fit the full count. min-width:0 is what makes the count hold — a
   flex item defaults to min-content, so one long name like "Convolution"
   would otherwise push its square past the basis and break the row. */
.tools[data-view="grid"] a.tile{
  flex-basis:calc((100% - (var(--tc) - 1) * 8px) / var(--tc));
  min-width:0;
}
.tools[data-view="grid"] a.tile .nm{overflow-wrap:anywhere}

@media(max-width:640px){
  .tools[data-view="grid"][data-cols="6"] a.tile,
  .tools[data-view="grid"][data-cols="7"] a.tile,
  .tools[data-view="grid"][data-cols="8"] a.tile{flex-basis:calc((100% - 32.5px) / 5)}
}
@media(max-width:520px){
  .tools[data-view="grid"][data-cols="5"] a.tile,
  .tools[data-view="grid"][data-cols="6"] a.tile,
  .tools[data-view="grid"][data-cols="7"] a.tile,
  .tools[data-view="grid"][data-cols="8"] a.tile{flex-basis:calc((100% - 24.5px) / 4)}
}
@media(max-width:380px){
  .tools[data-view="grid"] a.tile{flex-basis:calc((100% - 16.5px) / 3)}
}

.empty{
  color:var(--muted);font-size:13px;text-align:center;
  border:1px dashed var(--border);padding:22px 18px;
}

/* ---------- settings furniture ---------- */
.setuphead{display:flex;align-items:center;gap:10px;margin:34px 4px 12px}
.setuphead .lbl{
  font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);font-weight:700;flex:1;
}
.setuphead .count{font-size:11px;font-weight:700;color:var(--border);font-variant-numeric:tabular-nums}
.setuphead .infobtn{width:20px;height:20px;font-size:11px;flex:none}
.setuphead + .info{margin:12px 4px 14px}
.field{margin-bottom:12px}

/* the connected-folder row under "On this device" */
.fhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fname{
  flex:1 1 200px;min-width:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;
  color:var(--gray);background:var(--well);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:9px 14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.fieldrow{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.fieldrow > .fcol{flex:1 1 240px;min-width:0}
.favrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#favsw button{font-size:17px;line-height:1;padding:0 11px}
#favsw button.favlogo{padding:0 10px}
#favsw button.favlogo img{display:block;width:18px;height:18px;object-fit:contain}
.field input.favin[type=text]{
  width:66px;flex:none;text-align:center;
  background:var(--well);border:1px solid var(--border);
  color:var(--gray);font:inherit;font-size:17px;line-height:1;padding:0 8px;min-height:40px;
}
.field input.favin[type=text]:focus{outline:none;border-color:var(--accent)}
.field label{display:block;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:7px}
.field input[type=text],.field input[type=url],.field select,.field textarea{
  width:100%;background:var(--well);border:1px solid var(--border);
  color:var(--gray);font:inherit;font-size:15px;padding:11px 13px;
}
.field textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.55;min-height:170px;resize:vertical;white-space:pre}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.bar{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.btn{border:1px solid var(--border);background:transparent;color:var(--muted);padding:11px 16px;font:inherit;font-size:14px;cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn:hover{border-color:var(--accent);color:var(--gray)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--navy);font-weight:650}
.btn.primary:hover{filter:brightness(1.12);color:var(--navy)}
.btn.go{border-color:var(--teal);color:var(--gray)}
.btn.go:hover{border-color:var(--mint);color:var(--mint)}
.btn.danger:hover{border-color:var(--coral);color:var(--coral)}
.btn.mini{padding:7px 12px;font-size:13px}
.cardlbl{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:13px}
.msg{color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:10px;min-height:1.2em}
.msg.bad{color:var(--coral)}
.msg.good{color:var(--mint)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{
  background:var(--well);border:1px solid var(--border);color:var(--muted);
  min-height:40px;padding:0 13px;font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.seg button:hover{border-color:var(--accent);color:var(--gray)}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--navy)}
.note{margin-top:20px;padding:15px 17px;border-left:3px solid var(--teal);background:color-mix(in srgb, var(--teal) 8%, transparent);color:var(--muted);font-size:13.5px}
.note b{color:var(--gray)}
.note code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;color:var(--gray)}
.note.intro{margin:0 0 14px}
.hint{color:var(--muted);font-size:12.5px;line-height:1.55;margin-top:11px}
.hint b{color:var(--gray)}
.hint code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--gray)}

/* ---------- the box editor: the desk in miniature ----------
   Same 12-column grid as the board, on fixed-height rows so a box you are
   dragging keeps a steady target. touch-action:none lets a finger drag a box
   without the page scrolling out from under it. */
.boxgrid{
  display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:58px;gap:6px;
  background:var(--well);border:1px solid var(--border);
  padding:6px;min-height:70px;touch-action:none;
}
.boxgrid .empty{grid-column:1 / -1;align-self:center;text-align:center;margin:0}
.boxchip{
  grid-column:calc(var(--bx) + 1) / span var(--bw);
  grid-row:calc(var(--by) + 1);
  position:relative;min-width:0;
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:6px 15px 6px 11px;
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  color:var(--gray);font:inherit;font-size:11px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;
  cursor:grab;touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  transition:border-color .15s, background .15s;
}
.boxchip:hover,.boxchip:focus-visible{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 24%, transparent);
}
.boxchip.dragging{opacity:.55;cursor:grabbing}
.boxchip .bn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.boxchip .bw{flex:none;color:var(--muted);font-weight:600;letter-spacing:.3px;font-size:10.5px}
.boxres{
  position:absolute;top:5px;right:0;bottom:5px;width:15px;
  display:flex;align-items:center;justify-content:center;
  color:color-mix(in srgb, var(--accent) 55%, transparent);
  cursor:ew-resize;touch-action:none;
}
.boxres::before{content:"";width:3px;height:44%;min-height:10px;background:currentColor;border-radius:2px}
.boxchip:hover .boxres,.boxchip:focus-visible .boxres{color:var(--accent)}
.boxchip.on{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow:0 0 0 1px var(--accent) inset;
}
@media(max-width:560px){
  .boxgrid{grid-auto-rows:48px}
  .boxchip{font-size:10px;letter-spacing:.6px;padding:5px 14px 5px 8px}
  .boxchip .bw{display:none}
}

/* The options for whichever box is selected, under the grid. */
.boxopts{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:11px;padding:11px 13px;
  background:var(--well);border:1px solid var(--border);
}
.boxopts[hidden]{display:none}
.boxopts .who{
  flex:0 0 auto;max-width:100%;
  font-size:11px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;
  color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.boxopts .seg{margin:0}
.boxopts .grow{flex:1 1 auto}

/* A minus / value / plus stepper. Shared by the settings box editor and the
   controls that sit under a section header on the desk in Reorder mode. */
.step{display:flex;align-items:center;gap:0}
.step button{
  width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--border);color:var(--gray);
  font:inherit;font-size:15px;line-height:1;cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.step button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.step button:disabled{opacity:.35;cursor:default}
.step .n{
  min-width:34px;text-align:center;font-size:13.5px;font-weight:700;color:var(--gray);
  font-variant-numeric:tabular-nums;
}
.step .n.wide{min-width:56px}
.lbl2{font-size:12px;color:var(--muted);font-weight:600}
@media(max-width:560px){
  .boxopts{gap:8px}
  .boxopts .who{flex:1 1 100%}
  .boxopts .grow{display:none}
}

/* ---------- the app organizer: drag apps between sections ---------- */
.orgsec{margin-bottom:15px}
.orgsec:last-child{margin-bottom:0}
.orghead{display:flex;align-items:center;gap:8px;margin:0 2px 8px}
.orghead .n{
  flex:1;min-width:0;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:700;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.orghead .c{flex:none;font-size:11px;color:var(--muted);font-weight:600}
.orgrow{
  display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start;
  background:var(--well);border:1px solid var(--border);
  padding:9px;min-height:54px;
}
.orgrow.dragover{border-color:var(--accent)}
.orgrow .empty,.boxgrid .empty{border:0;padding:6px 4px;font-size:12.5px}
.orgrow .empty{margin:0;align-self:center}
.orgchip{
  position:relative;display:flex;align-items:center;gap:8px;max-width:100%;
  background:var(--card);border:1px solid var(--border);
  padding:6px 7px 6px 8px;
  color:var(--gray);font:inherit;font-size:12.5px;font-weight:600;
  cursor:grab;user-select:none;-webkit-user-select:none;
  transition:border-color .15s;
}
.orgchip:hover{border-color:var(--accent)}
.orgchip.dragging{opacity:.4}
.orgchip.dropbefore{box-shadow:-3px 0 0 0 var(--accent)}
.orgchip.dropafter{box-shadow:3px 0 0 0 var(--accent)}
.orgchip .ico{flex:0 0 24px;height:24px}
.orgchip .ico svg{width:13px;height:13px}
.orgchip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.orgchip .x{
  flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid transparent;color:var(--muted);
  font:inherit;font-size:12px;line-height:1;cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.orgchip .x:hover{border-color:var(--coral);color:var(--coral)}
.orgrow.off .orgchip{opacity:.7}
.orgrow.off .orgchip:hover{opacity:1}
.orgrow.off .orgchip .x:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- the tool shelf (add / remove built-ins) ---------- */
/* pill switch — one button that reads as an on/off track */
.pillsw{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  padding:5px 15px 5px 5px;
  background:var(--well);border:1px solid var(--border);border-radius:999px;
  color:var(--muted);font:inherit;font-size:13px;font-weight:650;line-height:1;
  cursor:pointer;transition:border-color .15s,color .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.pilltrack{
  flex:none;position:relative;width:38px;height:22px;border-radius:999px;
  background:var(--border);transition:background .15s;
}
.pilltrack i{
  position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--muted);transition:transform .15s,background .15s;
}
.pillsw[aria-checked="true"]{color:var(--gray);border-color:var(--accent,var(--cyan))}
.pillsw[aria-checked="true"] .pilltrack{background:var(--accent,var(--cyan))}
.pillsw[aria-checked="true"] .pilltrack i{transform:translateX(16px);background:var(--navy)}
.pillsw:hover{border-color:var(--accent,var(--cyan))}
.pillsw:active{filter:brightness(.86)}
@media(prefers-reduced-motion:reduce){
  .pilltrack,.pilltrack i{transition:none}
}

/* the Pokédex download bar */
.prog{margin-top:14px}
.prog[hidden]{display:none}
.ptrack{height:8px;border-radius:5px;background:var(--well);border:1px solid var(--border);overflow:hidden}
.ptrack i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s ease}
.ptxt{margin-top:7px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
.shelfrow{
  display:flex;align-items:center;gap:11px;
  background:var(--well);border:1px solid var(--border);padding:9px 11px;
}
.shelfrow .ico{flex:0 0 30px;height:30px}
.shelfrow .ico svg{width:15px;height:15px}
.shelfrow .txt{flex:1;min-width:0}
.shelfrow .nm{display:block;font-size:13.5px;font-weight:600;color:var(--gray);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shelfrow .where{display:block;font-size:11px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shelfrow .tog{
  flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);color:var(--muted);
  font:inherit;font-size:15px;line-height:1;cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.shelfrow .tog:hover{border-color:var(--accent);color:var(--accent)}
.shelfrow.on .tog{background:var(--accent);border-color:var(--accent);color:var(--navy)}
.shelfrow.on .tog:hover{filter:brightness(.92)}

.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.linkout{
  flex:1 1 200px;display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:11px 16px;text-decoration:none;
  background:var(--card);border:1px solid var(--border);color:var(--gray);
  font-size:14px;font-weight:600;letter-spacing:.2px;text-align:center;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.linkout:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--hover)}
.linkout img{flex:none;width:26px;height:26px}
.linkout img.avatar{border-radius:50%;object-fit:cover}
.linkout svg{flex:none;width:26px;height:26px}
.linkout.gold{border-color:color-mix(in srgb, var(--gold) 45%, transparent)}
.linkout.gold:hover{border-color:var(--gold)}
@media(prefers-reduced-motion:reduce){.linkout{transition:none}.linkout:hover{transform:none}}

footer{margin-top:34px;text-align:center;color:var(--muted);font-size:12.5px}
footer a{color:var(--teal);text-decoration:none}
footer a:hover{color:var(--accent)}

.prefs{margin:26px 0 22px}
.prefs-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.palsw{display:flex;gap:6px;align-items:center}
.palsw button{
  width:22px;height:22px;padding:0;cursor:pointer;
  border:2px solid var(--border);background:var(--card);
  transition:transform .12s,border-color .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.palsw button:hover{transform:scale(1.15)}
.palsw button[aria-pressed="true"]{border-color:var(--gray)}
@media(max-width:420px){.palsw button{width:20px;height:20px}}

.nojs{
  max-width:560px;margin:0 auto 22px;padding:14px 18px;
  background:color-mix(in srgb, var(--gold) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  color:var(--gray);font-size:14px;line-height:1.55;
}

.prefstog{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 12px}
.segtog{
  display:flex;align-items:center;gap:2px;
  background:var(--well);border:1px solid var(--border);padding:3px;
  border-radius:var(--r-pill);
  box-shadow:0 2px 12px rgba(0,0,0,.30);
}
.segtog button{
  display:flex;align-items:center;justify-content:center;
  min-width:38px;height:30px;padding:0 12px;
  border:0;background:transparent;
  color:var(--muted);font:inherit;font-size:12px;font-weight:700;
  letter-spacing:.5px;line-height:1;cursor:pointer;
  transition:background .15s, color .15s;
}
.segtog button svg{width:15px;height:15px;fill:currentColor}
.segtog button:hover{color:var(--gray)}
.segtog button[aria-pressed="true"]{background:var(--accent);color:var(--navy)}
.segtog.modesw button{min-width:34px;padding:0 10px}
@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}
}

/* ---------- the read-only folder map, under "On this device" ---------- */
.maptree{
  margin-top:12px;background:var(--well);border:1px solid var(--border);
  padding:12px 14px;max-height:340px;overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.6;color:var(--gray);white-space:pre;
}
.maptree[hidden]{display:none}