/* Parlaiment workbench — the SHARED frame every tool page stands on (design,
 * operate, research). A tool is a verb done to a network; this is what all of
 * them look like: a toolbar naming the object and its verbs, a notice bar for
 * the answer, and panes that fold and resize. A page adds its grid and its
 * rooms; it never redraws the frame.
 *
 * Beside sitekit.css. Loads AFTER platform.css, ui/sitekit/site.css and
 * sitekit.css (the tokens, the nav, the buttons, the sign-in pane) and BEFORE
 * the page's own stylesheet. Every color, font and spacing is a platform token
 * (--t-*). The behaviors are workbench.js.
 *
 * What a tool page is, in this vocabulary:
 *
 *   <main class="wb-main">
 *     <div class="wb-dead" id="…-dead">…</div>          the dead-script tell
 *     <div class="wb-head">                              sticky under the nav
 *       <div class="wb-toolbar">                         the object and its verbs
 *         <div class="wb-object">
 *           <span class="wb-object-name">…</span>
 *           <span class="wb-status is-valid">…</span>    a dot, then a few words
 *         </div>
 *         <div class="wb-actions">
 *           <button class="t-btn …">…</button>
 *           <span class="wb-menu"><button class="t-btn …">…</button>
 *             <div class="wb-dropdown" role="menu">…</div></span>
 *         </div>
 *       </div>
 *       <div class="wb-notice is-ok" hidden>…</div>      the answer bar
 *     </div>
 *     <div class="wb-workspace my-grid">                 the page sets the columns
 *       <aside class="wb-panel" data-side="left">        a pane: splitter, head, body
 *         <div class="wb-splitter" role="separator" tabindex="0"></div>
 *         <div class="wb-panel-head">
 *           <button class="wb-panel-toggle" aria-expanded="true">
 *             <span class="wb-panel-glyph"></span>
 *             <svg class="wb-panel-icon">…</svg>
 *             <span class="wb-panel-title">…</span>
 *           </button>
 *           <div class="wb-switch wb-tabs" role="tablist">…</div>
 *           <span class="wb-rail-count"></span>
 *           <span class="wb-counts">…</span>
 *         </div>
 *         <div class="wb-panel-body">…</div>
 *       </aside>
 *       <section class="wb-panel">…</section>           the middle: no side, no splitter
 *     </div>
 *   </main>
 *
 * A pane with a side folds (is-collapsed) into a rail and resizes by its
 * splitter; the mechanics are workbench.js's `foldable`. The page owns the
 * grid — which panes, how many columns, which --vars the splitters drive, and
 * what a folded pane does to the columns — so those rules stay in its sheet.
 */

.wb-main { display: flex; flex-direction: column; padding-top: var(--t-nav-height, 56px); height: 100vh; }

/* The dead-script tell. The page's script removes it as its first act; if it
   shows, nothing ran — so a broken page and an empty page never look alike. */
.wb-dead { padding: 10px 16px; background: var(--t-error-tint, #fdecea); color: var(--t-error, #b42318); font-size: var(--t-text-sm, 14px); }

/* ── The head: toolbar + notice, sticky under the kit's nav ─────────── */
.wb-head { position: sticky; top: var(--t-nav-height, 56px); z-index: 10; background: var(--t-white, #fff); }
.wb-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 20px; background: var(--t-white, #fff); border-bottom: 1px solid var(--t-border);
}
.wb-object { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.wb-object-name {
  font-weight: 600; font-size: var(--t-text-base, 16px); color: var(--t-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-status { font-size: var(--t-text-sm, 14px); color: var(--t-text-2); white-space: nowrap; }
.wb-status::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-inline-end: 6px; vertical-align: 1px; background: var(--t-muted, #999);
}
.wb-status.is-valid::before { background: var(--t-green, #40c057); }
.wb-status.is-invalid::before { background: var(--t-error, #b42318); }
.wb-status.is-checking::before { background: var(--t-warning, #ffc107); }
.wb-status.is-unavailable::before { background: var(--t-muted, #999); }
/* The last thing known, while the object has moved on and the next word is on its way: the dot
 * goes hollow — a shape, so the mark is not carried by colour or by dimness — and the words
 * step back a little and stay readable (4.5:1 and better on the kit's white). */
.wb-status.is-stale { opacity: .85; }
.wb-status.is-stale::before {
  -webkit-mask: radial-gradient(circle, transparent 2px, #000 2.6px);
  mask: radial-gradient(circle, transparent 2px, #000 2.6px);
}
.wb-actions { display: flex; align-items: center; gap: 8px; }

.wb-menu { position: relative; display: inline-block; }
.wb-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px;
  flex-direction: column; background: var(--t-white, #fff); border: 1px solid var(--t-border);
  border-radius: 8px; box-shadow: var(--t-shadow-md, 0 6px 20px rgba(0,0,0,.12)); padding: 6px; z-index: 20;
}
.wb-menu.is-open .wb-dropdown { display: flex; }
.wb-dropdown button {
  background: none; border: 0; text-align: left; cursor: pointer; padding: 9px 12px; border-radius: 6px;
  font: inherit; font-size: var(--t-text-sm, 14px); color: var(--t-text);
}
.wb-dropdown button:hover { background: var(--t-blue-tint); color: var(--t-blue); }

/* ── The notice: the answer bar under the toolbar ────────────────────── */
.wb-notice {
  padding: 5px 20px; font-size: 13px; line-height: 1.4; border-bottom: 1px solid var(--t-border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.wb-notice.is-ok   { background: var(--t-green-tint, #e9f8ec); color: var(--t-green-dark, #1e7a34); }
.wb-notice.is-err  { background: var(--t-error-tint, #fdecea); color: var(--t-error, #b42318); }
.wb-notice.is-ask  { background: var(--t-blue-tint, #eef4fc); color: var(--t-text); }
.wb-notice.is-warn { background: var(--t-warning-tint, #fff8e1); color: var(--t-warning-dark, #7a5c00); }
.wb-notice code { font-family: var(--t-font-mono); font-size: 0.95em; }
.wb-notice label { font-weight: 600; }
.wb-notice .wb-notice-actions { display: flex; gap: 8px; }
.wb-notice-close {
  margin-inline-start: auto; border: 0; background: none; padding: 0 4px; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--t-text-3);
}
.wb-notice-close:hover, .wb-notice-close:focus-visible { color: var(--t-text); }

/* ── The workspace: the page sets the columns; the frame sets the rest ── */
.wb-workspace { flex: 1; display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; }

/* ── A pane ───────────────────────────────────────────────────────────── */
.wb-panel { position: relative; background: var(--t-bg-alt, #f8f9fa); display: flex; flex-direction: column; min-height: 0; }
.wb-panel[data-side="right"] { border-inline-start: 1px solid var(--t-border); }
.wb-panel[data-side="left"]  { border-inline-end: 1px solid var(--t-border); }
.wb-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 6px; flex-wrap: wrap; }
.wb-panel-toggle {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 4px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: var(--t-text-base, 16px); color: var(--t-text);
}
.wb-panel-glyph::before { color: var(--t-text-2); }
.wb-panel[data-side="right"] .wb-panel-glyph::before { content: "\25B8"; }
.wb-panel[data-side="right"].is-collapsed .wb-panel-glyph::before { content: "\25C2"; }
.wb-panel[data-side="left"] .wb-panel-glyph::before { content: "\25C2"; }
.wb-panel[data-side="left"].is-collapsed .wb-panel-glyph::before { content: "\25B8"; }
.wb-panel-icon { display: none; color: var(--t-text-2); }
.wb-rail-count {
  display: none; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--t-blue, #1a5f9c);
}
.wb-rail-count.error { background: var(--t-error, #dc3545); }
.wb-rail-count.warning { background: var(--t-warning, #ffc107); color: var(--t-text); }
.wb-rail-count.clean { background: var(--t-green, #28a745); }
.wb-rail-count:empty { display: none !important; }
.wb-panel-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.wb-panel-body > [id$="-host"] { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.wb-panel-body > [id$="-host"][hidden] { display: none; }
/* The counts are information, not a control: they never intercept a click aimed at
   the bar beneath them, and they yield the row rather than crowd it. */
.wb-counts {
  font-size: var(--t-text-sm, 14px); color: var(--t-text-2);
  pointer-events: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Folded: the pane is a rail — the toggle stands up, the icon and the count show,
   everything else hides. */
.wb-panel.is-collapsed .wb-counts { flex-basis: auto; }
.wb-panel.is-collapsed .wb-panel-body { display: none; }
.wb-panel.is-collapsed .wb-panel-head { flex-direction: column; align-items: center; padding: 10px 0; gap: 10px; }
.wb-panel.is-collapsed .wb-panel-toggle { flex-direction: column; gap: 10px; padding: 4px; }
.wb-panel.is-collapsed .wb-panel-title,
.wb-panel.is-collapsed .wb-counts,
.wb-panel.is-collapsed .wb-switch { display: none; }
.wb-panel.is-collapsed .wb-panel-icon,
.wb-panel.is-collapsed .wb-rail-count { display: inline-flex; }

/* The switch: a few words, one on. A tab bar spans its pane and shares it evenly —
   toolbars, not buttons; a tab may be draggable, and the bar is the drop target. */
.wb-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--t-white, #fff); border: 1px solid var(--t-border); }
.wb-tabs { flex: 1; display: flex; min-width: 0; }
.wb-tabs button { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-tabs button[draggable] { cursor: grab; }
.wb-tabs.is-dropping { outline: 2px dashed var(--t-blue, #1a5f9c); outline-offset: -2px; }
.wb-switch button {
  background: none; border: 0; border-radius: 6px; padding: 4px 9px; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--t-text-2);
}
.wb-switch button:hover { color: var(--t-blue); }
.wb-switch button.is-on { background: var(--t-blue-tint, #eef4fc); color: var(--t-blue); font-weight: 600; }
/* A tab scrolled under the sticky nav is unclickable; scroll-margin keeps it clear. */
.wb-tabs button, .wb-panel-head { scroll-margin-top: calc(var(--t-nav-height, 56px) + 64px); }

/* ── The splitter ─────────────────────────────────────────────────────── */
.wb-splitter { position: absolute; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 5; touch-action: none; }
.wb-panel[data-side="right"] .wb-splitter { left: -4px; }
.wb-panel[data-side="left"] .wb-splitter { right: -4px; }
.wb-splitter:hover, .wb-splitter:focus-visible { background: var(--t-blue-tint); outline: none; }
/* The handle announces itself at rest — a faint rule with a grip — so "resizable" is
   discoverable. */
.wb-splitter::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--t-border); }
.wb-splitter::after { content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 34px; transform: translate(-50%, -50%); border-radius: 2px; background: var(--t-border); }
.wb-splitter:hover::after, .wb-splitter:focus-visible::after { background: var(--t-blue, #1a5f9c); }
body.is-resizing { cursor: col-resize; user-select: none; }

@media (max-width: 900px) {
  /* Definite height on a phone: the panes share the viewport and a sheet's bottom
     edge is the screen's, so the splitter drag and the fold gesture read true. dvh so
     the browser chrome collapsing does not leave a dead strip. (workbench.js's
     `narrow()` is this same 900px.) */
  .wb-main { height: 100dvh; min-height: 0; }
  .wb-toolbar { flex-wrap: wrap; padding: 10px 12px; }
  .wb-object { width: 100%; justify-content: space-between; }
  .wb-actions { width: 100%; flex-wrap: wrap; }
  .wb-actions .t-btn { flex: 1; min-height: 44px; font-size: var(--t-text-base, 16px); }
  .wb-menu { flex: 1; display: flex; }
  .wb-menu .t-btn { width: 100%; }
  .wb-dropdown { left: 0; right: 0; min-width: 0; }
  .wb-dropdown button { min-height: 44px; }
  .wb-notice { padding: 8px 12px; }
  .wb-notice .t-btn { min-height: 40px; }
  .wb-head { position: static; }
  /* Panes stack into sheets: side borders become top and bottom ones; splitters turn. */
  .wb-panel[data-side="right"] { border-inline-start: 0; border-top: 1px solid var(--t-border); }
  .wb-panel[data-side="left"]  { border-inline-end: 0; border-bottom: 1px solid var(--t-border); }
  .wb-splitter { left: 0; right: 0; width: auto; height: 8px; cursor: row-resize; }
  /* the sheet's edge spans its panel exactly: the desktop's -4px overhang would push the page 4px wide */
  .wb-panel[data-side="right"] .wb-splitter { top: -4px; bottom: auto; left: 0; }
  .wb-panel[data-side="left"] .wb-splitter { top: auto; bottom: -4px; right: 0; }
  body.is-resizing { cursor: row-resize; }
  .wb-panel.is-collapsed .wb-panel-head { flex-direction: row; align-items: center; padding: 8px 12px; gap: 0; }
  .wb-panel.is-collapsed .wb-panel-toggle { flex-direction: row; gap: 8px; }
  .wb-panel.is-collapsed .wb-panel-title,
  .wb-panel.is-collapsed .wb-counts { display: inline; }
  .wb-panel.is-collapsed .wb-panel-icon,
  .wb-panel.is-collapsed .wb-rail-count { display: none; }
  .wb-panel[data-side="right"] .wb-panel-glyph::before { content: "\25BE"; }
  .wb-panel[data-side="right"].is-collapsed .wb-panel-glyph::before { content: "\25B4"; }
  .wb-panel[data-side="left"] .wb-panel-glyph::before { content: "\25B4"; }
  .wb-panel[data-side="left"].is-collapsed .wb-panel-glyph::before { content: "\25BE"; }
  .wb-panel-toggle { min-height: 44px; }
  .wb-switch button { padding: 8px 9px; }
}