/* ========================================================================
   THE STSH SHELL - top bar + phase rail + ruled canvas
   Shared by the standalone phase apps (Strategist app.php, Synthesize).
   Markup: includes/components/stsh.php. Moved from strategist/css when
   Synthesize adopted the shell; the /app/ frame never loads this.
   ======================================================================== */

.stsh {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
}

/* ---- top bar ---- */
.stsh-top {
  flex: none;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  background: var(--bg-page-warm);
  border-bottom: 1px solid var(--gray-200);
}
.stsh-brand { display: flex; align-items: center; gap: var(--space-2-5); }
.stsh-brand__mark {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-lg);
  background: var(--mainsite-gradient);
  display: grid;
  place-items: center;
}
.stsh-brand__mark .material-symbols-outlined { font-size: 18px; color: var(--text-inverse); }
.stsh-brand__name {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 19px;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
.stsh-brand__name span { color: var(--mainsite-primary); }

.stsh-top__actions { display: flex; align-items: center; gap: var(--space-4-5); }
.stsh-top__act {
  display: grid;
  place-items: center;
  color: var(--color-ink-secondary);
  border-radius: var(--radius-md);
}
.stsh-top__act .material-symbols-outlined { font-size: 22px; }
.stsh-top__act:hover { color: var(--mainsite-dark); }
.stsh-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--gray-300);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--gray-500);
}
.stsh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.stsh-avatar .material-symbols-outlined { font-size: 20px; }
.stsh-avatar__initial { font-size: var(--text-meta); font-weight: var(--font-semibold); color: var(--gray-600); }

/* ---- body: rail + canvas ---- */
.stsh__body { flex: 1; display: flex; min-height: 0; }

.stsh-nav {
  width: 112px;
  flex: none;
  background: var(--color-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-5) 0;
  gap: var(--space-1);
}
.stsh-nav__item {
  width: 100%;
  padding: var(--space-2-5) var(--space-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1-5);
  text-decoration: none;
  color: var(--gray-300);
}
.stsh-nav__item:hover { color: var(--text-inverse); text-decoration: none; }
.stsh-nav__glyph {
  display: grid;
  place-items: center;
  width: 44px;
  height: 34px;
  border-radius: var(--radius-full);
}
.stsh-nav__glyph .material-symbols-outlined { font-size: 22px; }
.stsh-nav__label {
  font-size: 9.5px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: var(--leading-snug);
  color: var(--gray-400);
}
.stsh-nav__item:hover .stsh-nav__label { color: var(--gray-300); }
.stsh-nav__item.is-active .stsh-nav__glyph {
  background: var(--mainsite-light);
  color: var(--mainsite-dark);
}
.stsh-nav__item.is-active .stsh-nav__glyph .material-symbols-outlined { font-size: 20px; }
.stsh-nav__item.is-active .stsh-nav__label { color: var(--text-inverse); font-weight: var(--font-bold); }
.stsh-nav__rule {
  width: 44px;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin: var(--space-2) 0;
}

/* The ruled ground. Two hairline gradients on a 28px cell, the same grid the
   design draws; it reads as graph paper, not as chrome. */
.stsh-canvas {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background-color: var(--bg-page);
  background-image:
    linear-gradient(rgba(44, 36, 22, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 36, 22, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  padding: var(--space-7, 28px) var(--space-8) 0;
}

/* Under the rail's own width the phase labels stop fitting; the nav goes
   horizontal and scrolls rather than squeezing. */
@media (max-width: 760px) {
  .stsh__body { flex-direction: column; }
  .stsh-nav {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }
  .stsh-nav__item { width: auto; flex: none; padding: var(--space-1-5) var(--space-2); }
  .stsh-nav__rule { width: 1px; height: 28px; margin: 0 var(--space-1); flex: none; }
  .stsh-canvas { padding: var(--space-5) var(--space-4) 0; }
}

/* A viewport-locked app (Synthesize) hosts its own scroll model: the canvas
   stops scrolling and hands its whole box to the app shell inside. The page
   gives the canvas id="main-content", so the app's own body-lock rules
   (e.g. .synth-app-body #main-content) keep sizing it exactly as they did
   under ws_header. */
.stsh-canvas--app {
  padding: 0;
  overflow: hidden;
}