/* MRT shared component layer — NAVACORD direction (design source
   `Marketing Requests - Navacord.dc.html`; plan in docs/navacord-rebrand-plan.md). This file
   holds ONLY the cross-page shared system: utilities + type, buttons, the global focus ring,
   the status stage-bar + chip, row tags + edge marks, the persona select, the toast, and the
   pulse/skeleton loading blocks. Every page's own layout lives in that page's scoped
   <Component>.razor.css. Tokens come from theme.css — use var(--token), never raw hex.
   Square + flat: no border-radius (avatar circles and reaction pills are the kit's own
   exceptions) and no box-shadow except var(--shadow-pop) on floating layers. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Blueprint date-picker popovers are portalled outside component CSS scopes.
   Today uses bg-accent in Blueprint 3.15; selection belongs to the parent cell.
   Keep selected/disabled colors and native keyboard focus treatment intact. */
[role="dialog"][data-state="open"] table[role="grid"]
td[role="gridcell"]:not([aria-selected="true"]) > button[id^="calendar-"].bg-accent:not(:disabled) {
  background-color: var(--brand-soft);
  color: var(--brand-text);
}

[role="dialog"][data-state="open"] table[role="grid"]
td[role="gridcell"]:not([aria-selected="true"]) > button[id^="calendar-"]:not(:disabled):hover {
  background-color: var(--brand);
  color: var(--brand-ink);
}

/* ---- page + type scale ------------------------------------------------ */
.page { max-width: none; margin: 0; padding: 32px 32px 56px; }
.page__greeting {
  font-size: 31px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15;
  margin: 0; color: var(--navy);
}
.page__sub { font-size: 14.5px; color: var(--muted); max-width: 64ch; margin-top: 7px; text-wrap: pretty; }

.section-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
}

/* The kit has no mono face — IDs, dates and counts keep their alignment via tabular
   figures and a touch of tracking instead. */
.mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: .03em; }

.link-button, .btn-inline {
  color: var(--brand-text); background: none; border: none; padding: 0;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.link-button:hover, .btn-inline:hover { text-decoration: underline; }

/* ---- form control ink -------------------------------------------------- */
textarea::placeholder, input::placeholder { color: var(--placeholder); }

/* ---- buttons (plain; primary/async CTAs may stay <BbButton>) ----------- */
.btn { font-family: inherit; border: none; border-radius: var(--radius); cursor: pointer; transition: background .12s, opacity .12s; }
.btn--hero {
  background: var(--lime); color: var(--lime-ink); padding: 15px 28px; font-size: 15px; font-weight: 700;
}
.btn--hero:hover { opacity: 0.9; }
.btn--cta {
  background: var(--lime); color: var(--lime-ink); padding: 12px 22px; font-size: 14px; font-weight: 700;
}
.btn--cta:hover { opacity: 0.9; }
.btn--primary {
  background: var(--navy); color: #fff; padding: 12px 20px; font-size: 14px; font-weight: 600;
}
.btn--primary:hover { background: var(--brand-hover); }
.btn--secondary {
  background: var(--surface); color: var(--navy); border: 1.5px solid var(--hairline-strong);
  padding: 11px 19px; font-size: 14px; font-weight: 600;
}
.btn--secondary:hover { border-color: var(--navy); }
.btn--tertiary {
  background: var(--surface); color: var(--navy); border: 1.5px solid var(--hairline-strong);
  padding: 9px 16px; font-size: 13.5px;
}
.btn--tertiary:hover { border-color: var(--navy); }
.btn:disabled, .btn.is-disabled { background: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; }

/* ---- global focus ring (applies everywhere, never removed) ------------- */
:where(a, button, select, textarea, input, [tabindex]):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 1px;
}
/* On the navy shell the teal ring vanishes — the lime one doesn't. */
.on-dark :where(a, button, select, [tabindex]):focus-visible {
  outline-color: var(--lime);
}

/* The chart disclosure can move above the viewport when its data table collapses.
   Keep native keyboard focus below the sticky shell, including desktop Shift+Tab. */
html:has(.chart-card__disclose:focus-visible) {
  scroll-padding-block: 70px 8px;
}

/* Keep mobile queue keyboard focus below the 62px shell and clear of both viewport edges. */
@media (max-width: 640px) {
  html:has([data-mrt-dashboard-kpis] > button.kpi:focus-visible),
  html:has([data-mrt-dashboard-queue] .qgroup .req__title:focus-visible),
  html:has([data-mrt-dashboard-queue] .filter__btn:focus-visible) {
    scroll-padding-block: 70px 8px;
  }
}

/* ---- brand mark (the skewed lime parallelogram) ------------------------ */
.brand-mark {
  display: inline-block; background: var(--lime); transform: skewX(-12deg);
  width: 10px; height: 26px; flex: 0 0 auto;
}
.brand-mark--sm { width: 8px; height: 18px; }

/* ---- detail-page section chrome ---------------------------------------- */
/* Deliberately global, not scoped: THREE components render a section with these classes
   (ActivityTimeline, the conversation block inside RequestDetailPage, and RequestFiles), and a
   copy in any one scoped stylesheet would only ever style that component's third of them. The
   detail page runs full-bleed, so each section carries the page gutter itself. */
.detail-block {
  min-width: 0;
  padding: 26px 32px 28px;
  border-bottom: 1px solid var(--hairline);
}
.detail-block:last-child { border-bottom: none; }
.detail-block__label { margin: 0 0 14px; }
.detail-block__sub { font-size: 13px; color: var(--muted); margin: -8px 0 14px; }

/* ---- status stage-bar (StageBar.razor) --------------------------------- */
/* colour + weight of the label are set inline by the component; --stage-color too */
.stage__label { font-size: 13px; line-height: 1.2; }
.stage__bar { display: flex; gap: 2px; margin-top: 7px; }
.stage__seg { width: 22px; height: 3px; background: var(--hairline); }
.stage__seg--on { background: var(--stage-color); }

/* ---- status chip (StatusChip.razor) — the detail-header pill ----------- */
/* background + colour set inline by the component */
.status-chip {
  display: inline-flex; align-items: center; font-family: var(--font-sans);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-sm); white-space: nowrap;
  border: 1px solid transparent;
}
.status-chip--neutral { border-color: var(--hairline-strong); }

/* ---- tags (row flags) -------------------------------------------------- */
.tag {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--radius-sm);
}
.tag--action { background: var(--lime-band); color: var(--lime-text); border: 1px solid var(--lime-border); } /* blocked on user */
.tag--review { background: var(--teal-soft); color: var(--brand); }                                           /* draft ready */

/* ---- edge mark (full-row-height status rule on queue rows) ------------- */
.edge-mark {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--stage-color);
}
.edge-mark--lg { width: 4px; }   /* when the row needs the user */

/* ---- avatars (initials discs — the kit's circle exception) ------------- */
.avatar-disc {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%; font-size: 10.5px; font-weight: 700;
  background: var(--avatar-mkt-bg); color: var(--avatar-mkt-ink);
}
.avatar-disc--you { background: var(--avatar-req-bg); color: var(--avatar-req-ink); }
.avatar-disc--sm { width: 22px; height: 22px; font-size: 9.5px; }

/* ---- shared form control ----------------------------------------------- */
.persona-select {
  background: transparent; border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--ink); font: inherit; font-size: 13px; padding: 5px 8px;
}
/* In the navy header the select sits on dark ground. */
.on-dark .persona-select {
  border-color: rgba(255, 255, 255, 0.35); color: var(--header-ink); background: transparent;
}
.on-dark .persona-select option { color: var(--ink); background: var(--surface); }

/* ---- toast (dark) — one of the allowed shadows; best-effort slot ---- */
[data-slot="toast"], .bb-toast, [data-sonner-toast] {
  background: var(--navy); color: #fff; box-shadow: var(--shadow-pop);
}

/* ---- Blueprint polish (best-effort): kit button proportions ------ */
[data-slot="button"] { font-weight: 600; }

/* ---- live-update pulse (a change synced in from Asana just landed) ------ */
/* A soft ring that fades in and out once — signals "this just updated" without blanking the
   content the user is reading. Applied to the status chip, the newest timeline step, or the
   marketing-contact avatar depending on what actually changed. */
@keyframes mrt-pulse {
  0%   { box-shadow: 0 0 0 0 var(--pulse-ring); }
  35%  { box-shadow: 0 0 0 5px var(--pulse-ring); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
.pulse-wrap { display: inline-flex; }
.just-updated { animation: mrt-pulse 1.5s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .just-updated { animation: none; }  /* respect reduced-motion — the aria-live line still announces */
}

/* ---- skeleton loading (initial page load only) ------------------------- */
/* A ghost of the real layout so first paint has shape instead of a lone spinner, killing the
   content-pop layout shift. Never used for live re-syncs (those are near-instant DB reads). */
@keyframes mrt-shimmer { 0% { background-position: -320px 0; } 100% { background-position: 320px 0; } }
.skeleton {
  background: var(--surface-2);
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  background-repeat: no-repeat; background-size: 320px 100%;
  border-radius: var(--radius-sm);
  animation: mrt-shimmer 1.25s ease-in-out infinite;
}
:root:not([data-theme="light"]) .skeleton,
[data-theme="dark"] .skeleton { background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); }
.skeleton--line { height: 0.8rem; }
.skeleton--title { height: 1.6rem; width: 55%; }
.skeleton--chip { height: 1.3rem; width: 6rem; }
.skeleton--block { height: 100%; }
.skeleton-card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: none; padding: 1.15rem 1.25rem;
}
.skeleton-stack > * + * { margin-top: 0.7rem; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }


/* Email delivery reminder. Presentation-only hotfix shared by the separately deployed
   production/staging binaries. Keep these state selectors aligned with SignIn and
   DirectSupport; no login, delivery or support-submission behavior is changed. */
:is(.portal-card:has(.portal-card__code), .support-body:has(.support-code, .support-result))::after {
  content: "Missing an email? Check your Junk or Spam folder. Mark our messages as “Not junk” and add our sender to your safe senders list to help future notifications reach your inbox.\a\a Sender: marketing-requests@notify.navacordmarketing.com";
  display: block;
  margin-top: 24px;
  padding: 16px 0 0 28px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font: 400 14px/1.65 var(--font-sans);
  white-space: pre-line;
  overflow-wrap: anywhere;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(91,103,112)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='m3 6 9 7 9-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 19px;
  background-size: 18px 18px;
}
html[lang|="fr"] :is(.portal-card:has(.portal-card__code), .support-body:has(.support-code, .support-result))::after {
  content: "Vous ne trouvez pas notre courriel? Vérifiez votre dossier de courriels indésirables. Marquez nos messages comme « Non indésirable » et ajoutez notre adresse à votre liste d’expéditeurs approuvés pour aider nos prochaines notifications à arriver dans votre boîte de réception.\a\a Expéditeur : marketing-requests@notify.navacordmarketing.com";
}