/* QERIONN Partner Network
   Portal styling reuses the public site's shell and type scale; only the
   partner-specific blocks are defined here. The workspace side inherits the
   internal workspace styles and adds a small number of pn-ws-* rules. */

/* ==========================================================================
   qo-* TOKEN BINDING FOR THE PARTNER PORTAL
   Scope: docs/QERIONN_PREMIUM_INTERNAL_OPERATIONS_UX_SYSTEM_SCOPE_20260809.md

   The Sales Playbook is built from the shared qo-* operations UX components.
   Those components were authored for the internal workspace, which is a light
   surface; the partner portal is the public site's dark navy-and-gold surface.
   Dropping white qo- cards onto it would have read as a second design system
   bolted on, which is the exact failure this workstream exists to undo.

   So: not one line of component CSS is duplicated or overridden here. What is
   rebound is the token layer the components already read from — the qo- system
   was built token-driven precisely so a surface can supply its own palette.
   One component vocabulary, two themes.

   Every value below resolves to a public-site variable (--deep, --card, --ink,
   --gold, --line) so the portal's approved brand identity stays the source of
   truth and cannot drift from the rest of the public site.

   Specificity note: `:root` and `.partner-network-page` both score (0,1,0), so
   this wins on order alone. partner_base.html therefore loads
   qerionn_operations_ux.css BEFORE this file, and must keep doing so.
   ========================================================================== */
.partner-network-page {
  /* surfaces */
  --qo-bg: transparent;
  --qo-surface: var(--card, #0e1c36);
  --qo-surface-raised: var(--navy-2, #0d1f3d);
  --qo-surface-sunken: var(--navy, #0a1930);

  /* lines */
  --qo-border: var(--line, rgba(214, 178, 94, 0.18));
  --qo-border-strong: var(--line-strong, rgba(214, 178, 94, 0.36));
  --qo-divider: var(--line, rgba(214, 178, 94, 0.18));

  /* text */
  --qo-text: var(--ink, #f4f0e6);
  --qo-text-secondary: #d3dcec;
  --qo-text-muted: var(--muted, #9aa8bf);
  --qo-text-inverse: var(--deep, #060e1c);

  /* brand */
  --qo-navy: var(--deep, #060e1c);
  --qo-gold: var(--gold, #d6b25e);
  --qo-gold-bright: var(--gold-light, #f0d58a);
  --qo-gold-soft: rgba(214, 178, 94, 0.16);

  /* semantic — the same five meanings, re-picked for legibility on navy.
     Status colour is still decided once, in foundation_registry.ux.status_tone;
     this only changes what each tone looks like on a dark ground. */
  --qo-success: #8fe4bd;
  --qo-success-bg: rgba(105, 214, 168, 0.14);
  --qo-success-border: rgba(105, 214, 168, 0.42);
  --qo-warning: #f0d58a;
  --qo-warning-bg: rgba(214, 178, 94, 0.14);
  --qo-warning-border: rgba(214, 178, 94, 0.44);
  --qo-danger: #ffb3b3;
  --qo-danger-bg: rgba(255, 159, 159, 0.13);
  --qo-danger-border: rgba(255, 159, 159, 0.4);
  --qo-info: #a8c9ec;
  --qo-info-bg: rgba(120, 170, 225, 0.14);
  --qo-info-border: rgba(120, 170, 225, 0.4);
  --qo-neutral: #b9c5d8;
  --qo-neutral-bg: rgba(154, 168, 191, 0.13);
  --qo-neutral-border: rgba(154, 168, 191, 0.34);

  /* The primary affordance. On the light workspace primary is navy-on-white;
     on this dark ground navy on navy is an invisible button, and gold is what
     the public site already uses for its main call to action. Restated as
     tokens, so not one component rule is overridden. */
  --qo-btn-primary-bg: var(--gold, #d6b25e);
  --qo-btn-primary-border: var(--gold, #d6b25e);
  --qo-btn-primary-fg: var(--deep, #060e1c);
  --qo-btn-primary-hover: var(--gold-light, #f0d58a);

  /* interaction */
  --qo-focus-ring: 0 0 0 3px rgba(214, 178, 94, 0.45);
  --qo-hover: rgba(255, 255, 255, 0.05);
  --qo-selected: rgba(214, 178, 94, 0.1);
  --qo-disabled-bg: rgba(255, 255, 255, 0.05);
  --qo-disabled-text: #7c8aa1;

  /* input */
  --qo-input-bg: rgba(6, 14, 28, 0.55);
  --qo-table-header-bg: rgba(255, 255, 255, 0.04);

  /* elevation — a dark surface gets depth from contrast, not from shadow.
     The workspace's shadows are invisible on navy and only muddy the edges. */
  --qo-shadow-sm: none;
  --qo-shadow: none;
  --qo-shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.4);

  /* typography — the workspace scale is deliberately dense for operators
     reading a queue all day. A partner reads this page a few times a month,
     often on a phone, so the body scale comes back up to the public site's. */
  --qo-font-body: 400 0.95rem/1.6 inherit;
  --qo-font-card-title: 700 1rem/1.35 inherit;
  --qo-font-section: 700 1.1rem/1.3 inherit;
  --qo-font-meta: 400 0.83rem/1.45 inherit;
  --qo-content-max: 1100px;
}

/* Partner premium shell marker — locked by visual contract tests */
/* pn-shell-v4-premium */

.pn-page { padding: 2.5rem 0 4rem; }
.pn-shell { max-width: 1100px; }
.pn-narrow { max-width: 480px; }

.pn-hero { margin-bottom: 1.75rem; }
.pn-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 0.4rem;
}
.pn-hero h1 { margin: 0 0 0.5rem; color: var(--ink, #f4f0e6); }
.pn-lead { max-width: 62ch; opacity: 0.85; color: #d3dcec; }

/* --------------------------------------------------------------------------
   Premium primary nav (pills / More panel — not a hyperlink strip)
   -------------------------------------------------------------------------- */
.pn-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.65rem;
  padding: 0.85rem 0.2rem;
  margin-bottom: 1.65rem;
  border-top: 1px solid rgba(214, 178, 94, 0.18);
  border-bottom: 1px solid rgba(214, 178, 94, 0.18);
}

/* One continuous pill row — More tools sits with primary links (not
   flex-pushed to the far edge as a separate control). */
.pn-nav-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
}

.pn-nav a,
.pn-nav-more > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(244, 240, 230, 0.92);
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.pn-nav a:hover,
.pn-nav a:focus-visible,
.pn-nav-more > summary:hover,
.pn-nav-more > summary:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fffef8;
  outline: none;
}

.pn-nav a.is-active,
.pn-nav a[aria-current="page"],
.pn-nav-more.is-active > summary,
.pn-nav-more[open] > summary {
  background: linear-gradient(
    135deg,
    rgba(240, 213, 138, 0.24),
    rgba(201, 162, 39, 0.12)
  );
  border-color: rgba(214, 178, 94, 0.45);
  color: #f0d58a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(214, 178, 94, 0.08);
}

.pn-nav-more {
  position: relative;
  flex: 0 0 auto;
  z-index: 45;
  pointer-events: auto;
}

.pn-nav-more > summary {
  list-style: none;
}

.pn-nav-more > summary::-webkit-details-marker { display: none; }

.pn-nav-more > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.85;
}

.pn-nav-more-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: auto;
  z-index: 40;
  display: grid;
  gap: 0.2rem;
  min-width: min(260px, 86vw);
  padding: 0.65rem 0.55rem 0.55rem;
  border-radius: 14px;
  border: 1px solid rgba(214, 178, 94, 0.28);
  background:
    radial-gradient(circle at 12% 0%, rgba(214, 178, 94, 0.12), transparent 42%),
    linear-gradient(180deg, #0f1a2b, #0b1424);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}

.pn-nav-more-heading {
  margin: 0.55rem 0.55rem 0.2rem;
  padding: 0;
  color: rgba(240, 213, 138, 0.78);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.pn-nav-more-heading:first-child {
  margin-top: 0.15rem;
}

.pn-nav-more-panel a {
  width: 100%;
  justify-content: flex-start;
  border-radius: 12px;
  min-height: 44px;
}

.pn-card,
.pn-metric,
.pn-share-card,
.pn-form-card,
.pn-framing {
  /* Real surfaces — never transparent flush strips */
  background:
    radial-gradient(circle at 100% 0%, rgba(214, 178, 94, 0.07), transparent 18rem),
    rgba(14, 28, 54, 0.88);
}

.pn-card {
  border: 1px solid rgba(214, 178, 94, 0.22);
  border-radius: 16px;
  padding: clamp(1.15rem, 2.4vw, 1.55rem) clamp(1.2rem, 2.6vw, 1.65rem);
  margin-bottom: 1.25rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  color: var(--ink, #f4f0e6);
}

.pn-card h2 {
  margin: 0 0 0.55rem;
  color: #f4f0e6;
}

.pn-card p,
.pn-card li {
  color: #d3dcec;
}

.pn-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.9rem;
  margin-bottom: 2rem;
}
.pn-metric {
  border: 1px solid rgba(214, 178, 94, 0.22);
  border-radius: 14px;
  padding: 1.05rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
.pn-metric-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: #f0d58a;
}
.pn-metric-label { font-size: 0.82rem; color: #9aa8bf; }

.pn-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.pn-table th,
.pn-table td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  vertical-align: top;
}

.pn-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.pn-list > li { margin-bottom: 0.5rem; }

.pn-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.2rem; }
.pn-dl dt { font-weight: 600; opacity: 0.75; }
.pn-dl dd { margin: 0; }

/* Apply form — dark surface with readable off-white ink (not muddy greys) */
.pn-form-card {
  max-width: 640px;
  margin: 0 0 2rem;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(214, 178, 94, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(214, 178, 94, 0.08), transparent 18rem),
    rgba(14, 28, 54, 0.88);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.pn-form-heading { margin-bottom: 8px; }
.pn-form-heading h2 {
  margin: 0 0 8px;
  color: #f4f0e6;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
}
.pn-form-heading p {
  margin: 0;
  color: #aab7ca;
  font-size: 0.92rem;
}
.pn-form-heading a {
  color: #f0d58a;
  font-weight: 700;
}
.pn-form-heading a:hover,
.pn-form-heading a:focus-visible {
  color: #f4f0e6;
}

.pn-form {
  display: grid;
  gap: 0.85rem;
  max-width: none;
  margin-top: 12px;
}
.pn-form > p {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  border-top: 0;
}
.pn-form > label {
  margin: 0;
}
.pn-form label {
  margin: 0;
  color: #e9e3d6;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.4;
}
.partner-network-page .pn-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.partner-network-page .pn-form select,
.partner-network-page .pn-form textarea,
.partner-network-page .pn-form input.form-control:not([type="checkbox"]):not([type="radio"]),
.partner-network-page .pn-form input.q-input:not([type="checkbox"]):not([type="radio"]),
.partner-network-page .pn-form textarea.form-control,
.partner-network-page .pn-form textarea.q-textarea,
.partner-network-page .pn-form select.form-control,
.partner-network-page .pn-form select.q-select,
.partner-network-page .pn-form .q-select,
.partner-network-page .pn-form .q-textarea,
.partner-network-page .pn-share-link input,
.partner-network-page .pn-share-message textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid rgba(201, 162, 39, 0.45);
  border-radius: 12px;
  outline: none;
  background: rgba(8, 18, 36, 0.96);
  color: #f4f0e6;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(214, 178, 94, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  font: inherit;
  font-weight: 500;
  line-height: 1.35;
}
.partner-network-page .pn-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
.partner-network-page .pn-form select:hover,
.partner-network-page .pn-form textarea:hover,
.partner-network-page .pn-share-link input:hover,
.partner-network-page .pn-share-message textarea:hover {
  border-color: rgba(214, 178, 94, 0.7);
}
.partner-network-page .pn-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.partner-network-page .pn-form select:focus,
.partner-network-page .pn-form textarea:focus,
.partner-network-page .pn-form input:focus-visible,
.partner-network-page .pn-form select:focus-visible,
.partner-network-page .pn-form textarea:focus-visible {
  border-color: #d6b25e;
  background: rgba(10, 22, 42, 0.98);
  box-shadow:
    0 0 0 3px rgba(214, 178, 94, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.partner-network-page .pn-form input::placeholder,
.partner-network-page .pn-form textarea::placeholder {
  color: #8b96a8;
  opacity: 1;
}
.partner-network-page .pn-form textarea,
.partner-network-page .pn-share-message textarea {
  min-height: 120px;
  resize: vertical;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

/* Selects must read as controls even when the selected value is short.
   Include .q-select/.form-control — those class selectors beat bare `select`
   on specificity and were resetting padding-right via the shared shorthand. */
.partner-network-page .pn-form select,
.partner-network-page .pn-form select.form-control,
.partner-network-page .pn-form select.q-select,
.partner-network-page .pn-form .q-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 12px 2.6rem 12px 14px !important;
  cursor: pointer;
  background-color: rgba(8, 18, 36, 0.96);
  background-image:
    linear-gradient(45deg, transparent 50%, #f0d58a 50%),
    linear-gradient(135deg, #f0d58a 50%, transparent 50%),
    linear-gradient(
      180deg,
      rgba(201, 162, 39, 0.12),
      rgba(201, 162, 39, 0.04)
    ) !important;
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px),
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
  border-color: rgba(201, 162, 39, 0.55);
}

.partner-network-page .pn-form select:invalid,
.partner-network-page .pn-form select option[value=""] {
  color: #9aa8bf;
}

.partner-network-page .pn-form select option {
  color: #f4f0e6;
  background: #0e1c36;
}
.partner-network-page .pn-form input[type="checkbox"],
.partner-network-page .pn-form input.q-checkbox[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  margin: 3px 10px 0 0;
  padding: 0 !important;
  flex: 0 0 18px;
  accent-color: #d6b25e;
  vertical-align: top;
  border-radius: 4px;
  background: rgba(8, 18, 36, 0.96);
  border: 1.5px solid rgba(201, 162, 39, 0.55);
  box-shadow: none;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: checkbox;
}
.partner-network-page .pn-form ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.partner-network-page .pn-form ul label,
.partner-network-page .pn-form label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: #d3dcec;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}
.partner-network-page .pn-form ul label input[type="checkbox"],
.partner-network-page .pn-form label:has(> input[type="checkbox"]) > input[type="checkbox"] {
  margin-top: 0.15rem;
}
.pn-form .helptext {
  color: #9aa8bf;
  font-size: 0.8rem;
  line-height: 1.5;
  opacity: 1;
}
.pn-form .errorlist {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 159, 159, 0.35);
  border-radius: 10px;
  background: rgba(255, 80, 80, 0.1);
  color: #ffb5b5;
  list-style: none;
  font-size: 0.86rem;
  font-weight: 700;
}

.pn-form .pn-submit.button {
  align-self: flex-start;
  margin-top: 18px;
  min-height: 52px;
}
.pn-submit,
.pn-danger {
  align-self: flex-start;
  margin-top: 1rem;
  font: inherit;
}
.pn-danger { opacity: 0.92; }

/* Bare portal forms (lead submit, campaign create) get the same card surface */
.partner-network-page .pn-shell > .pn-form,
.partner-network-page .pn-shell form.pn-form,
.partner-network-page section.pn-ws-card > .pn-form,
.partner-network-page section.pn-ws-card form.pn-form {
  padding: clamp(1.25rem, 2.8vw, 1.7rem) !important;
  border: 1px solid rgba(214, 178, 94, 0.22);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(214, 178, 94, 0.07), transparent 18rem),
    rgba(14, 28, 54, 0.88);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  box-sizing: border-box;
}

.pn-error { padding: 0.7rem 0.9rem; border-radius: 8px; border: 1px solid currentColor; }
.pn-note { font-size: 0.85rem; opacity: 0.72; }
.pn-version { font-size: 0.8rem; opacity: 0.7; }
.pn-state { font-weight: 600; }

/* Allowed and prohibited claims must never be mistaken for one another at a
   glance, so they differ in marker as well as in wording. */
.pn-allowed { list-style: "\2713\00a0"; padding-left: 1.4rem; }
.pn-prohibited { list-style: "\2717\00a0"; padding-left: 1.4rem; }
.pn-prohibited > li { font-weight: 500; }

.pn-framing {
  margin-top: 2.5rem;
  padding: 1.2rem 1.35rem;
  border-radius: 14px;
  border: 1px dashed rgba(214, 178, 94, 0.4);
}
.pn-framing h2 { font-size: 1rem; margin: 0 0 0.55rem; color: #f4f0e6; }
.pn-framing p { margin: 0 0 0.45rem; font-size: 0.9rem; color: #d3dcec; }

/* --- internal workspace --- */
.pn-ws-header { margin-bottom: 1.25rem; }
.pn-ws-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; padding-top: 0.5rem; }
.pn-ws-nav a { text-decoration: none; font-size: 0.92rem; }
.pn-ws-messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.pn-ws-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.pn-ws-metric {
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 10px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
}
.pn-ws-metric span { font-size: 1.5rem; font-weight: 600; }
.pn-ws-metric label { font-size: 0.78rem; opacity: 0.75; }
.pn-ws-card {
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.pn-ws-warn { border-style: dashed; }
.pn-ws-table { width: 100%; border-collapse: collapse; }
.pn-ws-table th,
.pn-ws-table td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  vertical-align: top;
  font-size: 0.92rem;
}
.pn-ws-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1rem; }
.pn-ws-form { display: flex; flex-direction: column; gap: 0.3rem; max-width: 680px; }
.pn-ws-form p { margin: 0 0 0.55rem; display: flex; flex-direction: column; gap: 0.2rem; }
.pn-ws-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1.1rem; }
.pn-ws-dl dt { font-weight: 600; opacity: 0.72; font-size: 0.88rem; }
.pn-ws-dl dd { margin: 0; font-size: 0.92rem; }
.pn-ws-note { font-size: 0.85rem; opacity: 0.72; }
.pn-ws-flag { font-size: 0.75rem; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid currentColor; }
.pn-ws-primary { text-decoration: none; padding: 0.45rem 1rem; border: 1px solid currentColor; border-radius: 999px; }
.pn-ws-danger { opacity: 0.85; }
.pn-ws-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }

.pn-ws-inline { display: inline-flex; gap: 0.35rem; align-items: center; margin: 0.2rem 0.4rem 0.2rem 0; }
.pn-ws-inline input[type="text"] { min-width: 14rem; }

/* --------------------------------------------------------------------------
   Share Centre.

   Built mobile-first on purpose: a partner standing in a college corridor
   with a phone is the likeliest user of this page, not somebody at a desk.
   Every control is reachable and tappable at 320px before any wider layout
   is applied.
   -------------------------------------------------------------------------- */

.pn-share-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25rem 0;
}

.pn-share-card {
  border: 1px solid rgba(214, 178, 94, 0.28);
  border-radius: 16px;
  padding: clamp(1.1rem, 2.2vw, 1.4rem);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
}

.pn-share-card h2 { margin: 0 0 0.45rem; font-size: 1.1rem; color: #f4f0e6; }
.pn-share-description { margin: 0 0 0.85rem; color: #d3dcec; font-size: 0.92rem; }

.pn-share-link input {
  /* Elevated interactive field — long URL must still select easily on a phone. */
  font-size: 0.85rem;
  overflow-x: auto;
}

.pn-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0.5rem;
}

/* 44px is the smallest reliably tappable target on a phone. Copy is the one
   control this page cannot afford to make fiddly. */
.pn-share-actions .button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  justify-content: center;
}

.pn-share-message { margin: 0.5rem 0; font-size: 0.9rem; }
.pn-share-message summary {
  cursor: pointer;
  color: #f0d58a;
  font-weight: 650;
}
.pn-share-message textarea {
  margin-top: 0.55rem;
}

.pn-share-funnel {
  display: grid;
  /* auto-fit rather than a fixed count: the card itself is narrow in the
     three-column layout, and forcing four columns made "Submissions" and
     "Qualified" collide into one unreadable word. Let the labels decide how
     many fit. */
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.6rem 0.75rem;
  margin: 0.9rem 0 0;
}

.pn-share-funnel dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  white-space: nowrap;
}
.pn-share-funnel dd { margin: 0.1rem 0 0; font-size: 1.25rem; font-weight: 600; }
.pn-share-sub { display: block; font-size: 0.72rem; font-weight: 400; opacity: 0.65; }

.pn-chip {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  border: 1px solid rgba(180, 150, 90, 0.4);
  opacity: 0.85;
}

@media (min-width: 700px) {
  .pn-share-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-share-actions .button { flex: 0 0 auto; }
}

@media (min-width: 1100px) {
  .pn-share-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   PARTNER PORTAL SHELL — logo / CTAs / qa11y / mobile
   Same defect classes as Student 2026-08-12; scoped to partner-network-page.
   ========================================================================== */

/* Logo: never invert the gold-on-black brand asset into a white box */
body.partner-network-page .site-header .brand-logo {
  filter: none !important;
  mix-blend-mode: lighten;
  opacity: 1;
  max-height: 40px;
  width: auto;
  height: auto;
  background: transparent;
}

body.partner-network-page .site-header .header-brand-stack {
  width: auto !important;
  max-width: min(220px, 36vw);
}

body.partner-network-page .site-header .brand-badge-udyam {
  max-height: 28px;
  width: auto;
  opacity: 0.86;
  mix-blend-mode: lighten;
}

body.partner-network-page .brand-cluster {
  gap: 14px;
  align-items: center;
}

/* Kill public hyperlink separator dots / underline rails on partner chrome */
body.partner-network-page:not(.pn-auth-page) .site-navigation > a:not(:first-child)::before,
body.partner-network-page:not(.pn-auth-page) .site-navigation > details:not(:first-child) > summary::before,
body.partner-network-page:not(.pn-auth-page) .site-navigation > a::after,
body.partner-network-page:not(.pn-auth-page) .site-navigation a.is-active::after,
body.partner-network-page:not(.pn-auth-page) .site-navigation a[aria-current="page"]::after {
  content: none !important;
  display: none !important;
}

/* Header primary nav — same pill language as Student (partner-scoped) */
body.partner-network-page:not(.pn-auth-page) .site-navigation {
  gap: 8px;
  align-items: center;
}

body.partner-network-page:not(.pn-auth-page) .site-navigation > a,
body.partner-network-page:not(.pn-auth-page) .site-navigation > details.nav-dropdown {
  position: relative;
  z-index: 1;
  isolation: isolate;
  flex-shrink: 0;
}

body.partner-network-page:not(.pn-auth-page) .site-navigation > details.nav-dropdown[open] {
  z-index: 80;
}

body.partner-network-page:not(.pn-auth-page) .site-navigation > a,
body.partner-network-page:not(.pn-auth-page) .site-navigation > details > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(244, 240, 230, 0.9) !important;
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: none;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

body.partner-network-page:not(.pn-auth-page) .site-navigation > a:hover,
body.partner-network-page:not(.pn-auth-page) .site-navigation > a:focus-visible,
body.partner-network-page:not(.pn-auth-page) .site-navigation > details > summary:hover,
body.partner-network-page:not(.pn-auth-page) .site-navigation > details > summary:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fffef8 !important;
  outline: none;
}

body.partner-network-page:not(.pn-auth-page) .site-navigation > a.is-active,
body.partner-network-page:not(.pn-auth-page) .site-navigation > a[aria-current="page"],
body.partner-network-page:not(.pn-auth-page) .site-navigation > details > summary.is-active,
body.partner-network-page:not(.pn-auth-page) .site-navigation > details[open] > summary {
  background: linear-gradient(
    135deg,
    rgba(240, 213, 138, 0.24),
    rgba(201, 162, 39, 0.12)
  );
  border-color: rgba(214, 178, 94, 0.45);
  color: #f0d58a !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(214, 178, 94, 0.08);
}

body.partner-network-page:not(.pn-auth-page) .site-navigation .nav-dropdown-panel,
body.partner-network-page:not(.pn-auth-page) .site-navigation .nav-split-panel {
  border: 1px solid rgba(214, 178, 94, 0.28);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(214, 178, 94, 0.12), transparent 42%),
    linear-gradient(180deg, #0f1a2b, #0b1424);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}

body.partner-network-page .header-actions .button-quiet,
body.partner-network-page .header-profile-chip {
  border-radius: 999px;
  min-height: 38px;
}

/* Primary / secondary CTAs — gold pills + visible outline pills */
body.partner-network-page .button-primary,
body.partner-network-page .button.button-primary,
body.partner-network-page .pn-submit,
body.partner-network-page .button.pn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(145deg, #f0d58a, #d6b25e);
  color: #07101f !important;
  font-weight: 800;
  text-decoration: none !important;
  box-shadow: 0 16px 35px rgba(214, 178, 94, 0.16);
  cursor: pointer;
}

body.partner-network-page .button-primary:hover,
body.partner-network-page .button-primary:focus-visible,
body.partner-network-page .pn-submit:hover,
body.partner-network-page .pn-submit:focus-visible {
  background: #f0d58a;
  color: #07101f !important;
}

body.partner-network-page .button-secondary,
body.partner-network-page .button.button-secondary,
body.partner-network-page .button-outline,
body.partner-network-page .button.button-outline,
body.partner-network-page a.button.button-outline,
html[data-qa11y-theme] body.partner-network-page .button-outline,
html[data-qa11y-theme] body.partner-network-page .button.button-outline,
html[data-qa11y-theme] body.partner-network-page a.button.button-outline,
html[data-qa11y-theme] body.partner-network-page .button-secondary,
html[data-qa11y-theme] body.partner-network-page .button.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  background: rgba(14, 28, 54, 0.72);
  color: #f4f0e6 !important;
  border: 1px solid rgba(201, 162, 39, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  text-decoration: none !important;
  font-weight: 700;
  cursor: pointer;
}

body.partner-network-page .button-secondary:hover,
body.partner-network-page .button-secondary:focus-visible,
body.partner-network-page .button-outline:hover,
body.partner-network-page .button-outline:focus-visible,
html[data-qa11y-theme] body.partner-network-page .button-outline:hover,
html[data-qa11y-theme] body.partner-network-page .button-outline:focus-visible,
html[data-qa11y-theme] body.partner-network-page .button-secondary:hover,
html[data-qa11y-theme] body.partner-network-page .button-secondary:focus-visible {
  background: rgba(201, 162, 39, 0.14);
  border-color: rgba(201, 162, 39, 0.75);
  color: #f0d58a !important;
}

body.partner-network-page .pn-danger,
body.partner-network-page button.pn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 159, 159, 0.55);
  background: rgba(255, 80, 80, 0.1);
  color: #ffb5b5;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
}

body.partner-network-page .button:disabled,
body.partner-network-page .button[aria-disabled="true"],
body.partner-network-page .pn-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Reading-preferences themes must not wipe partner field chrome */
html[data-qa11y-theme] body.partner-network-page .pn-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html[data-qa11y-theme] body.partner-network-page .pn-form select,
html[data-qa11y-theme] body.partner-network-page .pn-form textarea,
html[data-qa11y-theme] body.partner-network-page .pn-share-link input,
html[data-qa11y-theme] body.partner-network-page .pn-share-message textarea {
  background: rgba(8, 18, 36, 0.96);
  color: #f4f0e6;
  border: 1.5px solid rgba(201, 162, 39, 0.55);
}

html[data-qa11y-theme="dark"] body.partner-network-page,
html[data-qa11y-theme="dark"] body.partner-network-page .pn-page {
  color: #f4f0e6;
}

/* Empty states / notes stay readable on dark cards */
body.partner-network-page .pn-note,
body.partner-network-page .pn-list + p,
body.partner-network-page .pn-page > p {
  color: #9aa8bf;
}

body.partner-network-page .pn-list a {
  color: #f0d58a;
  font-weight: 650;
  text-decoration: none;
}

body.partner-network-page .pn-list a:hover,
body.partner-network-page .pn-list a:focus-visible {
  color: #fffef8;
  text-decoration: underline;
}

body.partner-network-page .pn-table {
  background: rgba(14, 28, 54, 0.55);
  border: 1px solid rgba(214, 178, 94, 0.18);
  border-radius: 14px;
  overflow: hidden;
}

body.partner-network-page .pn-table th {
  color: #f0d58a;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.03);
}

body.partner-network-page .pn-table td {
  color: #d3dcec;
}

/* Login / reset / OTP secondary auth stack */
.partner-network-page .pn-auth-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  margin-top: 1rem;
  min-height: 48px;
}

.partner-network-page .pn-auth-note {
  margin: 0.85rem 0 0;
  color: #9aa8bf;
  font-size: 0.9rem;
  line-height: 1.45;
}

.partner-network-page .pn-auth-note a {
  color: #f0d58a;
  font-weight: 700;
  text-decoration: none;
}

.partner-network-page .pn-auth-note a:hover,
.partner-network-page .pn-auth-note a:focus-visible {
  color: #fffef8;
  text-decoration: underline;
}

.partner-network-page .pn-auth-back {
  margin: 0 0 1rem;
}

.partner-network-page .pn-auth-back a {
  color: #f0d58a;
  font-weight: 650;
  text-decoration: none;
}

.partner-network-page .pn-link-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #f0d58a;
  font: inherit;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 700px) {
  .pn-nav {
    gap: 0.5rem;
  }

  .pn-nav-primary {
    width: 100%;
  }

  .pn-nav-primary a {
    flex: 1 1 calc(50% - 0.4rem);
    justify-content: center;
  }

  .pn-nav-more {
    width: 100%;
  }

  .pn-nav-more > summary {
    width: 100%;
  }

  .pn-nav-more-panel {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 0.35rem;
    box-shadow: none;
  }

  .pn-page {
    padding: 1.5rem 0 3rem;
  }

  .pn-shell {
    overflow-x: clip;
  }

  .pn-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------------------------------------------------------------------------
   Messages: partner nav entry and dashboard quick-access card.

   The Communication Hub shipped with routes and no entry point, so this is the
   discoverability layer rather than new mail styling. The nav pill itself
   inherits `.pn-nav a`; only the unread badge is new.

   The card is built to survive 320px: the head and the actions are separate
   flex rows that wrap independently, and every count is its own chip, because
   a single non-wrapping line is what pushed earlier cards off-screen.
   --------------------------------------------------------------------------- */

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

.pn-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0d58a, #c9a227);
  color: #1a1408;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.pn-mail-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.75rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(214, 178, 94, 0.28);
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(240, 213, 138, 0.09),
    rgba(255, 255, 255, 0.03)
  );
}

.pn-mail-card-head {
  min-width: 0;
  flex: 1 1 16rem;
}

.pn-mail-card-head h2 {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.pn-mail-card-state {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  margin: 0;
  font-size: 0.85rem;
  color: rgba(244, 240, 230, 0.78);
}

.pn-mail-card-state > span {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.pn-mail-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 1 auto;
}

.pn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(214, 178, 94, 0.45);
  background: linear-gradient(135deg, #f0d58a, #c9a227);
  color: #1a1408;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: filter 0.16s ease, background 0.16s ease;
}

.pn-btn:hover,
.pn-btn:focus-visible {
  filter: brightness(1.06);
  outline: none;
}

.pn-btn-quiet {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(244, 240, 230, 0.94);
}

.pn-btn-quiet:hover,
.pn-btn-quiet:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 560px) {
  .pn-mail-card {
    padding: 1rem;
  }

  /* Full-width actions below 560px: side-by-side pills were the first thing
     to overflow once the card carried two of them. */
  .pn-mail-card-actions {
    width: 100%;
  }

  .pn-mail-card-actions .pn-btn {
    flex: 1 1 8rem;
  }
}

/* --- new-message toast --------------------------------------------------- *
 * Rendered by mail_toast.js on any partner portal page, so the styles live
 * with the shared mailbox layer rather than one screen's stylesheet.
 * Fixed bottom-left, clear of the Service Desk launcher bottom-right. */

.cm-toast {
  position: fixed; left: 16px; bottom: 16px; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  max-width: min(26rem, calc(100vw - 32px));
  padding: .75rem .9rem;
  border: 1px solid var(--qo-border, rgba(255, 255, 255, .18));
  border-left: 3px solid var(--qo-accent, #2f6df6);
  border-radius: var(--qo-radius-md, 10px);
  background: var(--qo-surface-2, #10192a);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.cm-toast-text { margin: 0; display: grid; gap: .1rem; min-width: 0; }
.cm-toast-subject {
  font-size: .82rem; color: var(--qo-text-muted, #97a3b6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 18rem;
}
.cm-toast-open { text-decoration: none; }

@media (prefers-reduced-motion: no-preference) {
  .cm-toast { animation: cm-toast-in .2s ease; }
  @keyframes cm-toast-in {
    from { transform: translateY(8px); opacity: 0; }
  }
}

/* The toast renders on pages that never load mailbox.css, so the button
 * shapes it relies on are (re)stated here, scoped to the toast. */
.cm-toast .cm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: .35rem .7rem;
  border: 1px solid var(--qo-border, rgba(255, 255, 255, .18));
  border-radius: 8px; background: transparent; color: inherit;
  font: inherit; font-size: .85rem; cursor: pointer; text-decoration: none;
}
.cm-toast .cm-btn-primary {
  background: var(--qo-accent, #2f6df6); border-color: transparent;
  color: #fff; font-weight: 600;
}

/* Follow-up toast (owner, 14 Aug 2026): a due follow-up announces
   itself on the dashboard the moment it arrives. */
.pn-followup-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid rgba(214, 178, 94, 0.45);
  border-radius: 12px;
  background: rgba(214, 178, 94, 0.12);
  color: #f4f0e6;
}

.pn-followup-toast a {
  color: #f0d58a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Agreement banner reuses the follow-up toast surface; wrap the two
   links on a narrow partner dashboard instead of clipping them. */
.pn-agreement-banner {
  flex-wrap: wrap;
}

/* nowrap so overflow JS can park pills. overflow:visible so More tools
   and Action Centre / Profile stay clickable (panel not clipped). */
.pn-nav-primary {
  flex-wrap: nowrap;
  overflow: visible;
}
@media (max-width: 767.98px) {
  .pn-nav a,
  .pn-nav-more > summary,
  .q-nav-overflow > summary {
    min-height: 44px;
  }
}
@media (min-width: 2560px) {
  .pn-shell {
    max-width: 1680px;
  }
}