/* ============================================================================
   SHARED APP CHROME — project switcher + global search
   ----------------------------------------------------------------------------
   Injected by wp-chrome.js into whichever top bar a page has: the dark UI-shell
   bar (.wp-appbar on index / admin / field) or the older light bars (.header on
   the SOP suite and the WP creator). The two live side by side, so every colour
   here comes from a variable that wp-chrome.js sets per host bar — the markup and
   behaviour are identical on both.
   ============================================================================ */
.wp-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;             /* lets the search shrink instead of overflowing */
  flex: 1 1 auto;
}
/* Seven role names, resolved twice — once for each kind of host bar. The switch
   is the point of this block and it stays; only the literals move behind the
   canonical tokens in theme-light.css (T3.2 / S5 / C3). */
/* Light host bar (the two tool pages) */
.wp-chrome {
  --wpc-fg: var(--cds-text-primary);
  --wpc-fg-dim: var(--cds-text-secondary);
  --wpc-bg: var(--cds-layer);
  --wpc-bg-soft: var(--cds-layer-accent);
  --wpc-border: var(--cds-border-subtle-selected);
  --wpc-hover: var(--cds-layer-hover);
  --wpc-accent: var(--cds-interactive-01);
}
/* Dark host bar (the UI-shell appbar) */
.wp-chrome[data-bar="dark"] {
  --wpc-fg: var(--wp-appbar-fg);
  --wpc-fg-dim: var(--wp-appbar-fg-dim);
  --wpc-bg: var(--wp-appbar-layer);
  --wpc-bg-soft: var(--cds-inverse-02);
  --wpc-border: var(--wp-appbar-border);
  --wpc-hover: var(--wp-appbar-hover);
  --wpc-accent: var(--cds-link-inverse);
}

/* ── archived-project banner ──────────────────────────────────────────────── */
/* Inserted by wp-chrome.js as the top bar's next sibling, so it sits directly
   under the bar in normal flow and can never overlap it or eat its height (the
   bar is sticky; this strip scrolls away under it). `flex: 0 0 auto` is for the
   suite page, whose shell is a flex column — without it the strip would squash.
   Amber tokens are the suite's warning set, same as the sync badge. */
.wpc-archived {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 16px;
  background: var(--wp-status-warning-bg);
  color: var(--wp-status-warning-text);
  border-bottom: 1px solid var(--cds-support-warning);
  border-radius: 0;
  font-family: var(--wp-font-sans-2);
  font-size: 13.5px;
  line-height: 1.35;
}
.wpc-archived-ico { flex: 0 0 auto; font-size: 14px; }
.wpc-archived-text { min-width: 0; }   /* wraps instead of forcing a scrollbar */
@media (max-width: 620px) {
  .wpc-archived { padding: 8px 12px; font-size: 13px; }
}

/* ── project switcher ─────────────────────────────────────────────────────── */
.wpc-proj { position: relative; flex: 0 0 auto; }
.wpc-proj-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--wpc-fg);
  font: inherit;
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.wpc-proj-btn:hover { background: var(--wpc-hover); border-color: var(--wpc-border); }
.wpc-proj-btn[aria-expanded="true"] { background: var(--wpc-hover); border-color: var(--wpc-border); }
.wpc-proj-labels { min-width: 0; }
.wpc-proj-kicker {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wpc-fg-dim);
}
/* B2. These two caps are the "does not fit 280px" the review measured: a real name
   ran past 240px and was ellipsised on the one control whose job is to say which job
   you are in. Above 1024px the bar has the room, so the caps are raised until a real
   project name fits — "Micron EUV Cleanroom Enable 2667008" is the one to test with.
   Below 1024px the label is the project number instead (see wp-chrome.js), which is
   short enough that these caps never bite. The ellipsis stays only as a backstop for
   a name longer than anything real. */
.wpc-proj-name {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
@media (min-width: 1024px) {
  .wpc-proj-btn { max-width: 400px; }
  .wpc-proj-name { max-width: 340px; }
}
.wpc-caret { flex: 0 0 auto; align-self: flex-end; margin-bottom: 3px; font-size: 10px;
  line-height: 1; color: var(--wpc-fg-dim); }

/* ── dropdown / results panel (shared shell) ──────────────────────────────── */
.wpc-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 2000;
  min-width: 320px;
  max-width: min(460px, 92vw);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  background: var(--cds-layer);
  color: var(--cds-text-primary);
  border: 1px solid var(--cds-border-subtle);
  box-shadow: var(--wp-shadow-pop);
  border-radius: 4px;
}
.wpc-pop[hidden] { display: none; }
.wpc-pop-head {
  padding: 9px 12px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cds-text-helper);
  border-bottom: 1px solid var(--wp-pop-divider);
}
.wpc-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--cds-text-primary);
  cursor: pointer;
  text-decoration: none;
}
.wpc-item:hover, .wpc-item.is-active { background: var(--cds-layer-accent); }
.wpc-item.is-current { border-left-color: var(--cds-interactive-01); background: var(--cds-highlight); }
.wpc-item-title { display: block; font-weight: 600; }
.wpc-item-sub { display: block; font-size: 11.5px; color: var(--cds-text-helper); }
.wpc-item-mono { font-family: var(--wp-font-mono-3); font-size: 12px; color: var(--cds-interactive-01); }
.wpc-empty { padding: 14px 12px; font-size: 13px; color: var(--cds-text-helper); }
.wpc-pop-foot {
  padding: 8px 12px;
  border-top: 1px solid var(--wp-pop-divider);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.wpc-foot-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border: 1px solid var(--cds-border-subtle-selected);
  background: var(--cds-layer);
  color: var(--cds-text-primary);
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
}
.wpc-foot-btn:hover { border-color: var(--cds-interactive-01); color: var(--cds-interactive-01); }

/* ── global search ────────────────────────────────────────────────────────── */
/* Centered in the bar: the wrapper takes the free space and centres a capped box,
   which keeps the field mid-screen without absolute positioning (so it can never
   sit on top of the bar's own buttons). */
.wpc-search {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.wpc-search-box {
  position: relative;
  width: 100%;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 34px;
  background: var(--wpc-bg);
  border: 1px solid var(--wpc-border);
  border-radius: 3px;
}
/* The ring is drawn on the BOX, not the input: the input is a borderless field
   inside a bordered shell, so ringing the input would draw a rectangle floating
   inside another rectangle. --wpc-accent resolves to #0f62fe on a light bar
   (8.6:1 against #ffffff) and #78a9ff on the dark one (6.6:1 against #262626),
   so it clears 3:1 on both hosts. */
.wpc-search-box:focus-within { outline: 2px solid var(--wpc-accent); outline-offset: -2px; }
.wpc-search-ico { flex: 0 0 auto; color: var(--wpc-fg-dim); font-size: 13px; }
.wpc-search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  /* S12: the ONE `outline: none` left in the app, and it has its replacement in
     the rule above — the shell rings on :focus-within, which fires for exactly the
     same interactions. Ringing both would draw two. */
  outline: none;
  color: var(--wpc-fg);
  font: inherit;
  font-size: 13.5px;
}
.wpc-search-input::placeholder { color: var(--wpc-fg-dim); }
.wpc-kbd {
  flex: 0 0 auto;
  font-family: var(--wp-font-mono-3);
  font-size: 10.5px;
  color: var(--wpc-fg-dim);
  border: 1px solid var(--wpc-border);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}
.wpc-search .wpc-pop { left: 50%; transform: translateX(-50%); min-width: min(560px, 92vw); }
.wpc-clear {
  flex: 0 0 auto; background: transparent; border: 0; cursor: pointer;
  color: var(--wpc-fg-dim); font: inherit; font-size: 14px; line-height: 1; padding: 2px 4px;
}
.wpc-clear:hover { color: var(--wpc-fg); }

/* ── narrow screens ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .wpc-search-box { max-width: none; }
  .wpc-kbd { display: none; }
  .wpc-proj-btn { max-width: 190px; }
  .wpc-proj-name { max-width: 150px; }
}
@media (max-width: 620px) {
  /* Keep the switcher (you must be able to change project) and let the search
     collapse to an icon-width field rather than pushing the bar out of shape. */
  .wpc-proj-kicker { display: none; }
  .wpc-search { flex: 1 1 120px; }
}


/* ============================================================================
   TOOL TAB STRIP (B7 / T7.1)
   ----------------------------------------------------------------------------
   SOP Configuration | Work Package Creation | Dashboard.

   These rules lived in work-package-suite-styles.css while the creator was an
   iframe child, because only the suite page ever drew the strip. Dissolving the
   frame makes the creator a document of its own that draws the same strip, so
   they move to the sheet both pages already load. Nothing changed in the move -
   same values, same tokens, no literal added; the fallbacks below exist only
   because the two host pages alias the role names under different local names.

   The strip is navigation between two documents now, so `.nav-tab` has to look
   identical as a <button> and as an <a>.
   ============================================================================ */
.main-nav {
  display: flex;
  gap: 0;
  padding: 0 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.nav-tab {
  padding: 13px 18px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.15s, color 0.15s;
}

.nav-tab:hover {
  background: var(--bg);
  color: var(--text);
}

.nav-tab.active {
  background: none;
  color: var(--text);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.nav-tab { font-family: inherit; text-decoration: none; }
/* Not colour alone: the current tab carries aria-current, and the weight change
   plus the 3px rule say which one it is without relying on hue. */
.nav-tab[aria-current="page"] { color: var(--text); border-bottom-color: var(--primary); font-weight: 600; }
/* A tab that cannot be entered yet - the WP tab before the SOP is complete. It
   stays a real, focusable control that explains itself rather than vanishing;
   the gate panel is what does the explaining. */
.nav-tab[aria-disabled="true"] { opacity: .55; cursor: default; }
.nav-tab[aria-disabled="true"]:hover { background: none; color: var(--text-light); }

/* C2 / T9.6: touch sizing. At phone widths (and any coarse pointer) every
   control meets the 44px bar the field surfaces are held to; checkboxes,
   radios and the help-tip badge get the 24px WCAG floor with spacing doing
   the rest. Shared here because every page loads this sheet - six copies of
   this block is how the six pages drift apart again. */
@media (max-width: 500px), (pointer: coarse) {
  button, .btn, .add-btn, .nav-btn, .header-button,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea { min-height: 44px; }
  a.wp-appbar-link, .wp-sidenav-item, .nav-tab {
    min-height: 44px; display: inline-flex; align-items: center; }
  input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; }
  .help-tip { min-width: 24px; min-height: 24px; }
  .wp-navbtn, .ui-help-fab, .wp-sidenav-close { min-width: 44px; }
  .wp-appbar-brand { min-height: 44px; display: inline-flex; align-items: center; }
}