/* Faro HQ components (DESIGN.md "Faro HQ work surfaces"). Every selector is wrapped in :where() so it has zero
   specificity: module stylesheets (kind pills, brand stripes, coverage states, special controls) always win.
   Only shared building blocks that have no styling of their own pick these up. Tokens come from tokens.css. */
:where(.faro-hq-preview){font-family:var(--font)}
:where(.faro-hq-preview) :where(.panel){border-radius:var(--radius-panel)}
:where(.faro-hq-preview) :where(.button){border-radius:var(--radius-control);
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease)}
:where(.faro-hq-preview) :where(.button.primary):hover:not(:disabled){filter:brightness(1.08)}
:where(.faro-hq-preview) :where(.pill){border-radius:var(--radius-pill)}
:where(.faro-hq-preview) :where(.notice){border-radius:var(--radius-coverage)}
:where(.faro-hq-preview) :where(input[type=checkbox],input[type=radio]){accent-color:var(--accent)}
:where(.faro-hq-preview) :where(.eyebrow){letter-spacing:.08em}
/* Visible focus everywhere, solid accent (3:1 or better against both surfaces). */
:where(.faro-hq-preview) :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (pointer:coarse){.faro-hq-preview .button{min-height:44px}}  /* 0,2,0 after faro-hq.css: 44px touch targets */

/* Motion: one finite reveal for what the user just opened; control transitions above; no ambient motion added. */
@media (prefers-reduced-motion:no-preference){
  :where(.faro-hq-preview) :where(dialog[open]){animation:hq-reveal var(--dur-panel) var(--ease)}
  :where(.faro-hq-preview) :where(.hq-reveal){animation:hq-reveal var(--dur-panel) var(--ease)}
}
@keyframes hq-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* designroll: Faro HQ shapes for the 13 rollout screens (2026-11-04). Tokens from tokens.css. Shape and color only:
   no layout, display or visibility changes, so behavior and wrapping stay as they were. */
.faro-hq-preview .brief-card,.faro-hq-preview .invoice-card,.faro-hq-preview .job-card,.faro-hq-preview .work-hero,
.faro-hq-preview .worker-card,.faro-hq-preview .named-agent-card{border-radius:var(--radius-panel)}
.faro-hq-preview .brief-card{background:var(--surface);border-color:var(--line)}
.faro-hq-preview :is(.brief-kind-interview,.brief-kind-call_prep,.brief-kind-brief,.named-agent-state,.invoice-ok,.invoice-warn,
  .review-current,.review-held,.mr-review,.mr-superseded,.mr-needs_context,.job-inbox-badge){border-radius:var(--radius-pill)}
/* segmented controls: one track, the selected segment lifts (finance tabs, job filters) */
/* selected segment = same treatment as Catch up Sprint/List/Board (.task-view-switch): ink fill, paper text */
.faro-hq-preview .finance-tabs,.faro-hq-preview #job-workspace .job-filters{gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--hover);width:fit-content;max-width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
.faro-hq-preview .finance-tabs>*,.faro-hq-preview #job-workspace .job-filters button{border-color:transparent;background:transparent;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.faro-hq-preview .finance-tabs [aria-current=page],.faro-hq-preview #job-workspace .job-filters button[aria-pressed=true],.faro-hq-preview .ntabs .seg.on{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:var(--shadow-sm);font-weight:650}
.faro-hq-preview .finance-tabs>*:hover:not([aria-current=page]),.faro-hq-preview #job-workspace .job-filters button:hover:not([aria-pressed=true]){background:var(--surface);color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .faro-hq-preview :is(.finance-tabs>*,#job-workspace .job-filters button,.ntabs .seg){transition:background-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
  .faro-hq-preview :is(.brief-viewer,.invoice-card details[open]>:not(summary),.finance-review details[open]>:not(summary)){animation:hq-reveal var(--dur-panel) var(--ease)}
}
/* navapv-20261104: Approvals count badge */
.work-nav-primary{position:relative}
.work-nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--accent-text,var(--paper));font-size:12px;font-weight:650;line-height:20px;text-align:center;flex:none}
@media (max-width:760px){.work-nav-badge{position:absolute;top:2px;right:calc(50% - 24px);margin:0;min-width:16px;height:16px;line-height:16px;font-size:10px;padding:0 4px}}