/* Shared Plane presentation, served by every host and the embedded UI.
   Layout only: existing data, state and action semantics stay in app.js. */
:root {
  --bg:#f4f5ef;
  --panel:#fffefa;
  --card:#fffefa;
  --edge:#d9ded2;
  --ink:#243028;
  --dim:#64705f;
  --accent:#3f624a;
  --ok:#286342;
  --warn:#805516;
  --bad:#a33232;
  --chip:#edf0e7;
  --purple:#745786;
  --green:#476846;
  color-scheme:light
}

body.plane-workspace {
  height:auto;
  min-height:100dvh;
  overflow:auto;
  padding:0 32px 20px;
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

.workspace-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:34px 0 24px
}
.eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
  color:#a45a2a;
  margin-bottom:10px
}
.workspace-intro h1 {
  font-family:Georgia,"Times New Roman",serif;
  font-size:36px;
  font-weight:400;
  letter-spacing:-1.1px;
  line-height:1.15
}
.intro-copy {
  margin-top:12px;
  color:var(--dim);
  font-size:13px
}


.plane-workspace>header {
  padding:13px 0 16px;
  background:none;
  gap:14px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--edge)
}
.plane-workspace header h1 {
  font-size:15px;
  margin-right:10px
}
button,input,textarea,select {
  font:inherit
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.5
}
.pill {
  font-size:11px;
  background:transparent;
  padding:5px 11px;
  border-radius:7px
}
.pill.ghost.on,
.plane-workspace #view-nav .pill.ghost.on {
  background:#e5ecdd;
  color:#36523e;
  border-color:#9ab18e
}
.pill:not(.ghost) {
  border:0
}
.pill b {
  color:var(--ink)
}
#beat-label {
  font-size:10px;
  color:var(--dim)
}
.plane-workspace main {
  display:grid;
  grid-template-columns:minmax(145px,170px) minmax(0,1fr) minmax(245px,290px);
  gap:24px;
  flex:1;
  padding-top:21px
}
.plane-workspace main>section {
  border:0;
  min-width:0
}
/* Own rail placement across the legacy 1100px breakpoint too. */
.plane-workspace #rail-fleet,
.plane-workspace #rail-channel,
.plane-workspace #rail-right {
  order:0
}
.plane-workspace h2 {
  padding:0 0 12px;
  font-size:10px;
  letter-spacing:.1em;
  color:#6c7966
}
.plane-workspace .scroll {
  padding:0;
  overflow:visible;
  flex:none
}
.plane-workspace .thread {
  margin:0 0 14px;
  border-radius:12px;
  box-shadow:0 2px 5px #15271903
}
.thread .t-kicker {
  color:#73836a;
  font-size:9px;
  padding:15px 17px 0
}
.thread>.t-head {
  padding:7px 17px 12px;
  gap:8px
}
.t-head .t-title {
  font-size:15px;
  line-height:1.4;
  font-weight:600
}
.t-head .t-meta {
  font-size:10px;
  margin-left:0;
  flex-basis:100%
}
.msg {
  padding:13px 17px;
  border-color:var(--edge)
}
.msg .body {
  font-size:13px;
  line-height:1.65
}
.msg .who {
  font-size:11px
}
.msg .who .to {
  color:var(--dim)
}
.msg .who time {
  font-size:10px
}
.msg details {
  margin-top:10px
}
.msg summary {
  font-size:10px
}
.tag {
  font-size:9px;
  border:1px solid #dce4d7;
  padding:1px 5px
}
.msg .delivery {
  font-size:10px
}
.t-ladder {
  padding:0 17px 10px
}
.step {
  font-size:10px
}
.plane-workspace .card {
  margin:0 0 12px;
  padding:15px;
  border-radius:10px
}
.card b {
  font-size:13px;
  line-height:1.5;
  padding-top:5px
}
.card .sub {
  font-size:10px;
  overflow-wrap:anywhere;
  line-height:1.6
}
.card.attn {
  background:#fffcf3;
  border-color:#d9bd78
}
.why {
  font-size:11px;
  line-height:1.65;
  margin-top:9px
}
.why small {
  font-size:10px
}
.note {
  font-size:10px
}
.plane-workspace #rail-attention {
  max-height:none;
  border:0;
  margin-bottom:14px
}
.plane-workspace #rail-tasks {
  flex:none
}
.plane-workspace #rail-debug {
  flex:none
}
.plane-workspace .actor {
  flex-wrap:wrap;
  padding:8px 0;
  font-size:11px;
  gap:6px;
  overflow-wrap:anywhere
}
.actor small {
  margin-left:13px;
  font-size:9px
}
.actor .dot {
  width:6px;
  height:6px
}
.rail-head {
  position:static;
  padding:0 0 8px;
  margin-top:12px;
  gap:5px;
  display:block
}
.rail-head b {
  font-size:10px;
  overflow-wrap:anywhere
}
.rail-head small {
  display:block;
  font-size:9px
}
.overview {
  gap:8px;
  margin:0 0 17px
}
.ov-card {
  padding:12px;
  border-radius:9px;
  background:var(--panel)
}
.ov-card .ov-head {
  font-size:11px;
  flex-wrap:wrap
}
.ov-card .ov-line {
  font-size:10px;
  line-height:1.7
}
.ov-card.on {
  border-color:#8ca17c;
  background:#edf2e7
}
.ov-card .ov-head b {
  font-weight:600
}
.plane-workspace #fleet-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:11px;
  margin-left:0;
  letter-spacing:0;
  text-transform:none
}
.plane-workspace #fleet-tabs button {
  font-size:10px
}
.plane-workspace #search {
  float:none;
  display:block;
  width:100%;
  margin:13px 0 0;
  padding:9px 11px;
  background:#eef0e8;
  border:1px solid #d9dfd0;
  border-radius:7px;
  color:var(--ink);
  font-size:11px;
  max-width:none
}
.plane-workspace .panel-state {
  padding:20px 15px;
  border:1px dashed #c8d2bd;
  border-radius:9px;
  margin:4px 0 12px;
  background:transparent
}
.panel-state .label {
  font-size:12px
}
.panel-state .detail,.panel-state .remedy,.panel-state .prov {
  font-size:10px
}
.panel-state .prov {
  overflow-wrap:anywhere
}


.plane-workspace #rail-channel>h2 {
  display:block
}

.plane-workspace .overview {
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))
}

/* Status colors describe state; selection uses the sage navigation palette.
   Explicit opaque fills keep badges readable on every card background. */
:root {
  --status-active-ink:#215574;
  --status-active-bg:#e8f1f8;
  --status-active-edge:#a8c7dd;
  --status-idle-ink:#52605b;
  --status-idle-bg:#f0f2ef;
  --status-idle-edge:#b9c3bc;
  --status-ok-ink:#22603e;
  --status-ok-bg:#e9f3eb;
  --status-ok-edge:#a2c7ad;
  --status-warn-ink:#795012;
  --status-warn-bg:#fff2d5;
  --status-warn-edge:#dbb965;
  --status-bad-ink:#982d30;
  --status-bad-bg:#fcebed;
  --status-bad-edge:#d8a3a7;
}
.plane-workspace .pres,
.plane-workspace .card .st {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 7px;
  border:1px solid var(--status-idle-edge);
  border-radius:5px;
  font-size:11px;
  line-height:1.45;
  font-weight:600;
  letter-spacing:0;
  color:var(--status-idle-ink);
  background:var(--status-idle-bg);
}
.plane-workspace .pres-working,
.plane-workspace .card .st.s-open {
  color:var(--status-active-ink);
  background:var(--status-active-bg);
  border-color:var(--status-active-edge);
}
.plane-workspace .pres-working::before,
.plane-workspace .pres-idle::before,
.plane-workspace .card .st.s-open::before {
  content:"";
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  border:1px solid currentColor;
}
.plane-workspace .pres-working::before,
.plane-workspace .card .st.s-open::before { background:currentColor; }
.plane-workspace .card .st.s-completed {
  color:var(--status-ok-ink);
  background:var(--status-ok-bg);
  border-color:var(--status-ok-edge);
}
.plane-workspace .card .st.s-completed::before { content:"✓"; }
.plane-workspace .pres-stale,
.plane-workspace .pres-unknown,
.plane-workspace .card .st.s-pend {
  color:var(--status-warn-ink);
  background:var(--status-warn-bg);
  border-color:var(--status-warn-edge);
}
.plane-workspace .pres-down,
.plane-workspace .card .st.s-bad {
  color:var(--status-bad-ink);
  background:var(--status-bad-bg);
  border-color:var(--status-bad-edge);
}
.plane-workspace .pres-sampling { border-style:dashed; }
.plane-workspace .card.attn {
  box-shadow:inset 3px 0 0 #bd923f;
}
.plane-workspace #attn-count { background:var(--status-warn-ink); }

a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[role=button]:focus-visible {
  outline:2px solid #3f624a;
  outline-offset:3px
}

#focus-overlay {
  background:#17231ba8
}

#focus-box {
  background:var(--panel)
}

/* Terminal captures keep the dark ANSI palette, including their panel states. */
.plane-workspace .pane-card pre,
.plane-workspace #focus-pane {
  --ink:#e6edf3;
  --dim:#8b949e;
  --bad:#ff7b72;
  --warn:#e3b341;
  color:var(--ink);
  color-scheme:dark
}

@media(min-width:1450px) {

body.plane-workspace {
  padding-left:5vw;
  padding-right:5vw
}

.plane-workspace main {
  grid-template-columns:190px minmax(0,1fr) 330px;
  gap:30px
}


}

@media(max-width:1000px) {

body.plane-workspace {
  padding:0 20px 20px
}

.plane-workspace main {
  grid-template-columns:minmax(0,1fr) 260px;
  gap:20px
}

.plane-workspace #rail-fleet {
  grid-column:1/-1;
  order:3
}

.plane-workspace #fleet {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

.rail-head {
  margin-top:0
}

.plane-workspace #rail-right {
  grid-column:2;
  grid-row:1
}

.plane-workspace #rail-channel {
  grid-column:1;
  grid-row:1
}

.workspace-intro h1 {
  font-size:31px
}


}

@media(max-width:650px) {

body.plane-workspace {
  padding:0 15px 15px
}

.workspace-intro {
  padding:23px 0 20px;
  display:block
}

.workspace-intro h1 {
  font-size:29px
}

.intro-copy {
  font-size:12px
}

.plane-workspace>header {
  gap:8px
}

.plane-workspace header h1 {
  flex-basis:100%
}

.plane-workspace .pill {
  font-size:10px;
  padding:5px 7px
}

.plane-workspace main {
  display:flex;
  flex-direction:column;
  padding-top:17px;
  gap:18px
}

.plane-workspace #rail-right {
  order:0
}

.plane-workspace #rail-channel {
  order:1
}

.plane-workspace #rail-fleet {
  order:2
}

.plane-workspace #rail-attention {
  margin-bottom:16px
}

.msg .who time {
  margin-left:0
}

.plane-workspace #debug-toggle {
  margin-left:auto
}


}

@media(prefers-reduced-motion:reduce) {

* {
  scroll-behavior:auto!important;
  animation:none!important;
  transition:none!important
}


}

/* Shared task inspection and explicit-capability input. */
.task-open { display:block; width:100%; text-align:left; border:0; padding:7px 0;
  background:transparent; color:var(--ink); font-weight:650; line-height:1.5; overflow-wrap:anywhere }
.task-open:hover { text-decoration:underline }
button:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid var(--accent); outline-offset:3px }
#work-loop { margin:18px 0; padding:20px; border:1px solid var(--edge); border-radius:12px; background:var(--panel) }
#work-loop h2 { font-size:15px; color:var(--ink); letter-spacing:0; padding-bottom:4px }
.work-loop-head { display:flex; justify-content:space-between; align-items:start; gap:12px; flex-wrap:wrap }
#work-scope,#work-unavailable { color:var(--dim); font-size:12px; overflow-wrap:anywhere }
#work-mode:empty,#work-unavailable:empty,#work-notice:empty { display:none }
#work-form { margin-top:16px }
.work-target { display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:14px }
.work-target select { max-width:100%; padding:7px 9px; border:1px solid var(--edge); border-radius:6px; background:var(--panel); color:var(--ink) }
#work-task { font-size:11px; color:var(--dim); overflow-wrap:anywhere }
#work-label { display:block; font-weight:600; margin-bottom:7px }
#work-body { display:block; box-sizing:border-box; width:100%; resize:vertical; min-height:92px; padding:12px;
  border:1px solid var(--edge); border-radius:8px; background:var(--bg); color:var(--ink); line-height:1.6 }
.work-controls { display:flex; gap:12px; justify-content:space-between; align-items:center; margin-top:12px; flex-wrap:wrap }
#work-send { background:var(--accent); color:white; padding:10px 16px }
#work-notice { margin-top:13px; font-size:12px; line-height:1.6; color:var(--ink) }
.pending-action { display:flex; gap:14px; align-items:center; justify-content:space-between; padding:12px; margin-top:12px;
  border:1px solid #d9bd78; border-radius:8px; background:#fffcf3; overflow-wrap:anywhere }
.pending-action p,.pending-action small { font-size:11px; color:var(--dim) }
.pending-action button { flex-shrink:0 }
#task-detail { box-sizing:border-box; width:min(760px,calc(100vw - 28px)); max-height:calc(100dvh - 40px);
  margin:auto; padding:24px; border:1px solid var(--edge); border-radius:14px; background:var(--panel); color:var(--ink); overflow:auto }
#task-detail::backdrop { background:#14231980 }
.task-detail-toolbar { display:flex; justify-content:flex-end; gap:12px; margin-bottom:20px }
#task-detail h2 { color:var(--ink); font:normal 28px/1.3 Georgia,serif; letter-spacing:-.4px; text-transform:none; overflow-wrap:anywhere }
#task-detail h3 { margin:22px 0 8px; font-size:15px }
.task-state { margin:8px 0 18px; color:var(--dim); overflow-wrap:anywhere }
.task-facts { display:grid; grid-template-columns:140px minmax(0,1fr); gap:9px; font-size:12px }
.task-facts dt { color:var(--dim) }
.task-facts dd { margin:0; overflow-wrap:anywhere }
.task-question { margin-top:18px; padding:14px; border-radius:8px; border:1px solid #d9bd78; background:#fffcf3 }
#task-reports { margin-top:16px }
#task-reports .thread { margin-top:10px; overflow-wrap:anywhere }
.detail-empty { padding:18px 0; color:var(--dim) }
.task-detail-actions { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 8px }
@media(max-width:650px) {
  #work-loop { padding:15px }
  .pending-action { align-items:flex-start; flex-direction:column }
  #task-detail { padding:18px }
  .task-facts { grid-template-columns:1fr; gap:4px }
  .task-facts dd { margin-bottom:10px }
}

.owner-session { display:flex; align-items:center; flex-wrap:wrap; gap:8px; max-width:38rem; }
.owner-session [role="status"] { color:var(--dim); font-size:11px; }
.owner-session[hidden] { display:none; }

.task-record-body { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; margin:12px 0; }
.task-history { padding-left:22px; }
.task-history li { margin:10px 0; overflow-wrap:anywhere; }
.task-assignment { margin:10px 0; overflow-wrap:anywhere; }

.task-record-details { margin:10px 0; color:var(--dim); font-size:12px; overflow-wrap:anywhere; }
.task-record-details summary { cursor:pointer; }
.task-record-details .task-facts { margin:12px 0; }
.task-history > li { margin:16px 0; }

/* Roster inspection uses native buttons, with the existing name treatment. */
.bot-inspect { border:0; padding:0; background:transparent; color:var(--ink); text-align:left; overflow-wrap:anywhere }
.bot-inspect:hover { text-decoration:underline }
.ed-message { margin:12px 0; }

.ed-message-note:empty { display:none; }