/*
 * Hara Studio surface contract.
 *
 * Hosts provide the content and runtime.  This sheet owns only the responsive
 * workbench geometry so browser Studio, Chrome and VS Code present the same
 * areas: Explorer, Source, Visual Output and Console.
 */

.hara-studio {
  width: min(1680px, calc(100vw - 32px));
  margin-inline: auto;
  padding-bottom: clamp(24px, 5vh, 64px);
}

.hara-studio-project-bar { position: relative; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; border-block: 1px solid var(--hara-line); background: rgba(2,4,8,.74); }
.hara-studio-project-button { min-width: 0; min-height: 40px; display: inline-flex; align-items: center; gap: 10px; padding: 0 14px; border: 0; color: var(--hara-cyan-bright); background: transparent; font: 700 .72rem var(--hara-mono); letter-spacing: .08em; cursor: pointer; }
.hara-studio-project-button:hover, .hara-studio-project-button:focus-visible { color: var(--hara-cyan); background: rgba(65,245,228,.07); outline: none; }
.hara-studio-project-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hara-studio-project-chevron { color: var(--hara-faint); }
.hara-studio-project-actions { position: relative; display: flex; align-items: center; }
.hara-studio-icon { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; padding: 0 8px; border: 0; border-left: 1px solid var(--hara-line); color: var(--hara-muted); background: transparent; font: 700 .78rem/1 var(--hara-mono); cursor: pointer; }
.hara-studio-icon:hover, .hara-studio-icon:focus-visible, .hara-studio-icon[aria-pressed="true"] { color: var(--hara-cyan-bright); background: rgba(65,245,228,.08); outline: none; }
.hara-studio-health-button::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--hara-green); box-shadow: 0 0 10px rgba(61,255,158,.6); }
.hara-studio-health-button[data-state="busy"]::before { background: var(--hara-amber); box-shadow: 0 0 10px rgba(245,215,66,.65); animation: hara-studio-pulse 1.1s ease-in-out infinite; }
.hara-studio-health-button[data-state="error"]::before { background: var(--hara-magenta); box-shadow: 0 0 10px rgba(255,46,136,.7); }
@keyframes hara-studio-pulse { 50% { opacity: .35; } }
.hara-studio-health-popover { position: absolute; z-index: 30; top: calc(100% + 7px); right: 0; width: min(340px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--hara-line-strong); background: var(--hara-overlay); box-shadow: 0 20px 50px rgba(0,0,0,.58); }
.hara-studio-health-popover[hidden] { display: none; }
.hara-studio-health-row { min-height: 31px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--hara-line); font: .65rem var(--hara-mono); }
.hara-studio-health-label { color: var(--hara-faint); }
.hara-studio-health-value { min-width: 0; overflow: hidden; color: var(--hara-cyan-bright); text-overflow: ellipsis; white-space: nowrap; }
.hara-studio-health-actions { display: flex; justify-content: flex-end; margin-top: 8px; border: 1px solid var(--hara-line); }
.hara-studio-mobile-tabs { display: none; }
.hara-studio-pane-icon { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; }

/* The website workspace: Explorer | Source, with Visual Output below Source.
   The console is an on-demand bottom panel so it never steals the primary
   source/output space. */
.hara-studio-main {
  display: grid;
  grid-template-columns: minmax(220px, .28fr) minmax(0, 1fr);
  grid-template-rows: minmax(360px, 1fr) minmax(220px, .68fr);
  gap: 14px;
  min-height: min(820px, calc(100vh - 150px));
}

.hara-studio-main > * { min-width: 0; min-height: 0; }

.hara-studio-tree {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hara-studio-editor-wrap {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hara-studio-repl {
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.hara-studio-canvas-panel {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hara-studio-canvas { display: block; width: 100%; height: 100%; min-height: 0; touch-action: none; }
.hara-studio-canvas-panel[hidden], .hara-studio-amp[hidden] { display: none; }
.hara-studio-amp { display: block; width: 100%; height: 100%; min-height: 0; border: 0; background: var(--hara-abyss); }

.hara-studio-main:not(:has(.hara-studio-canvas-panel:not([hidden]))) .hara-studio-editor-wrap { grid-row: 1 / span 2; }
.hara-studio-main.is-console-open { grid-template-rows: minmax(250px, 1fr) minmax(190px, .58fr); }
.hara-studio-main.is-console-open .hara-studio-canvas-panel { display: none; }
.hara-studio-main.is-console-open .hara-studio-repl { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; overflow: hidden; }

@media (max-width: 1120px) {
  .hara-studio-main {
    grid-template-columns: minmax(204px, 250px) minmax(0, 1fr);
    grid-template-rows: minmax(300px, 1fr) minmax(210px, .62fr);
  }
  .hara-studio-tree { grid-column: 1; grid-row: 1 / span 2; }
  .hara-studio-editor-wrap { grid-column: 2; grid-row: 1; }
  .hara-studio-canvas-panel { grid-column: 2; grid-row: 2; min-height: 320px; }
}

@media (max-width: 760px) {
  .hara-studio { width: 100%; padding-inline: 12px; }
  .hara-studio-project-bar { margin-bottom: 8px; }
  .hara-studio-mobile-tabs { display: flex; justify-content: flex-end; margin-bottom: 8px; border: 1px solid var(--hara-line); }
  .hara-studio-main { display: block; min-height: 520px; }
  .hara-studio-main > * { display: none; min-height: 520px; }
  .hara-studio-main.mobile-view-explorer .hara-studio-tree,
  .hara-studio-main.mobile-view-source .hara-studio-editor-wrap,
  .hara-studio-main.mobile-view-output .hara-studio-canvas-panel,
  .hara-studio-main.mobile-view-console .hara-studio-repl { display: flex; }
  .hara-studio-main.mobile-view-output .hara-studio-canvas-panel[hidden] { display: none; }
}