/* Desk: tabs of tiles, in the dashboard's Graphide tokens (colors.css). Also the embedded mode that tiles load. */

/* ---------- a tile is this dashboard loaded with ?embed=1: no sidebar, no top bar */
html[data-embedded]{--sidebar:0px}
html[data-embedded] .sidebar,html[data-embedded] .topbar,html[data-embedded] .skip-link,html[data-embedded] .offline-bar{display:none}
html[data-embedded] .app-shell{margin-left:0;min-height:100dvh}
html[data-embedded] main{padding:18px 20px 24px;max-width:none}
html[data-embedded] .reading-article{padding-top:10px}
html[data-embedded] .reading-article .reader-frame{height:calc(100dvh - 112px);min-height:260px}
html[data-embedded] .reading-article .source-code{max-height:calc(100dvh - 112px)}
html[data-embedded] .toast{left:50%}

/* ---------- the Desk page */
/* pinned between the top bar and the window edges, so the page itself never scrolls while the Desk is open */
main.desk-main{position:fixed;top:calc(52px + env(safe-area-inset-top,0px));left:var(--sidebar);right:0;bottom:0;width:auto;padding:0;max-width:none;margin:0;display:flex;overflow:hidden}
.desk{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
.desk-bar{display:flex;align-items:flex-end;gap:12px;padding:8px 12px 0 14px;background:var(--chrome);border-bottom:1px solid var(--line);flex-shrink:0}
.desk-tabs{display:flex;align-items:flex-end;gap:2px;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none}
.desk-tabs::-webkit-scrollbar{display:none}
.desk-tab{position:relative;display:flex;align-items:center;gap:2px;height:32px;max-width:230px;padding:0 4px 0 4px;flex-shrink:0;border:1px solid transparent;border-bottom:0;border-radius:var(--r-panel) var(--r-panel) 0 0;color:var(--muted);cursor:default}
.desk-tab:hover{background:var(--hover);color:var(--text)}
.desk-tab.active{background:var(--page);border-color:var(--line);color:var(--bright);margin-bottom:-1px;height:33px}
.desk-tab.active::before{content:'';position:absolute;left:8px;right:8px;top:-1px;height:2px;border-radius:0 0 2px 2px;background:var(--accent)}
.desk-tab-name{font-size:12.5px;font-weight:500;padding:0 6px;height:100%;min-width:0;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
.desk-tab-count{font:500 10px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:var(--r-chip);padding:1px 4px}
.desk-tab-close{width:20px;height:20px;border-radius:var(--r-chip);display:inline-flex;align-items:center;justify-content:center;color:var(--faint);opacity:0}
.desk-tab-close .icon{width:11px;height:11px}
.desk-tab:hover .desk-tab-close,.desk-tab.active .desk-tab-close,.desk-tab-close:focus-visible{opacity:1}
.desk-tab-close:hover{background:var(--hover-strong);color:var(--bright)}
.desk-tab.drop-before{box-shadow:inset 2px 0 var(--accent)}
.desk-tab.drop-after{box-shadow:inset -2px 0 var(--accent)}
.desk-tab.drop-into{background:var(--accent-wash);border-color:var(--accent-soft)}
.desk-rename{height:24px;width:150px;margin-left:4px;padding:0 8px;border:1px solid var(--accent);border-radius:var(--r-field);background:var(--field);color:var(--bright);font-size:12.5px}
.desk-new{width:28px;height:28px;margin:0 0 2px 4px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-field);color:var(--muted);flex-shrink:0}
.desk-new:hover{background:var(--hover-strong);color:var(--bright)}
.desk-tools{display:flex;align-items:center;gap:2px;padding-bottom:4px;flex-shrink:0}
.desk-tools .icon-button[aria-pressed=true]{background:var(--select);color:var(--accent)}
.desk-status{font:400 10.5px var(--mono);color:var(--muted);margin-right:8px;white-space:nowrap}
.desk-status.warn{color:var(--warning)}
.desk-chips{display:none}

/* ---------- the stage: tiles are placed in percent of it */
.desk-stage{position:relative;flex:1;min-height:0;isolation:isolate;background:var(--ground);background-image:radial-gradient(var(--ground-dot) 1px,transparent 1px);background-size:18px 18px}
.desk-tile{position:absolute;display:flex;flex-direction:column;padding:4px;min-width:0;min-height:0}
.desk-tile[hidden]{display:none}
.desk-head{display:flex;align-items:center;gap:1px;height:30px;padding:0 4px 0 2px;flex-shrink:0;background:var(--chrome);border:1px solid var(--line);border-radius:var(--r-panel) var(--r-panel) 0 0;cursor:grab;overflow:hidden}
.desk-head:active{cursor:grabbing}
.desk-head button{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-field);color:var(--muted);flex-shrink:0}
.desk-head button .icon{width:13px;height:13px}
.desk-head button:hover{background:var(--hover-strong);color:var(--bright)}
.desk-head .desk-title{flex:1;width:auto;min-width:40px;justify-content:flex-start;padding:0 8px;font-size:12px;font-weight:550;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:24px;text-align:left}
.desk-tile.focus .desk-head{border-color:var(--accent-soft);background:var(--accent-wash)}
.desk-tile.focus .desk-title{color:var(--bright)}
.desk-body{position:relative;flex:1;min-height:0;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-panel) var(--r-panel);background:var(--page);overflow:hidden}
.desk-tile.focus .desk-body{border-color:var(--accent-soft);box-shadow:0 0 0 1px var(--accent-wash),0 6px 20px var(--glow)}
.desk-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--page)}
.desk-stage.dragging iframe,.desk-stage.resizing iframe{pointer-events:none}
.desk-stage.resizing{user-select:none}
.desk-drop{position:absolute;inset:0;display:none;z-index:2}
.desk-stage.dragging .desk-drop{display:block}
.desk-drop i{position:absolute;display:none;background:var(--accent-wash);border:2px solid var(--accent);border-radius:var(--r-panel);pointer-events:none}
.desk-drop[data-zone] i{display:block}
.desk-drop[data-zone=center] i{inset:18%}
.desk-drop[data-zone=left] i{left:0;top:0;bottom:0;width:50%}
.desk-drop[data-zone=right] i{right:0;top:0;bottom:0;width:50%}
.desk-drop[data-zone=above] i{left:0;right:0;top:0;height:50%}
.desk-drop[data-zone=below] i{left:0;right:0;bottom:0;height:50%}

.desk-divider{position:absolute;z-index:3;touch-action:none;border-radius:6px}
.desk-divider.x{width:8px;transform:translateX(-50%);cursor:col-resize}
.desk-divider.y{height:8px;transform:translateY(-50%);cursor:row-resize}
.desk-divider::after{content:'';position:absolute;border-radius:2px;background:var(--accent);opacity:0;transition:opacity var(--t-fade) var(--ease-out)}
.desk-divider.x::after{left:3px;right:3px;top:0;bottom:0}
.desk-divider.y::after{top:3px;bottom:3px;left:0;right:0}
.desk-divider:hover::after,.desk-divider:focus-visible::after,.desk-stage.resizing .desk-divider::after{opacity:.8}
.desk-divider:focus-visible{outline:none}

.desk-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--muted)}
.desk-empty>.icon{width:34px;height:34px;color:var(--faint);stroke-width:1.2}
.desk-empty h2{font-size:18px;margin:16px 0 6px}
.desk-empty p{max-width:380px;margin:0 0 18px;line-height:1.6}
.desk-empty .primary-button{height:32px;padding:0 14px}

@media(max-width:700px){
  .desk-bar{padding:6px 8px 0}
  .desk-tools .icon-button:not([aria-pressed]),.desk-status{display:none}
  .desk-chips{display:flex;gap:4px;padding:6px 8px;overflow-x:auto;background:var(--chrome);border-bottom:1px solid var(--line);flex-shrink:0}
  .desk-chips button{font-size:12px;padding:4px 10px;border-radius:var(--r-field);color:var(--muted);white-space:nowrap;border:1px solid var(--line)}
  .desk-chips button.active{background:var(--select);color:var(--bright)}
  .desk-tile{padding:0}
  .desk-head{border-radius:0;border-left:0;border-right:0}
  .desk-body{border-radius:0;border-left:0;border-right:0}
  .desk-tile[data-single="1"] .desk-head [data-tile=split-right],.desk-tile[data-single="1"] .desk-head [data-tile=split-below]{display:none}
  .desk-head{cursor:default}
}