/* ────────────────────────────────────────────────────────────
   App Header — shared dark-control component classes
   Used inside <header style="background:var(--bg-dark-hero);">
   on every authed page. Source: design system §10.
   ──────────────────────────────────────────────────────────── */

.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-dark-button);
  border: 1px solid var(--border-on-dark);
  border-radius: 9999px;
  padding: 8px 16px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.btn-dark:hover         { border-color: rgba(255,255,255,0.5); }
.btn-dark:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Select variant — adds inline-SVG chevron + min-width.
   Use on a <select> alongside class="btn-dark btn-dark--select". */
.btn-dark--select {
  padding: 12px 40px 12px 16px;
  font-size: 14px;
  min-width: 220px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Danger variant — for the "Close survey" pill in the hero. */
.btn-dark--danger { background: var(--color-toxic); }
.btn-dark--danger:hover { border-color: rgba(255,255,255,0.5); }


/* ────────────────────────────────────────────────────────────
   Masthead — the editorial dark-hero band that sits at the top
   of every authed page. Replaces the old utility-bar + title
   strip pair. Rendered by shared/_masthead.html.
   ──────────────────────────────────────────────────────────── */

.mast        { background: var(--bg-dark-hero); color: #fff; }
.mast-wrap   { max-width: 1152px; margin: 0 auto; padding: 0 20px; }

/* Utility bar — brand + nav links + logout. 44px row with 24px top breathing. */
.mast-utility { display: flex; align-items: center; justify-content: space-between;
                height: 44px; padding-top: 24px; }
.mast-brand   { display: flex; align-items: center; gap: 11px; color: #fff;
                text-decoration: none; }
.mast-brand-img { width: 24px; height: 24px; border-radius: 6px; object-fit: contain;
                  flex: 0 0 auto; display: block; }
.mast-wordmark  { font-family: var(--font-sans); font-weight: 600; font-size: 15px;
                  letter-spacing: 0.01em; }

.mast-nav      { display: flex; align-items: center; gap: 22px;
                 font-family: var(--font-sans); font-weight: 500; font-size: 13px; }
.mast-nav-link { color: rgba(255,255,255,0.6); text-decoration: none;
                 transition: color 150ms var(--ease-out); white-space: nowrap; }
.mast-nav-link:hover,
.mast-nav-link.is-active { color: #fff; }
.mast-nav-logout { color: rgba(255,255,255,0.4); max-width: 24ch;
                   overflow: hidden; text-overflow: ellipsis; }
.mast-nav-badge  { display: inline-block; margin-left: 4px; padding: 1px 7px;
                   background: var(--color-toxic); color: #fff; border-radius: 9999px;
                   font-size: 11px; font-weight: 600; vertical-align: 1px; }

/* Eyebrow rule — small uppercase label on a hairline. */
.mast-eyebrow       { display: flex; justify-content: space-between; align-items: baseline;
                      margin-top: 52px; padding-bottom: 16px;
                      border-bottom: 1px solid rgba(255,255,255,0.16); gap: 16px;
                      flex-wrap: wrap; }
.mast-eyebrow-left  { font-family: var(--font-sans); font-weight: 700; font-size: 11px;
                      text-transform: uppercase; letter-spacing: 0.22em; color: #7fd3c5;
                      white-space: nowrap; }
.mast-eyebrow-right { font-family: var(--font-sans); font-weight: 600; font-size: 11px;
                      text-transform: uppercase; letter-spacing: 0.18em;
                      color: rgba(255,255,255,0.45); white-space: nowrap; }

/* Headline + context. Serif Newsreader 400, italic teal accent word. */
.mast-title-block { padding-top: 30px; }
/* When there's no action bar below, give the hero the same bottom
   breathing room the action bar would have occupied so it doesn't end
   abruptly under the context line. */
.mast-title-block:last-child { padding-bottom: 80px; }
.mast-h1          { font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
                    font-weight: 400; font-size: clamp(32px, 6vw, 56px);
                    line-height: 1.12; letter-spacing: -0.015em; color: #fff;
                    margin: 0; }
.mast-h1-accent   { font-style: italic; color: #7fd3c5; }
.mast-context     { margin-top: 20px; font-family: var(--font-sans); font-weight: 400;
                    font-size: 14px; color: rgba(255,255,255,0.5); letter-spacing: 0.01em; }

/* Action bar — section tabs on the left, save buttons on the right. */
.mast-actions { margin-top: 30px; padding: 20px 0 30px;
                border-top: 1px solid rgba(255,255,255,0.16);
                display: flex; justify-content: space-between; align-items: center;
                gap: 16px; flex-wrap: wrap; }

/* The action bar sits outside the header so it can stick to the top of the
   window. It keeps one height whether stuck or not: a bar that resizes as it
   sticks moves the page, and the browser's scroll correction then unsticks
   it again, so it trembles. The masthead around it takes the spacing the bar
   used to hold: 30px above the bar's top rule, as before, and a dark tail
   below that scrolls away. */
.mast:has(+ .mast-bar) { padding-bottom: 30px; }
/* The bar follows the header, so the title block is no longer the last thing in a hero without one */
.mast:has(+ .mast-bar) .mast-title-block { padding-bottom: 0; }
.mast-bar     { position: sticky; top: 0; z-index: 50; background: var(--bg-dark-hero); color: #fff; }
.mast-bar .mast-actions { margin-top: 0; flex-wrap: nowrap; padding: 12px 0 10px; }
.mast-bar-tail { height: 20px; background: var(--bg-dark-hero); }
.mast-bar.is-stuck { box-shadow: 0 2px 10px rgba(0,0,0,0.18); }
.mast-bar.is-stuck .mast-actions { border-top-color: transparent; }
@media print { .mast-bar, .mast-bar-tail { display: none; } }

.mast-tabs    { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.mast-bar .mast-tabs { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto;
                       scrollbar-width: none; padding-top: 4px; }
.mast-bar .mast-tabs::-webkit-scrollbar { display: none; }
.mast-tab     { background: transparent; border: none; padding: 0 0 8px; margin: 0;
                cursor: pointer; font-family: var(--font-sans); font-weight: 500;
                font-size: 13.5px; text-decoration: none; color: rgba(255,255,255,0.55);
                border-bottom: 2px solid transparent; white-space: nowrap;
                transition: color 150ms var(--ease-out),
                            border-color 150ms var(--ease-out); }
.mast-tab:hover { color: #fff; }
.mast-tab.is-active,
.mast-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--teal); }
.mast-tab:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 2px; }

.mast-saves   { display: flex; gap: 8px; align-items: center; }
.mast-save    { display: inline-flex; align-items: center; gap: 8px;
                height: 38px; padding: 0 16px;
                border-radius: 9999px; border: 1px solid transparent;
                background: var(--bg-dark-button); color: #fff;
                font-family: var(--font-sans); font-weight: 600; font-size: 13px;
                white-space: nowrap; cursor: pointer;
                transition: background 150ms var(--ease-out),
                            border-color 150ms var(--ease-out),
                            color 150ms var(--ease-out); }
.mast-save:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.mast-save:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Phones: the tabs scroll sideways and the Save buttons keep only their icons */
@media (max-width: 640px) {
  .mast-bar .mast-save { font-size: 0; gap: 0; padding: 0 12px; }
}

html { scroll-padding-top: var(--mast-bar-h, 0px); }