/* S45, acting as an owner: the A-16 banner (slot 2 of the dashboard shell) and its start page on the admin host. */

/* The banner, as the owner-shell canvas draws it: info-ink with on-inverse text (8.31:1), at least shell-actas-h tall,
   growing when the sub-line wraps. Stop keeps its width; the sub-line wraps instead. */
.bh-actas {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--shell-actas-h); padding: 6px var(--space-2) 6px var(--space-4);
  background: var(--info-ink); color: var(--on-inverse);
}
.bh-actas > .bh-icon { flex: none; }
.bh-actas-text { flex: 1 1 auto; min-width: 0; display: grid; }
.bh-actas-title { font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }
.bh-actas-sub { font-size: var(--text-label); line-height: var(--leading-label); }
.bh-actas > form { flex: none; }
/* Stop is the on-dark button: the banner's own colours, with the inverse focus ring. */
.bh-actas-stop { background: transparent; border-color: var(--on-inverse); color: var(--on-inverse); }
.bh-actas-stop:hover { background: rgb(255 255 255 / 12%); color: var(--on-inverse); }
.bh-actas-stop:focus-visible { box-shadow: 0 0 0 2px var(--info-ink), 0 0 0 4px var(--on-inverse); }

/* From 1024 px the shell's sidebar is sticky under the strips above it (dashboard.css), so the banner joins them:
   it sticks below the environment strip, where there is one, and the shell counts its height. */
@media (min-width: 1024px) {
  .bh-actas { position: sticky; top: 0; z-index: 3; }
  .bh-env:has(+ .bh-actas) { position: sticky; top: 0; z-index: 4; }
  .bh-env + .bh-actas { top: var(--shell-env-h); }
  .bh-actas + .bh-shell { --bh-env-h: var(--shell-actas-h); }
  .bh-env + .bh-actas + .bh-shell { --bh-env-h: calc(var(--shell-env-h) + var(--shell-actas-h)); }
}

/* A-16's start page: the limits, then the reason. */
.bh-actas-start { display: grid; gap: var(--space-4); }
.bh-actas-limits { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font-size: var(--text-small); line-height: var(--leading-small); }
.bh-actas-limits > li { display: flex; align-items: flex-start; gap: var(--space-2); }
.bh-actas-limits > li > .bh-icon { flex: none; color: var(--ink-2); }
.bh-actas-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.bh-actas-actions > .bh-recorded { flex: 1 1 100%; margin: 0; }
@media (min-width: 768px) {
  .bh-actas-actions > .bh-recorded { flex: 1 1 auto; }
}