/* Esteban 26 — apps-board styles, trimmed from app-esteban's assets/desk.css */

.btn.sm{padding:7px 12px;font-size:13px}

.toolbar{display:flex;align-items:center;gap:8px;margin:0 4px 14px;flex-wrap:wrap}
.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 board ---------- */
.sec{margin:0 0 8px;min-width:0}
.sechead{display:flex;align-items:center;gap:8px;margin:22px 4px 12px}
.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}
.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)}
.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);
  border-radius:var(--r-panel);
  width:max-content;max-width:100%;
}
.secctl .step{display:flex;align-items:center;gap:8px}
.secctl .step button{width:29px;height:29px;font-size:14px;background:var(--card)}
.secctl .step .n{min-width:20px;font-size:12.5px;text-align:center}
.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}
.secctl button{border-radius:var(--r-pill)}
@media(max-width:720px){
  .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.app-box-tinted{
  border-color:color-mix(in srgb,var(--app-tint) 58%,transparent);
  background:linear-gradient(140deg,color-mix(in srgb,var(--app-tint) 24%,var(--glass-bg,var(--card))),color-mix(in srgb,var(--app-tint) 9%,var(--glass-bg,var(--card))));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--gray) 22%,transparent),0 8px 22px color-mix(in srgb,var(--app-tint) 10%,transparent);
}
a.tile.app-box-tinted:hover{
  border-color:var(--app-tint);
  background:linear-gradient(140deg,color-mix(in srgb,var(--app-tint) 31%,var(--glass-bg,var(--card))),color-mix(in srgb,var(--app-tint) 13%,var(--glass-bg,var(--card))));
}
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 svg{width:17px;height:17px;fill:var(--accent)}
.ico.app-tinted{
  color:var(--app-tint);border-color:color-mix(in srgb,var(--app-tint) 66%,transparent);
  background:linear-gradient(140deg,color-mix(in srgb,var(--app-tint) 38%,transparent),color-mix(in srgb,var(--app-tint) 14%,transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--gray) 24%,transparent),0 5px 14px color-mix(in srgb,var(--app-tint) 12%,transparent);
}
.ico.app-tinted svg{fill:currentColor}

.tools[data-view="grid"]{--tc:6;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px}
.tools[data-view="grid"] a.tile{
  flex-basis:calc((100% - (var(--tc) - 1) * 8px) / var(--tc));
  min-width:0;
  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 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;
  overflow-wrap:anywhere;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}

@media(max-width:720px){
  .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:720px){
  .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:420px){
  .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;
}

.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)}
.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}

/* ---------- the apps board's own edit panel ---------- */
.appsboard .tools.editing[data-view="grid"] a.tile{padding-bottom:8px;gap:7px}
.appsboard .tools.editing a.tile.appselected{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 52%,transparent);
}
.appsboard .tools.editing a.tile.appselected.app-box-tinted{
  border-color:var(--app-tint);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--app-tint) 52%,transparent);
}
.appeditmoves{display:flex;align-items:center;gap:6px}
.appeditmoves[hidden],.appeditpanel[hidden]{display:none}
.appeditmoves .appmovebtn{width:36px;padding:0;font-size:17px}
.appeditpanel{
  margin:14px 0 0;padding:16px;background:var(--well);border:1px solid var(--border);
  border-radius:var(--r-panel);
}
.appsectionbox{padding:12px;margin-bottom:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-panel)}
.appsectionhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.appsectionselected{font-size:14px;font-weight:700;color:var(--gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appsectionbox .secctl{margin:0;border-radius:var(--r-panel)}
.appsboard .sec.appsectionselected>.sechead .sectoggle{color:var(--accent)}
.appedithead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.appeditselected{font-size:14px;font-weight:700;color:var(--gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appcolorbox{padding:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-panel)}
.appcolorname{display:block;margin-bottom:10px;font-size:13.5px;font-weight:650;color:var(--gray)}
.appcolorscope{margin-bottom:14px}

@media(prefers-reduced-motion:reduce){*{transition:none !important}}