/* H7: shared shell composition. Pages never style the band. */
.surux-header-band { --surux-band-ink: var(--surux-primary); position:relative; isolation:isolate; min-width:0; border:var(--surux-border-width) solid var(--bs-border-color); border-radius:var(--surux-band-radius); background:var(--bs-body-bg); }
.surux-header-band :is(.surux-band-heading, .surux-band-top > .surux-page-header) :is(h1, .surux-eyebrow) {
  color: var(--surux-band-fg, var(--surux-text));
  text-shadow: 0 1px 2px var(--surux-band-shadow);
}
.surux-band-texture { position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; pointer-events:none; z-index:-1; }
/* C2: (0,1,0), replaces this owner's desktop wrap (0,1,0).
   Only the later <=767.98px rule (0,1,0) wraps, giving metrics a full row. */
.surux-band-top { display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:space-between; gap:1rem; padding:16px; }
.surux-band-heading { min-width:0; flex:0 1 auto; display:flex; flex-direction:column; align-items:flex-start; }
/* TR-0000621 / TR-0000922: crumbs are the text column's first line at every width.
   The row stretches across that column (flex-basis auto, so a column heading does
   not turn 100% into height). It is not a zero-width flex sibling of the title. */
.surux-header-band .surux-band-crumb-row {
  align-self:stretch; box-sizing:border-box; width:100%; min-width:0; flex:0 0 auto;
}
.surux-band-top > .surux-band-heading:has(.surux-band-crumb-row) { flex:1 1 auto; min-width:0; }
.surux-header-band .surux-band-crumb-row ol { flex-wrap:nowrap; min-width:0; max-width:100%; }
/* The Back control keeps the knob beside its label. min-width 0 on the link let a
   squeezed row paint the icon over the word. */
.surux-header-band .surux-band-crumb-row a { flex-shrink:0; min-width:max-content; white-space:nowrap; column-gap:8px; }
.surux-header-band .surux-band-crumb-row a > span:first-child { flex:0 0 1.25rem; }
.surux-band-top .surux-page-header { min-width:0; margin:0; align-items:flex-start; }
.surux-header-band .surux-page-header > div { align-items:flex-start; text-align:start; }
.surux-band-record-facts {
  display:flex; flex-wrap:wrap; justify-content:flex-start; gap:.65rem 1.25rem; margin:.55rem 0 0; padding:0;
  width:max-content; max-width:100%; overflow:visible;
}
/* The fact row uses the band width beside the tools, not the title's width, so a short
   loading title cannot wrap the reserved facts onto a second row. */
.surux-band-top:has(.surux-band-record-facts > .is-placeholder) > .surux-band-heading { flex:1 1 auto; min-width:0; }
.surux-band-top:has(.surux-band-record-facts > .is-placeholder) > .surux-band-heading .surux-band-record-facts { width:100%; }
.surux-band-record-facts > div { display:flex; flex-direction:column; gap:.08rem; min-width:7rem; flex:0 1 auto; }
.surux-band-record-facts dt {
  margin:0; font-size:.68rem; line-height:1.5; letter-spacing:.06em; text-transform:uppercase; color:var(--bs-secondary-color); font-weight:700;
  overflow-wrap:anywhere;
}
.surux-band-record-facts dd { margin:0; font-size:.85rem; line-height:1.5; font-weight:650; color:var(--bs-body-color); overflow-wrap:anywhere; }
.surux-band-record-facts > div.is-empty dd { font-weight:500; color:var(--bs-secondary-color); }
/* Loading keeps the loaded title and fact metrics so the band does not jump when values arrive. */
.surux-band-value-pending {
  color: transparent;
  background: color-mix(in srgb, var(--bs-secondary-color) 22%, transparent);
  border-radius: .35rem;
  box-decoration-break: clone;
  min-width: 8rem;
}
.surux-page-title-row h1 .surux-band-value-pending,
.surux-page-hero-copy .surux-band-value-pending {
  display: inline-block;
  min-height: 1.2em;
  min-width: 8rem;
}
/* A blank status pill keeps chip size. It never carries a guessed word. */
.surux-status-chip.surux-band-value-pending {
  display: inline-block;
  min-height: 1.375rem;
  min-width: 4.25rem;
}
.surux-band-record-facts > div.is-value-pending dd .surux-band-value-pending {
  display: inline-block;
  min-width: 7rem;
  min-height: .9rem;
  vertical-align: middle;
}
.surux-band-record-facts > div.is-placeholder dt span,
.surux-band-record-facts > div.is-placeholder dd span {
  display: block;
  /* One text line: 1.5em is the dt/dd line box, so the row does not grow when values arrive. */
  height: 1.5em;
  width: 5.5rem;
  margin: 0;
  border-radius: .3rem;
  background: color-mix(in srgb, var(--bs-secondary-color) 22%, transparent);
}
.surux-band-record-facts > div.is-placeholder dd span { width: 7rem; }
.surux-edit-tab-frame > .surux-tab-list > .surux-tab-button { pointer-events: none; }
.surux-header-band .surux-band-notice { margin:0 16px 12px; }
.surux-band-metrics { min-width:0; flex:1 1 12rem; display:flex; align-items:center; overflow-x:auto; overscroll-behavior-x:contain; padding-inline-end:.35rem; }
.surux-band-metrics:not(:has(.surux-metric-strip)) { display:none; }
.surux-band-metrics .surux-metric-strip {
  display:flex; flex-wrap:wrap; gap:.5rem; width:100%; min-width:0;
  grid-template-columns:none;
}
/* TR-0000916. Selectable strips have only lived in page bodies, where each tile is a full
   column. Inside the band they share the compact metric row: auto width, wrap only when the
   band is narrow, and the same selected, focus and keyboard treatment. Specificity matches
   the isolated C18 grid and this sheet loads later, so body strips are unchanged. */
.surux-band-metrics .surux-metric-strip.surux-metric-strip-selectable {
  display:flex; flex-wrap:wrap; align-items:stretch; gap:.5rem; width:100%; min-width:0;
  grid-template-columns:none;
}
@media (min-width: 768px) {
  .surux-band-metrics .surux-metric-strip.surux-metric-strip-selectable { flex-wrap:nowrap; }
}
.surux-band-metrics .surux-metric-strip-selectable .surux-metric-strip-item {
  width:auto; max-width:100%; flex:0 1 auto; min-width:0; min-height:0;
  padding:.4rem .7rem .35rem 1.85rem; border-radius:.5rem;
}
.surux-band-metrics .surux-metric-strip-selectable .surux-metric-strip-arrow {
  width:1.45rem; border-radius:.4rem 0 0 .3rem;
}
.surux-band-metrics .surux-metric-strip-selectable .surux-metric-strip-icon {
  left:.4rem; top:calc(50% - .55rem); width:.9rem; height:1.1rem; font-size:.85rem;
}
.surux-band-metrics .surux-metric-strip-selectable .surux-metric-strip-check {
  top:.2rem; right:.25rem; font-size:.7rem;
}
.surux-band-metrics .surux-metric-strip-selectable .surux-metric-strip-copy { gap:.05rem; }
.surux-band-metrics .surux-metric-strip-selectable .surux-metric-strip-copy strong {
  display:inline-block; min-width:2.25rem; min-height:1.05rem;
  font-size:1.05rem; font-weight:650; line-height:1.1;
}
.surux-band-metrics .surux-metric-strip-selectable .surux-metric-strip-label {
  font-size:.68rem; line-height:1.2;
}
.surux-band-metrics .surux-metric-strip-selectable .surux-metric-strip-divider { margin:.08rem 0; }
.surux-band-metrics .surux-metric-strip-selectable[aria-busy="true"] .surux-metric-strip-copy strong {
  color:transparent;
  background-color:color-mix(in srgb, var(--bs-secondary-color) 22%, transparent);
  border-radius:.3rem;
}
/* One sweep for every pending value in the band. Tile captions and fact labels stay text. */
@keyframes surux-band-sweep {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
.surux-header-band[data-surux-band-loading="true"] :is(.surux-band-value-pending, .surux-band-record-facts > div.is-placeholder span),
.surux-page-shell-loading .surux-band-value-pending,
.surux-band-metrics .surux-metric-strip[aria-busy="true"] .surux-metric-strip-copy strong,
.surux-band-metrics .surux-metric-strip-selectable[aria-busy="true"] .surux-metric-strip-copy strong {
  background-image: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--bs-body-bg) 55%, var(--bs-secondary-color)) 50%, transparent 70%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: surux-band-sweep 1.6s linear infinite;
}
/* C2: (0,2,0) beats isolated .surux-metric-tile[b-*] (0,2,0),
   loaded earlier in SuruX.Web.styles.css. Preserve the original band tile sizing. */
.surux-band-metrics .surux-metric-tile { flex:1 0 7.5rem; padding:.45rem .65rem; gap:.5rem; }
.surux-band-metrics .surux-metric-copy strong { font-size:1.05rem; }
.surux-band-metrics .surux-metric-copy > span { margin-top:.1rem; }
.surux-band-tools { --surux-icon-only-subtle-size: 46px; display:flex; align-items:flex-start; align-self:flex-start; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; flex-shrink:0; line-height:1; margin:0; }
html .surux-band-tools .surux-page-helper > .surux-command-overflow-trigger {
  --surux-button-radius: 999px;
  margin:0;
}
.surux-band-tools .surux-page-helper-actions { margin:0; line-height:1; min-width:0; min-height:0; }
.surux-page-helper-inline:empty { display:none; }
.surux-band-tools .surux-page-helper,
.surux-band-tools .surux-command-overflow {
  display:flex; align-items:flex-start; margin:0; padding:0; line-height:1; min-width:0; min-height:0;
}
.surux-band-tools .surux-choice-compact .surux-segmented-control { height:46px; min-height:46px; }
.surux-band-segments { display:flex; flex-wrap:nowrap; border-top:1px solid var(--bs-border-color); padding:.5rem .75rem; gap:12px; }
.surux-band-segment { display:flex; align-items:center; flex:1; min-width:0; color:var(--surux-band-ink); }
.surux-band-segment.is-urgent { color:var(--surux-danger); }
.surux-band-segment.is-zero { opacity:.45; }
.surux-band-filter { color:inherit; flex:1; min-width:0; padding:.5rem; font-size:11px; text-decoration:none; border-radius:8px; white-space:nowrap; }
.surux-band-filter[aria-pressed="true"] { background:color-mix(in srgb, currentColor 12%, transparent); outline:1px solid currentColor; }
.surux-band-filter b { display:inline-block; font-size:13px; font-variant-numeric:tabular-nums; }
.surux-band-filter [data-band-amount], .surux-band-peek-row [data-band-amount] { margin-left:.35rem; font-variant-numeric:tabular-nums; }
.surux-band-filter small { margin-left:.3rem; color:var(--bs-secondary-color); }
.surux-band-share { display:block; height:2px; margin-top:.4rem; background:color-mix(in srgb, currentColor 10%, transparent); border-radius:3px; overflow:hidden; }
.surux-band-share i { display:block; width:100%; height:100%; background:currentColor; transform-origin:left; }
.surux-band-peek-row.surux-command-button { width:100%; white-space:normal; text-align:left; display:flex; justify-content:space-between; gap:1rem; padding:.6rem; color:var(--bs-body-color); text-decoration:none; }
.surux-band-peek .surux-command-overflow-panel { top:calc(100% + .35rem); bottom:auto; min-width:280px; max-height:50vh; overflow:auto; }
.surux-band-activity { margin:0 1.25rem .5rem; font-size:.85rem; color:var(--surux-band-ink); }
.surux-band-refresh.is-pending { outline:2px solid var(--surux-warning-fill); }
/* C2 third pass: only metric-bearing record headings share the remaining width.
   Keep compact identity-only headings (Device edit) and fact-free bands intact. */
@media(min-width:768px) {
 .surux-band-top:has(.surux-band-record-facts):has(.surux-band-metrics .surux-metric-strip) > .surux-band-heading { flex:1 1 0; min-width:0; }
 .surux-band-top:has(.surux-band-record-facts):has(.surux-band-metrics .surux-metric-strip) .surux-band-record-facts { width:100%; flex-wrap:wrap; }
 .surux-band-top:has(.surux-band-record-facts) > .surux-band-metrics {
   min-width:calc(15.5rem + .35rem);
   flex:0 0 clamp(15.85rem, calc(100% - 36.5rem - 4.875rem), 31.85rem);
 }
 .surux-band-top:has(.surux-band-record-facts):has(.surux-band-metrics .surux-metric-strip:not(.surux-metric-strip-selectable):has(.surux-metric-strip-item)) > .surux-band-metrics {
   flex: 1 0 100%;
   width: 100%;
   min-width: 0;
   max-width: 100%;
   overflow-x: visible;
 }
}
/* Record-bearing bands use complete rows at every width, including phones. */
.surux-band-top:has(.surux-band-record-facts) > .surux-band-metrics {
  container-type:inline-size; container-name:record-band-metrics;
}
 .surux-band-top:has(.surux-band-record-facts) .surux-band-metrics .surux-metric-strip {
   display:grid; grid-template-columns:repeat(2, minmax(7.5rem, 1fr));
 }
 @container record-band-metrics (min-width:31.5rem) {
   .surux-band-top:has(.surux-band-record-facts) .surux-band-metrics .surux-metric-strip {
     grid-template-columns:repeat(4, minmax(7.5rem, 1fr));
   }
 }
.surux-band-top:has(.surux-band-record-facts) .surux-band-metrics .surux-metric-tile { min-width:0; }
/* Non-selectable Metrics strips (strip items, not the Items tiles and not a selectable
   strip) show the whole label and value. They take a full row under the record facts
   and wrap tiles; the band does not scroll or clip them. */
.surux-band-top:has(.surux-metric-strip:not(.surux-metric-strip-selectable) .surux-metric-strip-item) {
  flex-wrap: wrap;
}
.surux-band-top:has(.surux-metric-strip:not(.surux-metric-strip-selectable) .surux-metric-strip-item) > .surux-band-metrics {
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: visible;
  order: 3;
}
.surux-band-metrics:has(> .surux-metric-strip:not(.surux-metric-strip-selectable):has(.surux-metric-strip-item)) {
  overflow-x: visible;
}
.surux-band-top:has(.surux-band-record-facts) .surux-band-metrics .surux-metric-strip:not(.surux-metric-strip-selectable):has(.surux-metric-strip-item),
.surux-band-metrics .surux-metric-strip:not(.surux-metric-strip-selectable):has(.surux-metric-strip-item) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .5rem;
  width: 100%;
  min-width: 0;
  grid-template-columns: none;
}
.surux-band-metrics .surux-metric-strip:not(.surux-metric-strip-selectable) .surux-metric-strip-item {
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  min-width: max-content;
  min-height: 0;
  height: auto;
}
.surux-band-metrics .surux-metric-strip:not(.surux-metric-strip-selectable) .surux-metric-strip-label,
.surux-band-metrics .surux-metric-strip:not(.surux-metric-strip-selectable) .surux-metric-strip-copy strong {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
@media(max-width:767.98px) {
 .surux-band-top { padding:12px 1rem; flex-wrap:wrap; }
 .surux-band-top > :is(.surux-page-header, .surux-band-heading) { flex:1 1 auto; min-width:0; }
 .surux-band-metrics { flex:1 0 100%; order:3; }
 .surux-band-metrics .surux-metric-tile { flex:0 0 auto; min-width:8.25rem; }
 .surux-band-tools { flex-shrink:1; }
 .surux-band-segments { flex-wrap:wrap; overflow-x:visible; }
 .surux-band-segment { flex:1 1 8rem; min-width:0; max-width:100%; }
 .surux-band-filter { overflow:hidden; text-overflow:ellipsis; }
 .surux-band-peek[open] .surux-command-overflow-panel { position:fixed; inset:auto 0 0; width:100%; max-width:none; border-radius:16px 16px 0 0; z-index:1080; }
 .surux-header-band .surux-band-notice { margin:0 1rem 12px; }
}
/* Compact headers keep the existing IconOnly helper beside the breadcrumb.
   The tools wrappers have no separate box/texture plate at this width. Other
   supplied tools remain in flow; the helper and its popover are not duplicated. */
@media(max-width:575.98px) {
 .surux-band-top > :is(.surux-page-header, .surux-band-heading) { width:100%; }
 .surux-band-top .surux-page-header,
 .surux-band-top .surux-page-header > div { width:100%; }
 .surux-band-tools,
 .surux-band-tools .surux-page-helper-actions { display:contents; }
 .surux-band-tools .surux-page-helper {
   position:absolute;
   inset-block-start:12px;
   inset-inline-end:1rem;
 }
 .surux-header-band .surux-band-crumb-row {
   width:100%;
   box-sizing:border-box;
   min-height:46px;
   padding-inline-end:calc(46px + .5rem);
 }
 .surux-header-band .surux-band-crumb-row ol { flex-wrap:wrap; }
 .surux-header-band:not(:has(.surux-band-crumb-row)) .surux-page-header .surux-eyebrow {
   min-height:46px;
   padding-inline-end:calc(46px + .5rem);
 }
}
@media(prefers-reduced-motion:reduce) {
  .surux-header-band * { scroll-behavior:auto; }
  .surux-header-band[data-surux-band-loading="true"] :is(.surux-band-value-pending, .surux-band-record-facts > div.is-placeholder span),
  .surux-page-shell-loading .surux-band-value-pending,
  .surux-band-metrics .surux-metric-strip[aria-busy="true"] .surux-metric-strip-copy strong,
  .surux-band-metrics .surux-metric-strip-selectable[aria-busy="true"] .surux-metric-strip-copy strong {
    animation: none;
  }
}

.surux-band-peek-row .surux-command-button-text { flex:1; white-space:normal; }

/* TR-0000322: option B ghost triggers and shared compass helper. */
.surux-band-segment { border-radius: 8px; }
.surux-band-segment:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
.surux-band-peek > .surux-command-overflow-trigger {
  opacity: 0; background: transparent; border: 0; box-shadow: none; color: inherit;
}
.surux-band-peek > .surux-command-overflow-trigger::before,
.surux-band-peek > .surux-command-overflow-trigger::after { display: none; }
.surux-band-segment:hover .surux-band-peek > .surux-command-overflow-trigger,
.surux-band-segment:focus-within .surux-band-peek > .surux-command-overflow-trigger,
.surux-band-peek[open] > .surux-command-overflow-trigger { opacity: 1; background: transparent; box-shadow: none; }
@media (hover: none) { .surux-band-peek > .surux-command-overflow-trigger { opacity: 1; } }
.surux-page-helper-actions, .surux-page-helper-inline { display: flex; align-items: center; gap: .5rem; }
.surux-page-helper > .surux-command-overflow-trigger { border-radius: 50%; }
.surux-page-title-row .surux-page-helper > .surux-command-overflow-trigger { color: var(--surux-primary); }
.surux-page-title-row .surux-page-helper-actions { align-items: center; }
.surux-page-helper .surux-command-overflow-panel > section { display: grid; gap: .4rem; padding: .6rem; }
.surux-page-helper [data-surux-page-legend] .surux-choice-label { margin-bottom: 0; }
.surux-page-helper [data-surux-page-legend] .surux-legend { margin-top: 0; }
.surux-page-helper .surux-command-overflow-panel > section + section { border-top: 1px solid var(--surux-border); }
.surux-page-helper-chrome {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .6rem .6rem 0;
}
.surux-page-helper-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
}
.surux-page-helper-toolbar [data-surux-helper-spillover] { display: contents; }
.surux-page-helper-about-body {
  margin: 0;
  padding: 0;
  white-space: normal;
}
.surux-page-helper .surux-page-helper-toolbar .surux-command-button:focus-visible {
  outline: 2px solid var(--surux-primary);
  outline-offset: 2px;
}
/* Participate in the parent form grid: texture and motion are separate rows.
   The page helper overrides this so the narrow popover stays a stacked column. */
.surux-header-preferences {
  display: contents;
}
.surux-page-helper .surux-header-preferences {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.surux-page-helper .surux-header-preferences .surux-choice-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.surux-page-helper .surux-header-preferences .surux-choice-label,
.surux-page-helper .surux-header-preferences .surux-field-label-cluster > .surux-choice-label {
  margin: 0;
}
.surux-page-helper .surux-header-preferences .surux-field-label-cluster { gap: 6px; }
.surux-page-helper .surux-header-motion { padding-bottom: .6rem; }
.surux-page-helper > .surux-command-overflow-panel[popover],
.surux-band-peek > .surux-command-overflow-panel[popover] {
  position: fixed; margin: 0; box-sizing: border-box; overflow: auto;
  min-width: min(280px, calc(100vw - 16px)); max-width: calc(100vw - 16px);
}
/* The shared overflow panel opens above its trigger. On a header band that trigger is at the
   top of the page, so the menu (and the actions parked in it) sit above the viewport. Open
   downward from the trigger and keep the end edge inside the band. */
.surux-header-band .surux-page-helper > .surux-command-overflow-panel {
  top: calc(100% + .35rem);
  right: 0;
  bottom: auto;
  left: auto;
  max-width: calc(100vw - 16px);
  max-height: min(70vh, calc(100dvh - 5rem));
}
.surux-band-peek-row .surux-command-button-text { white-space: nowrap; }
.surux-band-status-dot { flex: 0 0 .5rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--surux-status-color, currentColor); order: -1; }
@media(max-width:767.98px) {
  .surux-page-helper > .surux-command-overflow-panel[popover],
  .surux-band-peek > .surux-command-overflow-panel[popover] { width: calc(100vw - 16px); min-width: 0; border-radius: 16px 16px 0 0; max-height: 85dvh; }
}

/* Option A: out of flow, centred in the content shell below the app bar. */
.surux-page-shell { position:relative; --surux-shell-layer-band: 40; }
.surux-activity-notice {
 position:absolute; top:10px; left:50%; z-index:30; max-width:min(560px,calc(100% - 24px));
 display:flex; align-items:center; gap:10px; padding:6px 8px 6px 12px; border-radius:999px;
 border:1px solid var(--bs-border-color); background:var(--bs-body-bg); color:var(--bs-body-color);
 box-shadow:0 8px 24px color-mix(in srgb,var(--bs-body-color) 14%,transparent); font-size:13px;
 opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-14px);
 transition:opacity 250ms,transform 250ms cubic-bezier(.23,1,.32,1),visibility 250ms;
}
.surux-activity-notice.is-visible { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.surux-activity-notice-dot { width:8px; height:8px; border-radius:50%; background:var(--surux-success-fill); flex:none; }
.surux-activity-notice-link { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:inherit; background:none; border:0; padding:0; font:inherit; text-decoration:none; }
button.surux-activity-notice-link { cursor:pointer; }
.surux-activity-notice-age { color:var(--bs-secondary-color); white-space:nowrap; }
.surux-activity-notice-more { background:color-mix(in srgb, var(--surux-success-fill) 16%, transparent); color:var(--surux-success); border-radius:9px; padding:1px 7px; white-space:nowrap; font-weight:700; }
[data-bs-theme="light"]:not([data-surux-theme="night"]) .surux-activity-notice-more,
[data-surux-appearance="warm-light"] .surux-activity-notice-more {
  background: color-mix(in srgb, var(--surux-success-fill) 17%, transparent);
  color: color-mix(in srgb, var(--surux-success) 80%, #000);
}
.surux-activity-notice-dismiss { border:0; background:none; color:var(--bs-secondary-color); cursor:pointer; font-size:15px; padding:4px 8px; }
.surux-activity-notice :is(a,button):focus-visible { outline:2px solid var(--surux-success-fill); outline-offset:2px; }
@media(prefers-reduced-motion:reduce) {
 .surux-activity-notice, .surux-activity-notice.is-visible { transform:translate(-50%,0); transition:opacity 250ms,visibility 250ms; }
}
html[data-surux-header-motion="still"] .surux-activity-notice { transform:translate(-50%,0); transition:opacity 250ms,visibility 250ms; }

@starting-style { .surux-activity-notice.is-visible { opacity:0; } }

/* Stretch the record/refresh action over the pill; dismissal remains a separate target. */
.surux-activity-notice :is(a,button).surux-activity-notice-link::after { content:""; position:absolute; inset:0; border-radius:inherit; }
.surux-activity-notice-dismiss { position:relative; z-index:1; }

.surux-header-band { flex:0 0 auto; margin-bottom:var(--surux-section-gap); }
.surux-header-band .surux-page-title-row h1 { font-size:30px; line-height:1.2; margin-bottom:0; }
@media(min-width:768px) { .surux-page-helper > .surux-command-overflow-panel[popover] { width:340px; } }