/* PLUGIN WINDOWS (frontend/app/pluginhost.js) — the station's chrome around a plugin's own page.
   The window itself is an ordinary .term (glass-demo.js turns it into the glass sheet); only the body changes:
   no padding (the page has its own), and a transparent sandboxed frame so the window's glass shows through. */
.term.plugin-win .term-body.plugin-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.term.plugin-win iframe.plugin-frame {
  display: block; width: 100%; border: 0; background: transparent;
  /* must match the kit's own color-scheme, or the browser paints an opaque canvas behind the frame */
  color-scheme: dark;
  /* The frame's inline height (the page's own content height, reported by the kit) is only its BASIS: a glass
     sheet with a set height (docked, dragged, expanded) grows or shrinks the frame to fill exactly its body. */
  flex: 1 1 auto; min-height: 80px;
}
/* TRUTHFUL CHROME: every plugin window says, in the station's own title bar, that its content is a plugin's. */
.term.plugin-win .plugin-plate {
  flex: none; font-size: 13px; letter-spacing: 1.5px; line-height: 1.4; padding: 0 6px; margin-left: 8px;
  color: var(--ph); background: rgba(0, 0, 0, .3); border: 1px solid var(--gd-edge, rgba(var(--ph-rgb), .24)); border-radius: 3px;
  pointer-events: auto;
}
.term.plugin-win .plugin-gone { padding: var(--s-4) var(--s-4); color: var(--ph-bright); letter-spacing: .5px; }
/* A crew-written DRAFT: gold plate, so an unapproved preview can never be mistaken for an installed plugin. */
.term.plugin-win .plugin-plate.draft { color: var(--gold); border-color: rgba(var(--gold-rgb), .45); }

/* APPS — the bar under an app window (StarNet's chrome, not the app's): describe a change · refresh · honest status */
.term.plugin-app-win .app-bar {
  flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 11px;
  border-top: 1px solid var(--gd-edge, rgba(var(--ph-rgb), .24));
  background: linear-gradient(180deg, rgba(var(--ph-rgb), .06), rgba(var(--ph-rgb), .015));
}
.term.plugin-app-win .app-bar-row { display: flex; gap: 8px; align-items: center; }
/* .bb sets its own display, which beats the [hidden] attribute: a button the bar hides must really be gone */
.term.plugin-app-win .app-bar [hidden], .term.apps-win [hidden] { display: none !important; }
.term.plugin-app-win .app-change { flex: 1 1 auto; min-width: 0; }
.term.plugin-app-win .app-bar-status { display: flex; gap: 8px; align-items: center; font-size: 15px; letter-spacing: .3px; color: var(--ph-dim); min-height: 20px; }
/* the status line WRAPS: its tail ("routines are OFF", "last refresh failed") is the part that must never be cut */
.term.plugin-app-win .app-status { flex: 1 1 auto; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.term.plugin-app-win .app-bar-status { align-items: flex-start; }
.term.plugin-app-win .app-arm { flex: none; }
.term.plugin-win .plugin-plate.app { color: var(--ok); border-color: rgba(var(--ok-rgb), .4); }
/* the APPS window */
.term.apps-win .apps-h { font-size: 15px; letter-spacing: 2px; color: var(--ph-bright); margin: 6px 0 8px; }
.term.apps-win .apps-new { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.term.apps-win .apps-what { resize: vertical; min-height: 64px; }
.term.apps-win .apps-examples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.term.apps-win .apps-list { display: flex; flex-direction: column; gap: 8px; }
/* the APPS dock: hidden until the first app exists (a dock group sets its own display, which beats [hidden]) */
#bottombar .bb-group[data-group="apps"][hidden] { display: none !important; }
#bottombar .bb-apps-items { display: contents; }
/* The APPS dock reads like its siblings (glass-demo.css .bb-menu): no item ever shrinks into the next one, and an
   app entry is exactly two lines — its name and one status line, each cut with an ellipsis, never wrapped. */
body.glass-demo #screen-game #bottombar .bb-group[data-group="apps"] .bb-menu .bb { flex-shrink: 0; }
body.glass-demo #screen-game #bottombar .bb-menu .bb.bb-app .bb-tx b,
body.glass-demo #screen-game #bottombar .bb-menu .bb.bb-app .bb-tx small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.glass-demo #screen-game #bottombar .bb-menu .bb.bb-app { min-height: 50px; }
#bottombar .bb-apps-sep { flex: none; height: 1px; margin: 4px 8px; background: var(--gd-edge, rgba(var(--ph-rgb),.24)); }
#bottombar .bb-apps-more { flex: none; padding: 2px 10px 4px 43px; font: 14px/1.25 'VT323',monospace; color: var(--ph-dim); }
.term.apps-win .app-ready { color: var(--ok); }
.term.apps-win .app-unbuilt { color: var(--ph-dim); }
.term.apps-win .app-rename-in { flex: 1 1 auto; min-width: 0; margin-right: 8px; }

/* APPS — the station's CURRENT keys and fields, copied from the Build Library / workflow panel (refit-polish.css,
   workflow-panel.css): 8px glass keys 36px tall read at 16px, lit-glass primary, 8px fields at 17px, a 16-17px body.
   Never the old CRT key-input (black gradient + glow) or the tiny .bb xs keycaps. */
:is(.term.apps-win, .term.plugin-app-win .app-bar) {
  --ap-glass: var(--refit-glass, linear-gradient(125deg, rgba(var(--ph-bright-rgb),.09), rgba(var(--ph-rgb),.045) 48%, rgba(var(--ph-rgb),.015)));
  --ap-edge: var(--refit-edge, rgba(var(--ph-rgb),.2));
  --ap-light: inset 0 1px 0 rgba(var(--ph-bright-rgb),.07);
  --ap-hover: rgba(var(--ph-rgb),.1);
  --ap-on: rgba(var(--ph-rgb),.13);
}
.term.apps-win .term-body { font-size: 17px; line-height: 1.45; }
/* keys */
:is(.term.apps-win, .term.plugin-app-win .app-bar) .apps-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  min-height: 36px; padding: 7px 14px; font: 16px/1.15 'VT323',monospace; letter-spacing: .6px; white-space: nowrap;
  color: var(--ph); border: 1px solid var(--ap-edge); border-radius: 8px;
  background: var(--ap-glass); box-shadow: var(--ap-light); text-shadow: none; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
:is(.term.apps-win, .term.plugin-app-win .app-bar) .apps-btn:hover:not(:disabled) { color: var(--ph-bright); border-color: rgba(var(--ph-rgb),.45); background: var(--ap-hover); }
:is(.term.apps-win, .term.plugin-app-win .app-bar) .apps-btn:active:not(:disabled) { box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
:is(.term.apps-win, .term.plugin-app-win .app-bar) .apps-btn.primary { color: var(--ph-bright); background: rgba(var(--ph-rgb),.16); border-color: var(--ph); }
:is(.term.apps-win, .term.plugin-app-win .app-bar) .apps-btn.primary:hover:not(:disabled) { background: rgba(var(--ph-rgb),.24); }
:is(.term.apps-win, .term.plugin-app-win .app-bar) .apps-btn.danger:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); }
:is(.term.apps-win, .term.plugin-app-win .app-bar) .apps-btn:disabled { opacity: .4; cursor: default; }
:is(.term.apps-win, .term.plugin-app-win .app-bar) :is(.apps-btn, .apps-field):focus-visible { outline: 2px solid var(--ph-bright); outline-offset: 2px; }
/* the example chips: the workflow panel's .wf-chip */
.term.apps-win .apps-chip { min-height: 34px; padding: 5px 12px; letter-spacing: .5px; }
.term.apps-win .apps-chip[aria-pressed="true"] { background: var(--ap-on); border-color: var(--ph); color: var(--ph-bright); box-shadow: var(--ap-light), inset 0 -2px 0 rgba(var(--ph-rgb),.65); }
/* fields: the Build Library field */
:is(.term.apps-win, .term.plugin-app-win .app-bar) .apps-field {
  width: 100%; box-sizing: border-box; min-width: 0; min-height: 36px; padding: 8px 12px;
  font: 17px/1.35 'VT323',monospace; color: var(--ph-bright); text-shadow: none; outline: none;
  border: 1px solid var(--ap-edge); border-radius: 8px; background: rgba(0,0,0,.18); box-shadow: inset 0 1px 3px rgba(0,0,0,.15);
  transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft);
}
:is(.term.apps-win, .term.plugin-app-win .app-bar) .apps-field:focus { border-color: var(--ph); box-shadow: 0 0 0 2px rgba(var(--ph-rgb),.1); }
:is(.term.apps-win, .term.plugin-app-win .app-bar) .apps-field:focus-visible { outline: none; }
:is(.term.apps-win, .term.plugin-app-win .app-bar) .apps-field::placeholder { color: var(--text); opacity: .6; }
.term.apps-win textarea.apps-field { resize: vertical; min-height: 92px; }
/* the form */
.term.apps-win .apps-new { gap: 8px; margin-bottom: 18px; }
.term.apps-win .apps-h { display: block; margin: 14px 0 10px; padding: 0; font: 20px/1.2 'VT323',monospace; letter-spacing: 1px; color: var(--ph-bright); }
.term.apps-win .apps-new label { font: 16px/1.2 'VT323',monospace; color: var(--text); margin-top: 6px; }
.term.apps-win :is(.mc-hint, .apps-msg) { font-size: 16px; line-height: 1.35; }
.term.apps-win .apps-examples { gap: 8px; margin-top: 2px; }
.term.apps-win .apps-new .mc-acts { gap: 12px; margin-top: 6px; align-items: center; }
/* your apps: one glass card each */
.term.apps-win .apps-list { gap: 10px; }
.term.apps-win .app-row {
  padding: 12px 14px; margin: 0; border: 1px solid var(--ap-edge); border-radius: 10px;
  background: var(--ap-glass); box-shadow: var(--ap-light);
}
.term.apps-win .app-row:is(:hover, :focus-within) { border-color: rgba(var(--ph-rgb),.4); background: var(--ap-hover); }
.term.apps-win .app-row .mc-top b { font: 19px/1.2 'VT323',monospace; letter-spacing: .5px; color: var(--ph-bright); }
.term.apps-win .app-row .mc-state { font-size: 15px; }
.term.apps-win .app-row .mc-acts { gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.term.apps-win .ext-empty { font-size: 16px; }
.term.plugin-app-win .app-bar { background: transparent; border-top: 1px solid var(--gd-edge, rgba(var(--ph-rgb),.24)); }
/* AUTO-UPDATE under an app: how often + what each update does, in the same glass as the rest of the bar */
.term.plugin-app-win .app-auto { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 2px; border-top: 1px solid var(--ap-edge, rgba(var(--ph-rgb),.2)); }
.term.plugin-app-win .app-auto-h { font: 17px/1.2 'VT323',monospace; color: var(--ph-bright); letter-spacing: .5px; }
.term.plugin-app-win .app-auto-every { display: flex; flex-wrap: wrap; gap: 8px; }
.term.plugin-app-win .app-auto-every .apps-chip { min-height: 34px; padding: 5px 12px; }
.term.plugin-app-win .app-auto-every .apps-chip[aria-pressed="true"] { background: var(--ap-on, rgba(var(--ph-rgb),.13)); border-color: var(--ph); color: var(--ph-bright); box-shadow: var(--ap-light), inset 0 -2px 0 rgba(var(--ph-rgb),.65); }
.term.plugin-app-win .app-auto-l { font: 16px/1.2 'VT323',monospace; color: var(--text); }
.term.plugin-app-win .app-auto-task { resize: vertical; min-height: 58px; }
.term.plugin-app-win .app-auto-task:disabled { opacity: .45; }
.term.plugin-app-win .app-auto-acts { display: flex; align-items: center; gap: 12px; }
.term.plugin-app-win .app-auto-note { font: 15px/1.3 'VT323',monospace; color: var(--ph-dim); }
.term.plugin-app-win .app-auto-toggle[aria-expanded="true"] { color: var(--ph-bright); border-color: var(--ph); background: var(--ap-on, rgba(var(--ph-rgb),.13)); }