/* Jarbou3i modern shell (UIX-2, ADR-0002): the global header and the
   workspace bar, built on the kernel (src/ui/kernel.css). The bar holds where
   you are (the three phases), what is true now (local processing, save state)
   and the single next action. Classes are .j-shell-*, layout only; the kernel
   contracts apply to every control inside. */

/* The header is the line's name board: an enamel bar closed by a thick ink rule. */
.j-shell { margin-bottom: var(--j-s-5); background: var(--j-panel); border-block-end: var(--j-rule) solid var(--j-ink); border-radius: var(--j-r-2) var(--j-r-2) 0 0; }
.j-shell-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--j-s-3) var(--j-s-4);
  min-height: 64px; padding: var(--j-s-3) var(--j-s-4);
}
/* The mascot and the wordmark, then the title and what the tool is for. */
.j-shell-brand { display: flex; align-items: center; gap: var(--j-s-3); min-width: 0; }
.j-shell-brand img { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--j-bg); }
.j-shell-mark {
  flex: none; padding-inline-end: var(--j-s-3); border-inline-end: 2px solid var(--j-line-strong);
  color: var(--j-fg); font: 700 var(--j-t-18)/1 var(--j-font-display); letter-spacing: -.01em;
}
.j-shell-brand-text { display: grid; gap: 2px; min-width: 0; }
.j-shell-brand h1 { font: 700 var(--j-t-16)/1.25 var(--j-font-display); color: var(--j-fg); }
/* What the tool is for and who it is for, under its name. */
.j-shell-lead { margin: 0; max-width: 72ch; color: var(--j-fg-muted); font-size: var(--j-t-13); line-height: 1.4; text-wrap: balance; }
/* Global context: the case open now, when there is one. Its own row: beside
   the header's controls a real title had room for a few letters. */
.j-shell-case {
  order: 3; flex-basis: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--j-fg-muted); font-size: var(--j-t-13);
}
.j-shell-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--j-s-2); margin-inline-start: auto; }
/* Density and theme: in the header's row, or below 900px in the Display menu,
   a popover the app places under its button. */
.j-shell-display { display: none; }
.j-shell-tools { display: contents; color: inherit; }
.j-shell-tool-name { display: none; }

.j-shell-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--j-s-3);
  padding: var(--j-s-2) var(--j-s-4);
  border-top: 1px solid var(--j-line); background: var(--j-panel);
}
.j-shell-nav { display: flex; flex-wrap: wrap; gap: var(--j-s-1); min-width: 0; }
.j-shell-phase {
  display: inline-flex; align-items: center; gap: var(--j-s-2);
  min-height: var(--j-control); padding: var(--j-s-1) var(--j-s-3);
  border: 0; border-radius: var(--j-r-pill);
  background: transparent; color: var(--j-fg-muted); text-align: start;
}
/* Only the hover tint fades in. The ink plate of the current phase inverts its
   text, so it switches at once: a half-faded plate would leave its text
   unreadable for a frame. */
.j-shell-phase:hover:not(:disabled, [aria-current="step"]) { background: var(--j-raise); color: var(--j-fg); transition: background-color var(--j-dur-1) var(--j-ease-out); }
/* The faint parts would fall under 4.5:1 on the raised background; a tapped
   phase stays hovered on a touch screen. */
.j-shell-phase:hover:not(:disabled, [aria-current="step"]) :is(.j-shell-phase-index, .j-shell-phase-copy small) { color: var(--j-fg-muted); }
.j-shell-phase:disabled { opacity: .45; cursor: not-allowed; }
/* The current phase: an ink plate with its station filled, not colour alone. */
.j-shell-phase[aria-current="step"] { color: var(--j-on-ink); background: var(--j-ink); }
/* Each phase is a station: a ring, its number for the eye only in the order. */
.j-shell-phase-index {
  inline-size: 14px; block-size: 14px; flex: none; overflow: hidden; border-radius: 50%;
  border: var(--j-station) solid currentColor; color: var(--j-fg-faint); font-size: 0;
}
.j-shell-phase[aria-current="step"] .j-shell-phase-index { color: var(--j-on-ink); background: var(--j-on-ink); }
.j-shell-phase-copy { display: grid; gap: 2px; }
.j-shell-phase-copy strong { font-size: var(--j-t-14); }
.j-shell-phase-copy small { font-size: var(--j-t-12); color: var(--j-fg-faint); }
/* On the ink plate the hint takes the plate's own text colour. */
.j-shell-phase[aria-current="step"] .j-shell-phase-copy small { color: var(--j-on-ink); opacity: .85; }
.j-shell-trust { margin-inline-start: auto; }
.j-shell-next { text-align: start; }
.j-shell-next-copy { display: grid; gap: 1px; }
.j-shell-next-copy small { font-size: var(--j-t-12); font-weight: 600; opacity: .85; }

[data-density="compact"] .j-shell-top, [data-density="compact"] .j-shell-bar { padding-block: var(--j-s-1); }
[data-density="compact"] .j-shell-phase-copy small { display: none; }

@media (max-width: 900px) {
  /* Icon-only below 900px; these buttons carry an aria-label from the app. */
  .j-shell-cluster > .j-btn > span:not([aria-hidden]) { display: none; }
  .j-shell-cluster .j-btn { min-width: var(--j-control); }
  .j-shell-cluster > .j-btn { padding: 0; }
  .j-shell-cluster .j-kbd { display: none; }
}
/* Without popovers the controls stay in the header's row. */
@supports selector(:popover-open) {
@media (max-width: 900px) {
  .j-shell-display { display: inline-flex; }
  .j-shell-tools { display: none; }
  .j-shell-tools:popover-open {
    position: absolute; inset: auto; margin: 0; display: grid; gap: var(--j-s-1); width: 240px; max-width: calc(100% - 16px);
    padding: var(--j-s-2); border: 1px solid var(--j-line-strong); border-radius: var(--j-r-2);
    background: var(--j-raise); color: var(--j-fg); box-shadow: var(--j-shadow);
  }
  /* In the menu a control reads as its name, then its state. */
  .j-shell-tools .j-btn, .j-shell-tools .j-btn[data-size="icon"] { width: 100%; padding: 0 var(--j-s-3); justify-content: flex-start; }
  .j-shell-tool-name { display: inline; }
  .j-shell-tools #densityLabel { margin-inline-start: auto; color: var(--j-fg-muted); }
}
}
@media (max-width: 720px) {
  /* A phone's first screen holds the topic field; the lead line waits for a wider one. */
  .j-shell-phase-copy small, .j-shell-trust, .j-shell-lead { display: none; }
  .j-shell-nav { flex: 1 1 100%; }
  .j-shell-phase { flex: 1 1 0; justify-content: center; }
  .j-shell-next { flex: 1 1 100%; }
  /* The guided flow carries the setup steps' one primary action; the header's
     next action comes back with an analysis. */
  .j-shell-next:not([data-shell-command="review"]) { display: none; }
}
@media (forced-colors: active) {
  .j-shell-phase[aria-current="step"] { forced-color-adjust: none; border: 2px solid Highlight; background: Highlight; color: HighlightText; }
  .j-shell-phase[aria-current="step"] :is(.j-shell-phase-copy small, .j-shell-phase-index) { color: HighlightText; }
  .j-shell-phase[aria-current="step"] .j-shell-phase-index { background: HighlightText; }
}