/* ============================================================================================
   clear_workflows.css — CLEAR Commercial workflow switcher and workflow catalogue.
   FCLEAR-APP-0002B, Lane A.

   Loaded AFTER clear_map.css. It adds no token of its own: every colour, radius, shadow, font and
   spacing value below is either an existing `clear_map.css` custom property or a literal already
   used by that stylesheet. The design package ships no type scale and no spacing scale
   (design-authority.md), so inventing one here would be inventing design authority.

   ---------------------------------------------------------------------------------------------
   DECLARED IMPLEMENTATION EXTENSION — the narrow-width treatment below is NOT a mockup match.

   There is no authoritative mockup or prototype for the workflow switcher below desktop width.
   `design-authority.md` §7 records this as DA-04: `prototype/clear-workflows.html` carries zero
   `@media` and zero `@container` rules apart from `prefers-reduced-motion`, and none of the
   ~19 commercial-context mockups depicts the switcher at a constrained or phone width.

   Everything in the "responsive" sections of this file is therefore an IMPLEMENTATION EXTENSION,
   derived from conventions already governed in this product rather than from a design asset:

     * the shared 1120/1121 boundary (AD-06) that already drives rail overlay
       (`clear_map.js:6994`, `CLEAR_RAIL_OVERLAY_QUERY = '(max-width: 1120px)'`), search placement
       and pane mode. No second breakpoint is defined here.
     * the existing `@media (max-width: 767px) { .clear-tier1 { display: none } }`
       (`clear_map.css:1949`) and its stated reason — on a phone the map is primary.

   It is offered for USER ACCEPTANCE, not as mockup fidelity. Desktop (>=1121px) follows
   `mockups-workflows/x1` and `x2`.
   ---------------------------------------------------------------------------------------------

   Z-INDEX — AD-07.
   `z-index: 40` is TAKEN. `.clear-canvas-search-row` (`clear_map.css:2873`) was raised to 40
   specifically so the canvas search popup clears the Environmental Status card, and
   `clear_map.css:2880` puts the popup itself at 40 inside that stacking context. Reusing 40 would
   re-open exactly the bug that comment documents.

   The bands in use across `clear_map.css` today are:
       1        focused history row
       4-7      map canvas chrome (watermark, floating rows, status card, controls)
       15-22    rail drawer, pane overlay, sheet and their scrims
       40       canvas search row and its results popup  <-- reserved, do not reuse

   The catalogue is a modal over the WHOLE application shell, above every one of those. It takes a
   new band at 120: an order of magnitude clear of 40, with room for a future band between them,
   and low enough to stay under any browser-level UI. The scrim and the dialog share the band and
   are ordered by source order inside it.
   ============================================================================================ */

/* =============================================================================
   1. The switcher — tier 1 contents, Commercial only.
   AD-01: this REPLACES tier 1's contents. It adds no bar and no height. `.clear-tier1` keeps its
   own `height: 42px` (clear_map.css:1874) and `.clear-tier2` its `55px` (clear_map.css:1877), so
   total chrome is byte-for-byte the base build's and `main.clear-workspace` never resizes.
   Nothing below sets a height on `.clear-tier1`.
   ========================================================================== */

/* Right-aligned, as in mockups-workflows/x1: brand at the far left, tabs and [+] at the far right,
   nothing between them. `margin-left: auto` rather than a spacer element. */
.clear-tier1--workflows .clear-wfbar {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  min-width: 0;
  margin-left: auto;
}

/* `.clear-tier1-meta` renders empty on Commercial (its content is Foundation-only). It stays in
   the markup unchanged; collapse it so it cannot introduce a gap to the right of [+]. */
.clear-tier1--workflows .clear-tier1-meta:empty { display: none; }

.clear-wftabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.clear-wftab-item { display: flex; align-items: stretch; min-width: 0; }

.clear-wftab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0 15px;
  border: 0;
  /* The active-tab rule is an underline on the bar's own bottom edge (x1). Reserving the same
     transparent border on every tab keeps the label's optical centre identical whether or not the
     tab is active -- text must not shift by 2.5px when the workflow changes. */
  border-bottom: 2.5px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, .72);
  font-family: var(--f);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.clear-wftab:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.clear-wftab:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.clear-wftab.is-active,
.clear-wftab[aria-current="page"] {
  color: #fff;
  font-weight: 600;
  background: rgba(255, 255, 255, .10);
  border-bottom-color: var(--brand-accent);
}
.clear-wftab-icon { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.clear-wftab.is-active .clear-wftab-icon,
.clear-wftab[aria-current="page"] .clear-wftab-icon { opacity: 1; }
.clear-wftab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Reserved for a governed count. Nothing in this package sets badge_count, so this never renders
   today (AD-08 -- the mockup's "3" is fabricated sample data). */
.clear-wftab-count {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-family: var(--m);
  font-size: 10px;
  font-weight: 600;
}

.clear-wftab--add { padding: 0 12px; color: rgba(255, 255, 255, .55); }
.clear-wftab--add:hover { color: #fff; }
.clear-wftab--add[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .10); }
/* A typographic plus, not a sprite reference. [+] is the only control in the bar with no text
   label, and it must never be an invisible hit-area. See the note in `tier1_nav.html`. */
.clear-wftab-add-glyph { font-size: 17px; font-weight: 400; line-height: 1; }

/* =============================================================================
   2. The catalogue modal.
   ========================================================================== */
.clear-wfcat {
  position: fixed;
  inset: 0;
  /* AD-07. See the z-index note at the head of this file. NOT 40 -- that band belongs to
     `.clear-canvas-search-row` and was tuned to clear the Environmental Status card. */
  z-index: 120;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 70px 20px 20px;
}
.clear-wfcat[hidden] { display: none; }

.clear-wfcat-scrim { position: absolute; inset: 0; background: rgba(12, 25, 38, .5); }

.clear-wfcat-box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 880px;
  max-height: 100%;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5);
}

.clear-wfcat-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.clear-wfcat-headings { min-width: 0; }
.clear-wfcat-title { margin: 0; color: var(--ink); font-family: var(--f); font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.clear-wfcat-subtitle { margin: 2px 0 0; color: var(--muted); font-family: var(--f); font-size: 13px; line-height: 1.45; }
.clear-wfcat-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  margin-left: auto;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.clear-wfcat-close:hover { background: var(--surface-2); color: var(--ink); }
.clear-wfcat-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.clear-wfcat-close svg { width: 15px; height: 15px; }

.clear-wfcat-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 16px 20px 20px;
  overflow-y: auto;
  list-style: none;
}

.clear-wfcat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: left;
}
.clear-wfcat-card-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.clear-wfcat-card-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--brand-ink) 9%, transparent);
  color: var(--brand-ink);
}
.clear-wfcat-card-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.clear-wfcat-card-name { min-width: 0; color: var(--ink); font-family: var(--f); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.clear-wfcat-card-chip {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--good) 13%, transparent);
  color: var(--good);
  font-family: var(--m);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.clear-wfcat-card.is-unlicensed .clear-wfcat-card-chip { background: var(--surface-3); color: var(--faint); }
/* FCLEAR-APP-0002B, Gate B finding F-06c: the audience line previously used `--sig-com` and
   `--moderate`. Both are DATA-SEMANTIC tokens in this product -- `--sig-com` is the Community
   observation series and `--moderate` is an air-quality band -- so an entitlement chip was
   borrowing colours that carry provenance meaning elsewhere on the same screen. Retargeted to the
   values `mockups-workflows/x2` actually uses. */
.clear-wfcat-card-who { color: var(--brand-accent); font-family: var(--m); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
/* An unlicensed workflow is a real product this workspace has not licensed, so its constituent
   line recedes rather than being coloured as a live signal. It is NOT greyed out as if broken. */
.clear-wfcat-card.is-unlicensed .clear-wfcat-card-who { color: var(--ev-mod, #6B4FA8); }
.clear-wfcat-card-q { color: var(--muted); font-family: var(--f); font-size: 13px; line-height: 1.5; }
.clear-wfcat-card-unit { margin-top: 2px; color: var(--faint); font-family: var(--m); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }

.clear-wfcat-foot {
  margin: 0;
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--f);
  font-size: 12.5px;
  line-height: 1.55;
}
.clear-wfcat-foot b { color: var(--ink); font-weight: 600; }

/* =============================================================================
   3. Constrained widths — <= 1120px.   IMPLEMENTATION EXTENSION (see head of file).

   AD-06: this is the SHARED 1120/1121 boundary, not a new one. Below it the rail is already an
   overlay, search has already moved to the canvas and the pane has already changed mode, so the
   header is already the width-critical row; collapsing the switcher on the same line keeps one
   responsive story instead of two.

   Treatment, and why:
     * The ACTIVE workflow keeps its icon AND its full label. The requirement is that the active
       workflow is preserved and identifiable, so it is the one thing that never collapses.
     * Inactive workflows drop to icon-only. Their labels are NOT truncated, NOT ellipsised and NOT
       shrunk -- "does not crush labels" means the label is either fully legible or fully absent,
       never a smeared fragment. The text stays in the DOM, visually hidden, and each tab already
       carries `title` and its accessible name, so screen readers and tooltips are unaffected.
     * [+] never collapses: the catalogue must stay reachable at every width.
   ========================================================================== */
@media (max-width: 1120px) {
  .clear-wftab { padding: 0 11px; gap: 0; }
  .clear-wftab.is-active,
  .clear-wftab[aria-current="page"] { gap: 7px; padding: 0 13px; }

  /* Visually hidden, not display:none -- the accessible name and the tooltip must survive.
     Same technique as `.clear-hg-visually-hidden` (clear_map.css:927). */
  .clear-wftab:not(.is-active):not([aria-current="page"]) .clear-wftab-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  /* An icon-only control needs a visible hit boundary -- the same reason `.clear-rail-toggle` and
     `.clear-action` are bordered icon buttons in `clear_map.css`. It also means a collapsed tab is
     never a blank rectangle in the window between this lane landing and Lane B's sprite landing
     (AD-05): the control is visible and operable even with no glyph painted. */
  .clear-wftab:not(.is-active):not([aria-current="page"]):not(.clear-wftab--add) {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    border-radius: var(--r-sm);
    margin: 6px 0;
    border-bottom-color: transparent;
  }
  .clear-wftab:not(.is-active):not([aria-current="page"]):not(.clear-wftab--add):hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }

  .clear-wftab--add { padding: 0 10px; }

  /* One column: two 400px-wide cards do not fit, and a 2-up grid here would crush the job
     question into four-word lines. */
  .clear-wfcat-body { grid-template-columns: minmax(0, 1fr); }
  .clear-wfcat { padding: 48px 16px 16px; }
}

/* =============================================================================
   4. Phone — <= 767px.   IMPLEMENTATION EXTENSION (see head of file).

   `clear_map.css:1949` hides `.clear-tier1` entirely below 767px, with a stated reason: on a
   phone the tier-1 bar's nav was already unreachable and its wordmark repeated the tier-2 lockup,
   so removing it returned pixels to the map, which is primary there.

   That reason does not survive contact with the workflow switcher. Tier 1 is no longer a
   redundant product nav -- it is the entitlement boundary, and acceptance §1 requires the
   catalogue to be "reachable and dismissible by both keyboard and pointer at ALL TEN gate
   widths", three of which (430, 390, 375) fall below 767. Hiding tier 1 on a phone would leave
   the catalogue with no affordance at all, and would leave a customer unable to tell or change
   which workflow they are in.

   *** THIS IS A DELIBERATE, REPORTED TRADE-OFF. ***
   Acceptance §1 also asks that total chrome height be unchanged from the base build. At <= 767px
   the base build's chrome is 0 + 55 = 55px (tier 1 hidden); the strip below makes it 34 + 55 =
   89px. The two acceptance bullets cannot both hold at phone width, so the switcher is kept and
   the cost is stated rather than hidden. Deleting the one `display: flex` declaration below
   restores exact base parity at the cost of catalogue reachability -- that choice belongs to the
   operator, not to this lane.

   Explore stays map-first: 34px is the entire cost, the bar carries no search, no actions and no
   second row, and nothing else about the phone layout changes.

   The header never spreads several long workflow names: only the ACTIVE workflow's name is
   spelled out (the same rule as section 3, inherited). PulmHealth's lung mark AND wordmark remain
   visible at every width. Company identity is not a reclaimable width budget: compact workflow
   spacing and inactive workflow controls before constraining the active workflow label.
   ========================================================================== */
@media (max-width: 767px) {
  /* Later source order beats `clear_map.css:1960` at equal specificity (0,1,0 vs 0,1,0).
     SCOPED TO `--workflows` BY CLAUDE-00 AT INTEGRATION. The lane had widened this to a bare
     `.clear-tier1`, which also overrides `clear_map.css:1960` for FOUNDATION -- a profile whose
     tier 1 the base build hides outright on phones, deliberately, because the map is primary
     there. That would have added 34px of chrome to the exact phone budget the mobile AQ rail
     (`map.html:230-232`) was built to reclaim, and changed a profile this package is required to
     leave untouched. The Gate B finding concerns the Commercial workflow header, where identity
     was traded for workflow tabs; Foundation makes no such trade. Whether Foundation should also
     carry its wordmark on phones is a separate product question, recorded for the operator. */
  .clear-tier1--workflows { display: flex; height: 34px; gap: 4px; padding: 0 8px; }
  .clear-tier1--workflows .clear-tier1-brand { gap: 6px; }
  /* The Foundation-only attribution is not company identity and would compete with a full,
     unwrapped wordmark. The wordmark itself is never hidden, wrapped, or width-constrained. */
  .clear-tier1--workflows .clear-tier1-meta { display: none; }

  .clear-tier1--workflows .clear-tier1-lung { width: 18px; height: 18px; }
  .clear-tier1--workflows .clear-tier1-mark { width: 22px; height: 22px; }

  /* Width reclamation order: tier and tab gaps first, then the already-icon-only inactive tabs,
     then a bounded active label. None of these rules trades away the PulmHealth wordmark. */
  .clear-tier1--workflows .clear-wftabs { gap: 1px; }
  .clear-tier1--workflows .clear-wftab { font-size: 12.5px; padding: 0 7px; border-bottom-width: 2px; }
  .clear-tier1--workflows .clear-wftab.is-active,
  .clear-tier1--workflows .clear-wftab[aria-current="page"] { padding: 0 8px; }
  .clear-tier1--workflows .clear-wftab--add { padding: 0 8px; }
  .clear-tier1--workflows .clear-wftab-icon { width: 14px; height: 14px; }
  /* The active label may ellipsise on a 375px viewport rather than push [+] off the row. It is the
     only label rendered, so this shortens one name -- it does not crush a set of them. */
  .clear-tier1--workflows .clear-wftab.is-active .clear-wftab-label,
  .clear-tier1--workflows .clear-wftab[aria-current="page"] .clear-wftab-label { max-width: 44vw; }

  .clear-wfcat { padding: 12px; align-items: stretch; }
  .clear-wfcat-box { max-width: none; }
  .clear-wfcat-head { padding: 14px 16px; }
  .clear-wfcat-body { padding: 14px 16px 16px; }
  .clear-wfcat-foot { padding: 12px 16px; }
}

/* =============================================================================
   5. Motion. The catalogue's only animation is its entrance, and it is opt-out.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .clear-wfcat:not([hidden]) .clear-wfcat-box { animation: clear-wfcat-in 140ms ease-out; }
  @keyframes clear-wfcat-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}