/* Workshop shell: the app rail and the panes each app lives in. Colors come from ../shared/themes.css,
   buttons, menus and toast from ../shared/ui.css. */
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.45 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}

.hub{display:grid;grid-template-columns:auto minmax(0,1fr);height:100%}

/* rail: one icon per app, theme at the bottom */
.rail{width:60px;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.75rem 0;background:var(--side);border-right:1px solid var(--line)}
.rail a{color:inherit}
.rail .mark{width:28px;height:28px;color:var(--accent);margin-bottom:.6rem}
.rail .mark svg{width:100%;height:100%}
.rail .grow{flex:1}
.app-btn{position:relative;text-decoration:none;width:44px;min-height:44px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:.62rem;font-weight:500}
.app-btn svg{width:19px;height:19px}
.app-btn:hover{background:var(--hover);color:var(--ink)}
.app-btn.on{background:var(--accent-soft);color:var(--ink)}
.app-btn.on::before{content:"";position:absolute;left:-8px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.app-btn .lbl{line-height:1.1}
.app-btn .ico{display:flex}
.app-btn .ico svg{width:19px;height:19px}
.app-btn .badge{position:absolute;top:4px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:.6rem;font-weight:700;line-height:16px;text-align:center}

/* command palette (Ctrl+K) */
.cmdk{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center}
.cmdk-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.28);z-index:-1}
.cmdk-box{margin-top:12vh;width:min(560px,92vw);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
.cmdk-input{width:100%;box-sizing:border-box;border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;padding:.9rem 1rem;font:400 15px var(--sans);outline:none}
.cmdk-list{list-style:none;margin:0;padding:.3rem;max-height:46vh;overflow:auto}
.cmdk-list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .7rem;border-radius:8px;cursor:pointer}
.cmdk-list li.on{background:var(--accent-soft)}
.cmdk-list li:hover{background:var(--hover)}
.cmdk-app{font-size:.75rem;color:var(--muted)}
.cmdk-empty{color:var(--muted);cursor:default}
.cmdk-empty:hover{background:none}
.cmdk-box.pair{padding:1.1rem 1.25rem}
.cmdk-box.pair h2{margin:0 0 .4rem;font-size:1.05rem}
.cmdk-box.pair p{margin:0 0 .8rem;color:var(--muted);font-size:.88rem}
.cmdk-box.pair label{display:flex;align-items:center;gap:.6rem;font-size:.88rem}
.cmdk-box.pair input{width:7rem;padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
.cmdk-box.pair .acts{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}

/* a pane that cannot load its app (a required connector is missing), or an empty app list */
.notice{margin:12vh auto 0;max-width:30rem;padding:0 1.5rem;text-align:center}
.notice h2{font-size:1.15rem;margin:0 0 .4rem}
.notice p{color:var(--muted);margin:.3rem 0 .9rem}
.notice a.btn{text-decoration:none}

/* toast kinds from the SDK */
.toast[data-kind=warn]{border-left:3px solid var(--warn)}
.toast[data-kind=error]{border-left:3px solid var(--danger)}

/* panes: every app keeps its own pane, so switching apps keeps their state */
.panes{position:relative;min-width:0;min-height:0}
.pane{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0}
.pane[hidden]{display:none}
.pane>iframe{flex:1;width:100%;min-height:0;border:0;background:var(--bg)}


/* phones: the rail becomes a bottom bar */
@media (max-width:720px){
  .hub{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .rail{grid-row:2;width:auto;height:56px;flex-direction:row;justify-content:space-around;padding:0 .5rem env(safe-area-inset-bottom);border-right:0;border-top:1px solid var(--line)}
  .rail .mark,.rail .grow{display:none}
  .app-btn{width:auto;min-width:64px;padding:0 .6rem}
  .app-btn.on::before{left:14px;right:14px;top:-1px;bottom:auto;width:auto;height:3px;border-radius:0 0 3px 3px}
  .toast{bottom:4.5rem}
}