/* 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: var(--surux-band-text-halo, 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 { flex:0 1 auto; min-width:min(100%, var(--surux-band-heading-min)); 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:min(100%, var(--surux-band-heading-min)); }
.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:min(100%, var(--surux-band-heading-min)); }
.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;
  text-shadow: var(--surux-band-text-halo, none);
}
.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; text-shadow: var(--surux-band-text-halo, none); }
.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 {
  /* The strip owns --surux-metric-count and is the flex item. Width lives in surux.metric-strip.css. */
  display: contents;
}
.surux-band-metrics:empty { display: none; }
/* 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 {
  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;
}
/* Band tools and segments are opaque keys. They hide only the art directly behind them. */
.surux-header-band .surux-band-tools .surux-command-overflow-trigger,
.surux-header-band .surux-band-tools .surux-command-button,
.surux-header-band .surux-band-segment,
.surux-header-band .surux-band-filter {
  background-color: var(--surux-band-key-bg, var(--surux-surface));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.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:var(--surux-section-gap); }
.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); }
@media(min-width:768px) {
 /* Zero basis: the heading takes free space and keeps 16rem, and the rail keeps the width of N tiles. */
 .surux-band-top:has(.surux-band-record-facts):has(.surux-band-metrics) > .surux-band-heading { flex:1 1 0; min-width:min(100%, var(--surux-band-heading-min)); }
 .surux-band-top:has(.surux-band-record-facts):has(.surux-band-metrics) .surux-band-record-facts { width:100%; flex-wrap:wrap; }
}
@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-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 {
    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; } }


/* One halo token. Heading, eyebrow, description, record facts and crumbs all read it.
   The ink is the channel inverse of --surux-band-fg on the element that paints the text,
   so light Flat Vivid ink gets a dark halo and dark ink gets a light one. Sky and seasons
   always need it. Scary on a light theme measured under 4.5:1; dark scary measured over it. */
.surux-header-band :is(.surux-page-header .surux-page-description, .surux-band-crumb-row) {
  text-shadow: var(--surux-band-text-halo, none);
}
html[data-surux-header-texture="sky"] :is(.surux-band-heading, .surux-band-top > .surux-page-header, .surux-band-record-facts),
html:not([data-bs-theme="light"])[data-surux-header-texture="seasons"] :is(.surux-band-heading, .surux-band-top > .surux-page-header, .surux-band-record-facts),
html[data-bs-theme="light"]:not([data-surux-theme="night"])[data-surux-header-texture="scary"] :is(.surux-band-heading, .surux-band-top > .surux-page-header, .surux-band-record-facts),
html[data-surux-colour-style="vivid"]:not([data-bs-theme="light"])[data-surux-header-texture="scary"] :is(.surux-band-heading, .surux-band-top > .surux-page-header, .surux-band-record-facts),
html[data-surux-appearance="warm-light"][data-surux-header-texture="scary"] :is(.surux-band-heading, .surux-band-top > .surux-page-header, .surux-band-record-facts) {
  /* --surux-app-bg is dark on dark themes and light on light themes, so the fallback tracks the theme. Relative colour replaces it with the channel inverse of the text. */
  --surux-band-halo-ink: var(--surux-app-bg);
  --surux-band-text-halo: 0 0 2px var(--surux-band-halo-ink), 0 1px 2px var(--surux-band-halo-ink), 0 0 1px var(--surux-band-halo-ink);
}
/* Light themes paint dark text, so the unsupported-colour fallback is the light surface.
   Flat Vivid's light band text is the case the @supports inverse covers. */
html[data-bs-theme="light"]:not([data-surux-theme="night"])[data-surux-header-texture="sky"] :is(.surux-band-heading, .surux-band-top > .surux-page-header, .surux-band-record-facts),
html[data-bs-theme="light"]:not([data-surux-theme="night"])[data-surux-header-texture="scary"] :is(.surux-band-heading, .surux-band-top > .surux-page-header, .surux-band-record-facts),
html[data-surux-appearance="warm-light"][data-surux-header-texture="scary"] :is(.surux-band-heading, .surux-band-top > .surux-page-header, .surux-band-record-facts) {
  --surux-band-halo-ink: var(--surux-surface);
}
@supports (color: rgb(from red r g b)) {
  html[data-surux-header-texture="sky"] :is(.surux-band-heading, .surux-band-top > .surux-page-header, .surux-band-record-facts),
  html:not([data-bs-theme="light"])[data-surux-header-texture="seasons"] :is(.surux-band-heading, .surux-band-top > .surux-page-header, .surux-band-record-facts),
  html[data-bs-theme="light"]:not([data-surux-theme="night"])[data-surux-header-texture="scary"] :is(.surux-band-heading, .surux-band-top > .surux-page-header, .surux-band-record-facts),
  html[data-surux-colour-style="vivid"]:not([data-bs-theme="light"])[data-surux-header-texture="scary"] :is(.surux-band-heading, .surux-band-top > .surux-page-header, .surux-band-record-facts),
  html[data-surux-appearance="warm-light"][data-surux-header-texture="scary"] :is(.surux-band-heading, .surux-band-top > .surux-page-header, .surux-band-record-facts) {
    --surux-band-halo-ink: rgb(from var(--surux-band-fg, var(--surux-text)) calc(255 - r) calc(255 - g) calc(255 - b));
  }
}