/* =============== RESET & BASE =============== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  /* ===== USER CANONICAL PALETTE =====
     Main Soft Coral Background: #FCE5DA (252, 229, 218)
     Light Coral / Peach:        #FDEEE6 (253, 238, 230)
     Card / Cream White:         #FFFAF8 (255, 250, 248)
     Warm Ivory:                 #FFF3EE (255, 243, 238)
     Coral Accent:               #FF7043 (255, 112, 67)
     Dark Gold / Bronze Text:    #994B0D (153, 75, 13)
     Muted Brown Text:           #795548 (121, 85, 72)
  */
  /* PSU coral is the one action color across every portal. Its darkened
     action shade keeps white labels at WCAG AA contrast; peach is reserved
     for quiet surfaces, never for critical text. */
  --color-primary: #ff7f50;
  --color-primary-dark: #e05a2b;
  --color-primary-light: #fdeee6;
  --color-tertiary: #fce5da;
  --gradient-primary: linear-gradient(135deg, #ff7f50, #e05a2b);
  --gradient-secondary: linear-gradient(135deg, #994b0d, #7a3c0a);
  --color-on-primary: #0f172a;

  --color-secondary: #994b0d;
  --color-secondary-dark: #7a3c0a;
  --color-accent-text: #994b0d;
  --color-focus: #e05a2b;

  --color-success: #22c55e;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  --color-warning: #eab308;
  --color-success-text: #166534;
  --color-error-text: #b91c1c;
  --color-info-text: #1d4ed8;
  --color-warning-text: #854d0e;

  /* Surfaces & Canvas */
  --canvas: #fffaf8;
  --surface: #ffffff;
  --surface-subtle: #fff5f1;
  --card-cream: #ffffff;
  --warm-ivory: #fff5f1;
  --line: #eadbd5;
  --line-strong: #ddc7bf;

  /* Typography */
  --ink: #1f2937;
  --body-text: #334155;
  --muted: #64748b;
  --text-primary: #1f2937;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --text-inverse: #ffffff;

  /* Emotional accents */
  --brand: var(--color-primary);
  --brand-action: var(--color-primary);
  --brand-strong: var(--color-primary-dark);
  --brand-tint: #fbeee7;
  --trust: var(--color-secondary);
  --trust-tint: #fdeee6;
  --info: #1d4ed8;
  --info-light: #eff6ff;
  --info-tint: #eff6ff;
  --success: #166534;
  --success-light: #f0fdf4;
  --success-tint: #f0fdf4;
  --warning: #854d0e;
  --warning-light: #fffbeb;
  --warning-tint: #fffbeb;
  --danger: #b91c1c;
  --danger-light: #fef2f2;
  --danger-tint: #fef2f2;
  --collab: #1d4ed8;
  --collab-tint: #eff6ff;
  --market: var(--color-secondary);
  --market-tint: #fdeee6;

  /* Authority & Navigation */
  --navy: var(--color-secondary);
  --navy-dark: #102a43;
  --navy-slate: #263b4d;
  --navy-light: #eaf0f5;
  --navy-subtle: #dce7ef;

  /* Action & Accent */
  --gold: var(--color-primary);
  --gold-accessible: var(--color-accent-text);
  --gold-light: #fbe5df;
  --gold-dark: var(--color-primary-dark);

  /* Grays & Neutrals mapped to user warm palette */
  --white: #ffffff;
  --gray-50: #fffaf8;
  --gray-100: #f8eeea;
  --gray-200: #eadbd5;
  --gray-300: #ddc7bf;
  --gray-400: #83665c;
  --gray-500: #795548;
  --gray-600: #6d4c41;
  --gray-700: #5d4037;
  --gray-800: #4e342e;
  --gray-900: #3e2723;

  --green: #22c55e;
  --green-bg: #dcfce7;
  --yellow: #eab308;
  --yellow-bg: #fef9c3;
  --red: #ef4444;
  --red-bg: #fee2e2;
  --blue: #3b82f6;
  --blue-bg: #dbeafe;
  --indigo: #6366f1;
  --indigo-bg: #eef2ff;
  --pink: #ec4899;
  --pink-bg: #fdf2f8;

  --sidebar-w: 260px;
  --sidebar-collapsed-w: 72px;
  --topbar-h: 64px;
  --top-alert-h: 44px;

  /* Radii scale */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --radius-pill: 9999px;

  /* Elevation scale */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.07), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.03);
  --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.15);

  /* Focus rings */
  --ring-focus: 0 0 0 3px rgba(255, 112, 67, 0.35);
  --ring-focus-brand: 0 0 0 3px rgba(153, 75, 13, 0.45);
  --ring-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.35);

  --transition: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  background-color: var(--canvas);
  background-image: none;
  background-attachment: fixed;
  color: var(--gray-800);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
  border: none;
  font-family: inherit;
}
input,
select,
textarea {
  font-family: inherit;
  font-size: 0.95rem;
}

/* =============== ACCESSIBILITY FOCUS INDICATORS (WCAG 2.4.7 AA) =============== */
:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

/* Accessibility & High-Contrast Typography Utilities */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-brand { color: var(--color-accent-text) !important; }
.text-gold { color: var(--gold-accessible) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-info { color: var(--info) !important; }
.page {
  display: none;
}
.page.active {
  display: block;
  animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =============== GLOBAL ANIMATIONS =============== */
@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes floatSoft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.stat-card,
.service-card,
.detail-panel,
.table-container,
.innovation-card,
.profile-card {
  animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.stat-card:nth-child(1) {
  animation-delay: 0.05s;
}
.stat-card:nth-child(2) {
  animation-delay: 0.1s;
}
.stat-card:nth-child(3) {
  animation-delay: 0.15s;
}
.stat-card:nth-child(4) {
  animation-delay: 0.2s;
}
/* Icon Alignment & Consistency */
i[class*="fa-"] {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* =============== BUTTONS =============== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 2px solid transparent;
  letter-spacing: 0.3px;
}
/* Crawlable CTAs are <a class="btn"> rather than <button>. Anchors inherit the
   body line-height; buttons use "normal". Pin it so both render the same height. */
a.btn {
  line-height: normal;
}
.btn-primary {
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  box-shadow: 0 4px 14px rgba(198, 77, 58, 0.24);
  border: 1px solid var(--color-primary-dark);
}
.btn-primary i {
  color: var(--color-on-primary) !important;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(169, 61, 44, 0.3);
  /* Darken on hover (not lighten) so white label contrast improves, not degrades. */
  filter: brightness(0.95);
}
.btn-primary:active {
  transform: scale(0.97);
}
.btn-outline {
  background: #ffffff;
  border: 1.5px solid var(--line-strong);
  color: var(--gray-700);
  text-shadow: none;
  box-shadow: var(--shadow-xs);
}
.btn-outline:hover {
  background: var(--surface-subtle);
  border-color: var(--gray-400);
  color: var(--gray-900);
  transform: translateY(-1px);
}
.btn-outline-navy {
  background: transparent;
  border: 1.5px solid var(--navy);
  color: var(--navy);
}
.btn-outline-navy:hover {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.btn-outline-danger {
  background: transparent;
  border: 1.5px solid var(--danger);
  color: var(--danger);
}
.btn-outline-danger:hover {
  background: var(--danger);
  color: var(--white);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.btn-secondary {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--gray-700);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
  background: var(--surface-subtle);
  border-color: var(--line-strong);
  color: var(--gray-900);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn-danger {
  background: var(--red);
  color: white;
}
.btn-danger:hover {
  background: var(--color-error);
}
.btn-success {
  background: var(--green);
  color: white;
}
.btn-success:hover {
  background: var(--color-success);
}
.btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
}
.btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
}
.btn-block {
  width: 100%;
  justify-content: center;
}
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  color: var(--gray-600);
}
.btn-icon:hover {
  background: var(--gray-200);
}

/* =============== PUBLIC NAV =============== */
.top-alert-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1300;
  height: var(--top-alert-h);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 56px 0 24px;
  background: var(--color-error-text);
  color: #ffffff;
  border-bottom: 2px solid var(--color-error);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 8px 22px rgba(185, 28, 28, 0.22);
}

.top-alert-content {
  width: min(1360px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
}

.top-alert-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 10px;
  border-radius: 4px;
  background: #ffffff;
  color: var(--color-error-text);
  border: 2px solid rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.top-alert-message {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff7f7;
}

.top-alert-action,
.top-alert-close {
  border: 0;
  background: transparent;
  color: #ffffff;
}

.top-alert-action {
  flex-shrink: 0;
  padding: 0;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.top-alert-close {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  opacity: 0.9;
}

.top-alert-action:hover,
.top-alert-close:hover {
  opacity: 0.78;
  background: rgba(255, 255, 255, 0.12);
}

body.show-system-alert .top-alert-banner {
  display: flex;
}

#public-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  padding: 0 24px;
  display: none;
  border-bottom: 1px solid rgba(255, 112, 67, 0.18);
  box-shadow: 0 10px 30px rgba(255, 112, 67, 0.08);
}
#public-nav.active {
  display: block;
}

body.show-system-alert #public-nav {
  top: var(--top-alert-h);
}

body.portal-login-mode #public-nav {
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
  padding: 24px;
}

body.portal-login-mode #public-nav .nav-container {
  height: auto;
  max-width: none;
  justify-content: center;
}

body.portal-login-mode #public-nav .nav-links,
body.portal-login-mode #public-nav .mobile-menu-btn,
body.portal-login-mode #ui-back-btn-public {
  display: none !important;
}

body.portal-login-mode #public-nav .nav-brand {
  cursor: default;
  pointer-events: none;
}

/* Every login entity (applicant, evaluator, admin) sits on the landing's warm
   blush canvas instead of the dead near-white gray. The admin/evaluator portal
   additionally switches its brand lockup to ink so the header stays legible —
   white-on-light was why it was invisible. */
body.standalone-login-mode {
  background: linear-gradient(180deg, #ffe7d5 0%, #ffdfc8 100%) fixed;
}

body.portal-login-mode #public-nav .brand-name {
  color: var(--navy, var(--navy));
}

body.portal-login-mode #public-nav .brand-sub {
  color: rgba(139, 69, 19, 0.72);
}

body.standalone-login-mode #dashboard-layout,
body.standalone-login-mode #dashboard-topbar,
body.standalone-login-mode #sidebar,
body.standalone-login-mode #dashboard-top-nav,
body.standalone-login-mode .bottom-nav {
  display: none !important;
}

body.standalone-login-mode {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body.standalone-login-mode #app {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body.standalone-login-mode #main-content {
  margin-left: 0 !important;
  padding: 0;
}

body.standalone-login-mode #page-login.active,
body.standalone-login-mode #page-signup.active,
body.standalone-login-mode #page-forgot-password.active,
body.standalone-login-mode #page-reset-password.active {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body.standalone-login-mode .login-wrapper {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-x: hidden;
  overflow-y: auto;
}

body.standalone-login-mode .login-card {
  max-width: 430px;
  padding: clamp(30px, 4vw, 42px);
}

body.show-system-alert.top-nav-layout #dashboard-topbar {
  top: var(--top-alert-h);
}

body.show-system-alert.top-nav-layout #dashboard-layout {
  padding-top: calc(var(--topbar-h) + var(--top-alert-h));
}

@media (max-width: 640px) {
  .top-alert-banner {
    padding: 0 48px 0 12px;
    font-size: 0.78rem;
  }
  .top-alert-content {
    justify-content: flex-start;
    gap: 8px;
  }
  .top-alert-label {
    height: 26px;
    padding: 0 8px;
    font-size: 0.68rem;
  }
  .top-alert-action {
    display: none;
  }
  .top-alert-close {
    right: 10px;
  }
}
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: var(--gray-800);
  /* The institution name is backend-driven and can be long. Cap the brand
     block so it never starves the nav row; it may shrink but never grow. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 320px;
}
.brand-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-primary);
  font-size: 1.2rem;
}
.brand-icon.small {
  width: 36px;
  height: 36px;
  font-size: 1rem;
}
/* Public/landing brand slots opt out of the shield fallback. When no
   admin-configured logo exists the slot is empty, so collapse the tile
   entirely instead of leaving an empty gold square. */
.brand-icon[data-brand-logo-fallback="none"]:empty {
  display: none;
}
.brand-text {
  display: flex;
  flex-direction: column;
}
.brand-name {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy);
  /* A long name folds to at most two tight lines instead of growing the header. */
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.brand-sub {
  font-size: 0.7rem;
  color: var(--gray-500);
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
/* Nav items keep their intrinsic width -- shrinking them is what broke
   "Sign Up" onto two lines and distorted its pill border. */
.nav-links > li {
  flex: 0 0 auto;
}
.nav-link {
  color: var(--gray-700);
  opacity: 1;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition);
  white-space: nowrap;
}
.nav-link:hover,
.nav-link.active {
  color: var(--navy);
  background: rgba(255, 112, 67, 0.12);
}

/* Public Nav Dropdowns */
.nav-item-dropdown {
  position: relative;
}
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #ffffff;
  min-width: 220px;
  box-shadow: 0 10px 35px rgba(255, 112, 67, 0.15);
  border-radius: var(--radius-sm);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
  border: 1px solid rgba(255, 112, 67, 0.12);
}
.nav-item-dropdown:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown-header {
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--gray-400);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.dropdown-content a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: var(--gray-700);
  font-size: 0.9rem;
  font-weight: 600;
  transition: var(--transition);
}
.dropdown-content a:hover {
  background: rgba(255, 112, 67, 0.08);
  color: var(--navy);
  padding-left: 24px;
}
.dropdown-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: var(--gray-700);
  font-size: 0.9rem;
  font-weight: 600;
  transition: var(--transition);
  cursor: pointer;
}
.dropdown-item:hover {
  background: rgba(255, 112, 67, 0.08);
  color: var(--navy);
  padding-left: 24px;
}

/* Navbar Sub-Dropdown (Fly-out) */
.nav-item-sub-dropdown {
  position: relative;
}
.sub-dropdown-content {
  position: absolute;
  top: 0;
  left: 100%;
  transform: translateX(10px);
  background: #ffffff;
  min-width: 200px;
  box-shadow: 0 10px 35px rgba(255, 112, 67, 0.15);
  border-radius: var(--radius-sm);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 110;
  border: 1px solid rgba(255, 112, 67, 0.12);
  white-space: nowrap;
}
.nav-item-sub-dropdown:hover .sub-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.sub-dropdown-content a {
  padding-left: 20px !important;
  white-space: nowrap;
}
.sub-dropdown-content a:hover {
  padding-left: 24px !important;
}

/* 3rd Level Nesting (Sub-Sub-Dropdown) */
.nav-item-sub-sub-dropdown {
  position: relative;
}
.sub-sub-dropdown-content {
  position: absolute;
  top: -8px;
  left: 100%;
  transform: translateX(10px);
  background: #ffffff;
  min-width: 220px;
  box-shadow: 0 10px 35px rgba(255, 112, 67, 0.15);
  border-radius: var(--radius-sm);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 120;
  border: 1px solid rgba(255, 112, 67, 0.12);
  white-space: nowrap;
}
.nav-item-sub-sub-dropdown:hover > .sub-sub-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.sub-sub-dropdown-content a {
  padding-left: 20px !important;
  white-space: nowrap;
}
.sub-sub-dropdown-content a:hover {
  padding-left: 24px !important;
  background: var(--gray-50);
}

.dropdown-content i {

  color: var(--color-accent-text);
  width: 16px;
  text-align: center;
}

.btn-signup {
  background: transparent !important;
  border: 1px solid var(--gold) !important;
  color: var(--color-accent-text) !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  margin-right: 8px;
}
.btn-signup:hover {
  background: rgba(255, 112, 67, 0.08) !important;
  transform: translateY(-2px);
}
.btn-login {
  background: linear-gradient(135deg, var(--brand-action), var(--brand-strong)) !important;
  /* Transparent border matches .btn-signup's 1px, so the two pills are
     exactly the same height and share a baseline. */
  border: 1px solid transparent !important;
  color: var(--color-on-primary) !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
}
.btn-login:hover {
  background: var(--brand-strong) !important;
  transform: translateY(-2px);
}
.mobile-menu-btn {
  display: none;
  background: none;
  color: var(--navy);
  font-size: 1.4rem;
}

/* =============== NOTIFICATIONS =============== */
.notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;
}
.notif-item:hover {
  background: var(--gray-50);
}
.notif-item.unread {
  background: rgba(59, 130, 246, 0.04);
}
.notif-item.unread::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-info);
}
.notif-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}
.notif-info {
  flex: 1;
  min-width: 0;
}
.notif-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
}
.notif-category {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-bottom: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  color: var(--gray-500);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.notif-body {
  font-size: 0.78rem;
  color: var(--gray-500);
  line-height: 1.4;
  margin-bottom: 4px;
}
.notif-time {
  font-size: 0.72rem;
  color: var(--gray-400);
}
/* "View Case →" on a notification row. The whole row is already the button
   (role=button + Enter/Space handler), so this is an AFFORDANCE, not a second
   control: it tells the reader the row goes somewhere. It is deliberately not
   a <button>, which would nest an interactive element inside another and give
   screen readers two targets for one action.
   inline-flex + gap keeps the arrow on the text baseline, and the row wraps
   rather than overflowing at 320px. */
.notif-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-accent-text);
  white-space: nowrap;
}
.notif-item:hover .notif-cta {
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  .notif-cta { transition: none; }
}
.notif-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.notif-actions .btn {
  padding: 6px 10px;
  font-size: 0.72rem;
}
.notification-detail-modal {
  padding: 4px;
}
.notification-detail-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 16px;
}
.notification-detail-content h2 {
  color: var(--navy);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 10px;
}
.notification-detail-content p {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 12px;
}
.notification-detail-time,
.notification-detail-ref {
  color: var(--gray-500);
  font-size: 0.82rem;
  margin-top: 8px;
}
.notification-detail-ref strong {
  color: var(--navy);
}
.notification-detail-note {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.06);
  color: var(--color-info-text);
  font-size: 0.84rem;
  font-weight: 700;
}
.notification-detail-record {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.notification-detail-record div {
  padding: 12px;
  border-radius: 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
}
.notification-detail-record strong,
.notification-detail-record span {
  display: block;
}
.notification-detail-record strong {
  color: var(--gray-400);
  font-size: 0.72rem;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.notification-detail-record span {
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 800;
}

@media (max-width: 560px) {
  .notification-detail-record {
    grid-template-columns: 1fr;
  }
}

/* =============== HERO SECTION =============== */
#page-landing {
  /* Lively sunrise wash — warm coral/amber glows over a peach gradient
     replaces the flat gray that read as lifeless. */
  background:
    radial-gradient(
      circle at top right,
      rgba(255, 138, 76, 0.2),
      transparent 36%
    ),
    radial-gradient(
      circle at left 20%,
      rgba(255, 176, 128, 0.3),
      transparent 24%
    ),
    radial-gradient(
      circle at 78% 88%,
      rgba(255, 197, 160, 0.35),
      transparent 42%
    ),
    linear-gradient(180deg, #fff8f2 0%, #ffeddd 48%, #ffdfc8 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}
.hero {
  position: relative;
  min-height: 92vh;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
  padding: 132px 24px 88px;
}
.hero-bg-shapes .shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  background: rgba(255, 112, 67, 0.12);
}
/* Each floating circle gets its own warm tone for a lively, layered feel. */
.shape-1 { background: rgba(255, 112, 67, 0.14); }
.shape-2 { background: #ffe3bd; }
.shape-3 { background: #ffc7ad; }
.shape-4 { background: #ffdcc4; }
.shape-5 { background: #ffe7cb; }
.shape-6 { background: #ffcfb6; }
.shape-1 {
  width: 500px;
  height: 500px;
  top: -100px;
  right: -100px;
  animation: float 8s ease-in-out infinite;
}
.shape-2 {
  width: 300px;
  height: 300px;
  bottom: -50px;
  left: -50px;
  animation: float 6s ease-in-out infinite reverse;
}
.shape-3 {
  width: 200px;
  height: 200px;
  top: 40%;
  left: 15%;
  animation: float 10s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-30px) rotate(5deg);
  }
}
.bottom-shapes {
  top: auto;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}
.shape-4 {
  width: 400px;
  height: 400px;
  bottom: -100px;
  left: -100px;
  animation: float 12s ease-in-out infinite;
}
.shape-5 {
  width: 250px;
  height: 250px;
  bottom: 10%;
  right: 10%;
  animation: float 9s ease-in-out infinite reverse;
}
.shape-6 {
  width: 150px;
  height: 150px;
  bottom: 30%;
  right: -50px;
  animation: float 15s ease-in-out infinite;
}
.hero-layout {
  position: relative;
  z-index: 2;
  width: min(1280px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 42px;
}
.hero-layout.centered {
  grid-template-columns: 1fr;
  text-align: center;
}
.hero-layout.centered .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}
.hero-layout.centered .hero-cta {
  justify-content: center;
}
.hero-layout.centered .hero-badge {
  margin-left: auto;
  margin-right: auto;
}
/* Both credential logos share ONE square box so the hero reads symmetrically.
   Size is declared here only -- do not re-declare width/height on .left or
   .right, or the pair drifts apart again (that was the old 220px vs 72px bug). */
/* Circular badges. These are admin-uploadable images whose own backgrounds are
   opaque rectangles (an orange square behind the seal, a dark panel behind the
   partner mark), which showed as hard rectangles on the hero wash. `cover` fills
   the circle edge to edge so no source rectangle is ever visible, whatever
   aspect ratio is uploaded. */
.hero-corner-logo {
  position: absolute;
  /* Fixed offset, not a %, so the logo clears the 72px fixed #public-nav
     regardless of hero height -- 12% of a tall hero landed above the navbar's
     bottom edge, so the fixed navbar (z-index:1000) drew over the logo. */
  top: calc(72px + 24px);
  width: clamp(72px, 9vw, 120px);
  height: clamp(72px, 9vw, 120px);
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 22px rgba(150, 70, 20, 0.18);
  z-index: 1;
}
.hero-corner-logo.left {
  left: 8%;
}
.hero-corner-logo.right {
  right: 8%;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--navy);
  border: 1px solid rgba(255, 112, 67, 0.2);
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(255, 112, 67, 0.08);
}
.hero-title {
  font-family: "Fraunces", serif;
  font-size: 4.25rem;
  font-weight: 800;
  color: var(--gray-800);
  line-height: 0.98;
  margin-bottom: 22px;
  text-shadow: none;
}
.hero-highlight {
  color: #994b0d;
}
.hero-tagline {
  font-size: 1.06rem;
  color: var(--gray-700);
  margin-bottom: 32px;
  line-height: 1.85;
  max-width: 640px;
}
.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.hero-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 112, 67, 0.18);
  color: var(--gray-700);
  font-size: 0.78rem;
  font-weight: 700;
}
.hero-system-panel {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.88),
    rgba(226, 232, 240, 0.76)
  );
  border: 1px solid rgba(255, 112, 67, 0.16);
  border-radius: 26px;
  padding: 24px;
  backdrop-filter: blur(16px);
  box-shadow: 0 26px 60px rgba(255, 112, 67, 0.12);
}
.hero-panel-head {
  margin-bottom: 16px;
}
.hero-panel-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 8px;
}
.hero-panel-head strong {
  display: block;
  color: var(--gray-800);
  font-size: 1.28rem;
  line-height: 1.35;
}
.hero-tier-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 112, 67, 0.14);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 14px;
}
.hero-tier-card.accent {
  background: rgba(255, 112, 67, 0.08);
  border-color: rgba(255, 112, 67, 0.22);
}
.hero-tier-index {
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 10px;
}
.hero-tier-card h3 {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.hero-tier-card p {
  color: var(--gray-600);
  font-size: 0.86rem;
  line-height: 1.7;
}
.hero-signal-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.hero-signal-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--gray-700);
  font-size: 0.84rem;
  line-height: 1.6;
}
.hero-signal-list i {
  color: var(--color-accent-text);
  margin-top: 3px;
}
.hero-logos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 50px;
  width: 100%;
  padding: 20px;
}
.hero-logo-item {
  height: 180px;
  width: auto;
  object-fit: contain;
  cursor: default;
  filter: drop-shadow(0 12px 28px rgba(255, 112, 67, 0.12));
  transition: transform 0.3s ease;
}
.hero-logo-item:hover {
  transform: scale(1.05);
}
.hero-logo-item:nth-child(2) {
  height: 240px;
}

/* =============== SERVICE CARDS =============== */
.section {
  padding: 80px 0;
  background: transparent;
}
.section-title {
  font-family: "Fraunces", serif;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--gray-800);
  margin-bottom: 10px;
  text-shadow: none;
}
.section-subtitle {
  text-align: center;
  color: var(--gray-600);
  opacity: 1;
  margin-bottom: 48px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}
.service-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 36px 28px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: var(--transition);
  cursor: pointer;
  text-align: left;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(255, 112, 67, 0.14);
  border-color: rgba(255, 112, 67, 0.28);
  background: rgba(255, 255, 255, 0.96);
}
.nav-item-sub-dropdown:hover .sub-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.sub-dropdown-content a {
  padding-left: 20px !important;
}
.sub-dropdown-content a:hover {
  padding-left: 24px !important;
}

/* Service Interactive Hover System (Landing Page Cards) */
.service-card-main {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-hover-actions {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9) translateY(10px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

.service-interactive {
  cursor: default !important;
}

.service-interactive:hover .service-hover-actions {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}

.service-interactive:hover .service-card-main {
  opacity: 0.2;
  transform: scale(0.94);
  filter: blur(2px);
}

.service-hover-actions .btn {
  width: 100%;
  max-width: 180px;
  justify-content: center;
  animation: slideInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.service-hover-actions .btn:nth-child(2) {
  animation-delay: 0.1s;
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.service-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 20px;
  box-shadow: var(--shadow);
}
.service-icon.patent {
  background: linear-gradient(135deg, #e66b3f, #dbe2ec);
  color: var(--color-on-primary);
}
.service-icon.trademark {
  background: linear-gradient(135deg, var(--color-warning), #fef3c7);
  color: var(--color-warning-text);
}

.service-icon.copyright {
  background: linear-gradient(135deg, var(--green), var(--green-bg));
  color: var(--color-success-text);
}
.service-icon.utility {
  background: linear-gradient(135deg, var(--indigo), var(--indigo-bg));
  color: var(--color-info-text);
}
.service-icon.industrial {
  background: linear-gradient(135deg, var(--pink), var(--pink-bg));
  color: #9d174d;
}
.service-card h3 {
  font-family: "Fraunces", serif;
  font-size: 1.38rem;
  font-weight: 800;
  color: var(--gray-800);
  margin-bottom: 16px;
}
.service-card p {
  color: var(--gray-600);
  font-size: 0.92rem;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.75;
}
.service-link {
  color: var(--navy-dark);
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
}
.service-card:hover .service-link {
  border-color: var(--navy-dark);
}

/* =============== STATS BANNER =============== */
.stats-banner {
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(14px);
  padding: 60px 0;
  border-top: 1px solid rgba(255, 112, 67, 0.14);
  border-bottom: 1px solid rgba(255, 112, 67, 0.14);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-item {
  padding: 24px 18px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 112, 67, 0.16);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.stat-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  border-color: rgba(255, 112, 67, 0.32);
}
.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 12px;
}
.stat-icon--blue {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}
.stat-icon--green {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}
.stat-icon--coral {
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
}
.stat-icon--gold {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
}
.stat-number {
  font-family: "Manrope", "Inter", -apple-system, sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.1;
  text-shadow: none;
}
.stat-label {
  color: var(--gray-600);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.35;
}
/* Heading shared by the landing stat bands (Filing Records, Website Visitors). */
.stats-section__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 24px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
}

/* =============== WEBSITE VISITORS =============== */
/* Same band treatment as .stats-banner above it. Without its own background
   this section is transparent, so the page's peach gradient shows through and
   the two read as mismatched stripes instead of one set of stat bands. */
.visitor-stats {
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(14px);
  padding: 60px 0;
  border-bottom: 1px solid rgba(255, 112, 67, 0.14);
}
.visitor-stats__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  text-align: center;
}
/* Five figures across leave less room than the four-up banner above, and
   Total Visits can run to seven digits, so the numerals run smaller here. */
.visitor-stats__grid .stat-number {
  font-size: 2rem;
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .visitor-stats__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .visitor-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Five items in two columns would strand the last one on its own half-row. */
  .visitor-stats__total {
    grid-column: 1 / -1;
  }
}

/* =============== FOOTER =============== */
.landing-footer {
  background: linear-gradient(
    180deg,
    rgba(255, 250, 248, 0.75),
    rgba(252, 229, 218, 0.95)
  );
  color: var(--gray-600);
  padding: 60px 0 0;
  border-top: 1px solid rgba(255, 112, 67, 0.16);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.footer-brand :is(h3, h4) {
  color: var(--navy);
  font-size: 1.1rem;
}
.footer-brand p {
  color: var(--color-accent-text);
  font-size: 0.8rem;
}
.footer-desc {
  font-size: 0.85rem;
  line-height: 1.7;
}
.footer-col :is(h3, h4) {
  color: var(--navy);
  margin-bottom: 16px;
  font-size: 1rem;
}
.footer-col ul {
  list-style: none;
}
.footer-col li {
  margin-bottom: 8px;
}
.footer-col a {
  font-size: 0.9rem;
  transition: var(--transition);
  /* Measured at 19px tall in a real browser, under the WCAG 2.5.8 (AA)
     minimum of 24x24. These are stacked navigation links, not links inside a
     sentence, so the inline exemption does not cover them. inline-flex plus
     min-height gives the anchor a real box to be tapped; the negative margin
     keeps the visual rhythm of the list unchanged now that each row is
     taller. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.footer-col li:last-child {
  margin-bottom: 0;
}
.footer-col a:hover {
  color: var(--color-accent-text);
}
.footer-col p {
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.footer-col p i {
  color: var(--color-accent-text);
  margin-right: 8px;
  width: 16px;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 112, 67, 0.16);
  text-align: center;
  padding: 20px 0;
  font-size: 0.8rem;
}

/* =============== LOGIN =============== */
.login-wrapper {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Calm neutral canvas with a single brand accent band at the top;
     the saturated coral wall undermined trust at the login moment. */
  background: var(--canvas);
  border-top: 4px solid var(--brand);
  padding: 24px;
  overflow: hidden;
}
.login-card {
  border: 1px solid var(--line);
}
/* Authentication pages (login / sign-up / password recovery) intentionally
   carry NO decorative background animation: the floating circles used to
   paint over the submit buttons. The markup was removed from index.html; this
   rule is the safety net so a stray .hero-bg-shapes node can never re-cover an
   auth form, and the card is given an explicit stacking context regardless. */
#page-login .hero-bg-shapes,
#page-signup .hero-bg-shapes,
#page-forgot-password .hero-bg-shapes,
#page-reset-password .hero-bg-shapes {
  display: none !important;
}
.login-card {
  position: relative;
  z-index: 2;
}
.login-card {
  background: white;
  padding: 48px 40px;
  border-radius: var(--radius);
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-xl);
}
.signup-card-wizard {
  max-width: 580px;
}
.role-selection-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}
.role-option-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
.role-option-card:hover {
  border-color: var(--gold);
  background: rgba(255, 112, 67, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.role-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 112, 67, 0.1);
  color: var(--color-accent-text);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.role-info h4 {
  color: var(--navy);
  margin-bottom: 4px;
  font-size: 1rem;
}
.role-info p {
  color: var(--gray-500);
  font-size: 0.85rem;
  line-height: 1.4;
}
.btn-step-back {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--gray-500);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 20px;
  padding: 0;
  cursor: pointer;
}
.btn-step-back:hover {
  color: var(--navy);
}
.login-header {
  text-align: center;
  margin-bottom: 32px;
}
.login-header .brand-icon {
  margin: 0 auto 16px;
}
.login-header h2 {
  font-size: 1.5rem;
  color: var(--navy);
}
.login-header p {
  color: var(--gray-500);
  font-size: 0.9rem;
}
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gray-700);
}
.input-icon {
  position: relative;
}
.input-icon i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: 0.9rem;
}
.input-icon input,
.input-icon select {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  transition: var(--transition);
  background: var(--gray-50);
}
.input-icon.password-field input {
  padding-right: 46px;
}
.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.password-toggle:hover,
.password-toggle:focus {
  color: var(--navy);
  background: rgba(15, 23, 42, 0.06);
}
.input-icon .password-toggle i {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  color: currentColor;
  font-size: 0.9rem;
}
.input-icon input:focus,
.input-icon select:focus {
  outline: none;
  border-color: var(--gold);
  background: white;
  box-shadow: 0 0 0 3px rgba(255, 112, 67, 0.15);
}
input:not(.input-icon input),
select:not(.input-icon select),
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  transition: var(--transition);
  background: var(--gray-50);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: white;
  box-shadow: 0 0 0 3px rgba(255, 112, 67, 0.15);
}
textarea {
  min-height: 100px;
  resize: vertical;
}
.error-msg {
  color: var(--red);
  font-size: 0.8rem;
  margin-top: 4px;
  display: none;
}
.error-msg.show {
  display: block;
}
/* Sign-up "Password must contain" checklist. No box: heading centred, lines
   coloured by state -- green check when met, red cross once they're typing and
   it isn't. */
.password-checklist {
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--gray-500);
}
.password-checklist__title {
  display: block;
  margin-bottom: 6px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
}
.password-checklist ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: max-content;
  max-width: 100%;
  display: grid;
  gap: 4px;
}
.password-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.password-checklist li strong {
  font-weight: 800;
}
.password-checklist li i {
  width: 16px;
  text-align: center;
  font-size: 0.95rem;
}
.password-checklist.active li {
  color: var(--color-error-text);
}
.password-checklist.active li.met {
  color: var(--color-success-text);
}
.input-error {
  border-color: var(--red) !important;
}
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 0.85rem;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-600);
  cursor: pointer;
}
.forgot-link {
  color: var(--color-accent-text);
  font-weight: 600;
}
.demo-role-selector {
  background: var(--gray-50);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 24px;
  text-align: center;
}
.demo-role-selector label {
  font-size: 0.8rem;
  color: var(--gray-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  display: block;
}
.role-options {
  display: flex;
  gap: 8px;
}
.role-btn {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--gray-200);
  background: white;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gray-500);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.role-btn.active {
  border-color: var(--gold);
  background: rgba(255, 112, 67, 0.08);
  color: var(--color-accent-text);
}
.login-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 0.85rem;
  color: var(--gray-500);
}

.login-footer a {
  color: var(--color-accent-text);
  font-weight: 600;
}
.login-otp-panel {
  display: grid;
  gap: 16px;
}
.login-otp-copy {
  color: var(--gray-600);
  font-size: 0.9rem;
  line-height: 1.55;
  text-align: center;
  margin: -6px 0 4px;
}
.login-otp-demo-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed rgba(255, 112, 67, 0.42);
  border-radius: 10px;
  background: rgba(255, 112, 67, 0.08);
  color: var(--color-accent-text);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
}
.login-otp-demo-note i {
  margin-top: 2px;
}
.login-otp-actions {
  display: grid;
  gap: 10px;
}
.login-otp-actions .btn {
  justify-content: center;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--gray-400) !important;
  font-weight: 500 !important;
}

@media (max-width: 640px) {
  body.standalone-login-mode #public-nav {
    padding: 16px;
  }

  body.standalone-login-mode .login-wrapper {
    padding: 16px;
  }

  body.standalone-login-mode .login-card {
    padding: 28px 22px;
    max-width: 100%;
  }

  body.standalone-login-mode .login-header {
    margin-bottom: 24px;
  }
}

@media (max-height: 640px) {
  body.standalone-login-mode,
  body.standalone-login-mode #app,
  body.standalone-login-mode #page-login.active,
  body.standalone-login-mode #page-signup.active,
  body.standalone-login-mode #page-forgot-password.active,
  body.standalone-login-mode #page-reset-password.active,
  body.standalone-login-mode .login-wrapper {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
  }

  body.standalone-login-mode .login-wrapper {
    align-items: flex-start;
  }
}

/* =============== MFA OTP INPUT BOXES =============== */
.otp-box {
  width: 52px;
  height: 60px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  outline: none;
  transition: all 0.2s ease;
  background: var(--gray-50);
  font-family: "Inter", sans-serif;
}
.otp-box:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(255, 112, 67, 0.15);
  background: white;
}

/* =============== SUBMISSION TRACKING TIMELINE =============== */
.tracking-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 40px;
}
.tracking-step {
  position: relative;
  padding: 16px 0 16px 24px;
  border-left: 3px solid var(--gray-200);
}
.tracking-step:last-child {
  border-left-color: transparent;
}
.tracking-step.completed {
  border-left-color: var(--green);
}
.tracking-step.active {
  border-left-color: var(--gold);
}
.tracking-dot {
  position: absolute;
  left: -14px;
  top: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: white;
}
.tracking-step.completed .tracking-dot {
  background: var(--green);
}
.tracking-step.active .tracking-dot {
  background: var(--gold);
  animation: pulse 2s infinite;
}
.tracking-step.pending .tracking-dot {
  background: var(--gray-300);
}
.tracking-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
}
.tracking-step.pending .tracking-label {
  color: var(--gray-400);
}
.tracking-date {
  font-size: 0.8rem;
  color: var(--gray-400);
  margin-top: 2px;
}
@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 112, 67, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 112, 67, 0);
  }
}

/* =============== FROZEN BADGE =============== */
.badge-frozen {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.1),
    rgba(139, 92, 246, 0.1)
  );
  color: var(--color-info-text);
  border: 1px solid rgba(99, 102, 241, 0.2);
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-manual-review {
  background: rgba(245, 158, 11, 0.08);
  color: var(--color-warning-text);
  border: 1px solid rgba(245, 158, 11, 0.2);
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-pending {
  background: var(--yellow-bg);
  color: var(--color-warning-text);
  border: 1px solid rgba(245, 158, 11, 0.2);
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-draft {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-rejected {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.2);
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* =============== DASHBOARD TOP BAR =============== */
#dashboard-topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  height: var(--topbar-h);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 112, 67, 0.14);
  box-shadow: 0 10px 30px rgba(255, 112, 67, 0.06);
  display: none;
  z-index: 9500;
  padding: 0 24px;
  transition: var(--transition);
}
#dashboard-topbar.active {
  display: flex;
  animation: slideUpFade 0.4s ease-out;
}
.topbar-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}
.topbar-left-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.sidebar-toggle {
  background: none;
  font-size: 1.2rem;
  color: var(--gray-600);
  padding: 8px;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.topbar-brand:hover {
  opacity: 0.85;
}
.topbar-brand .brand-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar-brand .brand-name {
  font-weight: 700;
  color: var(--navy);
  font-size: 1.05rem;
  letter-spacing: -0.2px;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

/* Status Hub Bar (Tab Style above Table) */
.status-hub-container {
  background: white;
  border-bottom: 1px solid var(--gray-100);
  margin: 0 0 24px 0;
  padding: 0 4px;
  z-index: 5;
}
.status-hub-bar {
  display: flex !important;
  flex-direction: row !important;
  gap: 24px;
}
.applicant-request-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ip-funding-panel form,
.linked-service-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}
.external-funding-fields[hidden] {
  display: none;
}
.ip-funding-panel label,
.linked-service-form label {
  display: block;
}
.ip-funding-panel textarea,
.linked-service-form textarea {
  display: block;
  width: 100%;
  min-height: 90px;
  padding: 10px;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  font: inherit;
}
.linked-service-records {
  max-height: 55vh;
  overflow-y: auto;
}
#userSubmissionStatusBar .status-tab {
  border: 0;
  background: transparent;
  font-family: inherit;
}
#userSubmissionStatusBar .status-tab:focus-visible,
.applicant-request-types button:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.status-tab {
  padding: 12px 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gray-400);
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.status-tab:hover {
  color: var(--color-accent-text);
}
.status-tab.active {
  color: var(--color-accent-text);
}
.status-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold);
  border-radius: 3px 3px 0 0;
}
.tab-count {
  font-size: 0.75rem;
  background: var(--gray-100);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
  font-weight: 700;
  color: var(--gray-500);
}
.status-tab.active .tab-count {
  background: var(--gold-light);
  color: var(--color-accent-text);
}

/* Canva-Inspired Sidebar (Applicant Mode) */
.sidebar.canva-mode {
  width: 84px;
  background: #FAFAFC !important;
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  padding: 24px 0 20px 0;
  overflow: visible;
  align-items: center;
}

.sidebar.canva-mode .sidebar-header {
  padding: 0;
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  border-bottom: none !important;
  width: 100%;
}

.sidebar.canva-mode .sidebar-header .sidebar-brand {
  justify-content: center;
  gap: 0;
}

.sidebar.canva-mode .sidebar-brand .brand-name {
  display: none;
}

.sidebar.canva-mode .brand-icon.small {
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-primary);
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-radius: 12px;
}

.sidebar.canva-mode .sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  padding: 0 4px;
  width: 100%;
  align-items: center;
}

.canva-primary-section {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.canva-primary-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 12px rgba(255, 112, 67, 0.3);
  transition: all 0.2s ease-out;
}

.canva-nav-item.primary .canva-nav-text {
  color: var(--color-accent-text);
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 4px;
}

.canva-nav-item.primary:hover .canva-primary-btn {
  transform: scale(1.05);
  background: var(--gold-dark);
}

.canva-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--gray-500);
  transition: all 0.2s var(--transition);
  position: relative;
  width: 100%;
  background: transparent;
  cursor: pointer;
}

.canva-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: var(--gray-500);
  font-size: 1.25rem;
}

.canva-profile-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1e293b;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  margin-bottom: 2px;
}

.canva-nav-text {
  font-size: 0.72rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--gray-500);
  transition: inherit;
}

.sidebar.canva-mode .sidebar-nav .canva-nav-item:hover .canva-icon-box {
  background: rgba(255, 112, 67, 0.08); /* gold tint */
}

.sidebar.canva-mode .sidebar-nav .canva-nav-item.active {
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar.canva-mode .sidebar-nav .canva-nav-item.active .canva-icon-box {
  background: rgba(255, 112, 67, 0.12) !important;
  color: var(--color-accent-text) !important;
}

.sidebar.canva-mode .sidebar-nav .canva-nav-item.active .canva-nav-text {
  color: var(--color-accent-text) !important;
  font-weight: 700;
}

.canva-footer-section {
  border-top: none;
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  align-items: center;
}

/* Hide original sidebar elements in Canva mode */
.sidebar.canva-mode .sidebar-footer {
  display: none;
}

/* ================== TOP NAV LAYOUT (Applicant) ================== */
body.top-nav-layout #sidebar {
  display: none !important;
}

body.top-nav-layout #dashboard-topbar {
  left: 0 !important; /* Full width topbar */
  background: white; /* Give it a solid background since sidebar is gone */
  border-bottom: 1px solid rgba(255, 112, 67, 0.14);
}

body.top-nav-layout #main-content {
  margin-left: 0 !important; /* Take up entire screen width */
}

body.top-nav-layout .sidebar-toggle {
  display: none !important; /* No toggle if no sidebar */
}

body.top-nav-layout .topbar-right {
  margin-left: 0;
}

body.top-nav-layout .topbar-brand, 
body.top-nav-layout #dashboard-top-nav {
  display: flex !important; /* Reveal brand and top nav in topbar */
}

body.top-nav-layout .topbar-user .user-name {
  display: none !important;
}

/* Styling the Top Nav Links */
#dashboard-top-nav .top-nav-link {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--gray-600);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  padding: 8px 12px;
  border-radius: 8px;
}

#dashboard-top-nav .top-nav-link:hover {
  color: var(--color-accent-text);
  background: rgba(255, 112, 67, 0.08); /* slight gold tint */
}

#dashboard-top-nav .top-nav-link.active {
  color: var(--color-accent-text);
  font-weight: 700;
  background: rgba(255, 112, 67, 0.12);
}

/* Optional primary button styling in top nav */
.dashboard-hero {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  border-radius: 20px;
  padding: 32px 40px;
  color: white;
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
}

.hero-bg-accent {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 186, 173, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.dashboard-hero h1 {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.dashboard-hero p {
  font-size: 0.95rem;
  opacity: 0.9;
  max-width: 600px;
  line-height: 1.5;
}

/* Applicant dashboard top row: action card + status stacked on the left,
   News & Announcements filling the space to the right instead of being
   left blank next to a short stack. */
.dashboard-top-grid {
  display: grid;
  grid-template-columns: minmax(280px, 620px) 1fr;
  gap: 24px;
  /* start, not stretch: News & Announcements can run much taller than the
     left column once it has real content, and stretching forced the
     Register New IP card to grow with it -- each column should size to its
     own content instead. */
  align-items: start;
  margin-bottom: 48px;
}
.dashboard-top-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Quick Actions Grid */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}

/* Contextual Back Navigation */
.back-nav-wrap {
  margin-bottom: 8px;
  display: inline-block;
}

.back-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-500);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.back-nav-link:hover {
  color: var(--navy);
  background: white;
  border-color: var(--gold-dark);
  transform: translateX(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.back-nav-link i {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.back-nav-link:hover i {
  transform: translateX(-2px);
}

.action-card {
  background: var(--gradient-primary);
  padding: 24px;
  border-radius: 16px;
  border: none;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 24px -8px rgba(255, 112, 67, 0.45);
  /* .quick-actions-grid's auto-fit columns stretch a lone card (e.g. just
     "Register New IP") across the full row width, leaving a huge empty gap
     before the arrow. Capping the card itself keeps it a normal size
     regardless of how many siblings share the grid. */
  max-width: 480px;
}

.action-card:hover {
  transform: translateY(-5px);
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  box-shadow: 0 20px 40px -8px rgba(255, 112, 67, 0.55);
}

.action-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  /* Coral on the white chip is 2.50:1 -- below the 3:1 icon minimum. */
  color: var(--color-secondary);
  transition: inherit;
}

.action-card:hover .action-card-icon {
  background: white;
}

.action-card-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  /* White on the coral gradient is 2.50-3.21:1; this is 6.97-5.42:1. */
  color: var(--color-on-primary);
  margin-bottom: 6px;
}

.action-card-content p {
  font-size: 0.88rem;
  color: var(--color-on-primary);
  line-height: 1.5;
}

.action-card-arrow {
  margin-left: auto;
  color: var(--color-on-primary);
  transition: inherit;
}

.action-card:hover .action-card-arrow {
  color: var(--color-on-primary);
  transform: translateX(4px);
}
.topbar-user {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background 0.2s;
}
.topbar-user:hover {
  background: var(--gray-100);
}
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
.user-avatar.small {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}
.topbar-user .user-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gray-700);
}
.btn-logout {
  background: none;
  color: var(--gray-400);
  font-size: 1.1rem;
  padding: 8px;
  transition: var(--transition);
}
.btn-logout:hover {
  color: var(--red);
}

/* =============== SIDEBAR =============== */
#dashboard-layout {
  display: none;
  padding-top: var(--topbar-h);
}
#dashboard-layout.active {
  display: flex;
  min-height: 100vh;
}

/* Fail-safe: hide hamburger menu for applicants via CSS */
body.compact-layout .sidebar-toggle {
  display: none !important;
}
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: linear-gradient(180deg, rgba(255, 250, 248, 0.98) 0%, rgba(252, 229, 218, 0.98) 100%);
  border-right: 1px solid rgba(255, 112, 67, 0.16);
  box-shadow: none;
  color: var(--gray-800);
  z-index: 950;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar.collapsed {
  width: var(--sidebar-collapsed-w);
}
.sidebar.collapsed .brand-name,
.sidebar.collapsed .user-info,
.sidebar.collapsed .nav-text {
  display: none;
}
.sidebar.collapsed .sidebar-nav {
  padding-inline: 10px;
}
.sidebar.collapsed .sidebar-nav a,
.sidebar.collapsed .sidebar-nav-parent {
  justify-content: center;
  padding: 12px;
}
.sidebar.collapsed .sidebar-subnav,
.sidebar.collapsed .nav-chevron,
.sidebar.collapsed .sidebar-nav-badge {
  display: none;
}
/* =============== RESPONSIVE & MOBILE POLISH =============== */
@media (max-width: 992px) {
  /* These three rules previously targeted .dashboard-topbar / .main-content,
     which match nothing -- the markup uses id="dashboard-topbar" and
     id="main-content". Corrected to ids so the tablet layout actually applies.
     The old `padding: 80px ...` top offset is deliberately NOT restored:
     #dashboard-layout already contributes padding-top: var(--topbar-h), so
     reinstating it verbatim would double the gap under the topbar. */
  #dashboard-topbar {
    left: 0 !important;
    width: 100% !important;
  }
  #main-content {
    margin-left: 0 !important;
    padding: 12px 16px 40px !important;
  }
  #dashboard-top-nav {
    overflow-x: auto;
    padding: 10px 16px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .top-nav-link {
    white-space: nowrap;
  }

  .profile-layout {
    grid-template-columns: 1fr !important;
  }
  .profile-side-col {
    order: 2;
  }
  .profile-main-col {
    order: 1;
  }
}

@media (max-width: 768px) {
  .dashboard-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .quick-actions-grid {
    grid-template-columns: 1fr !important;
  }
  .dashboard-top-grid {
    grid-template-columns: 1fr !important;
  }
  .stat-card {
    padding: 16px !important;
    gap: 12px !important;
  }
  .stat-card i {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
  }
  .dashboard-hero h1 {
    font-size: 1.5rem !important;
  }
  
  .marketplace-layout {
    grid-template-columns: 1fr !important;
  }
  .filter-panel {
    display: none; /* Hide sidebar filters on mobile, could use a modal instead */
  }
  
  .user-controls-bar {
    flex-direction: column;
    align-items: stretch !important;
  }
  .user-controls-bar > div {
    width: 100%;
  }
}

/* Marketplace Interest Styles */
.interest-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold-light);
  color: var(--color-accent-text);
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Submission Method Selection Styles */
.method-card:hover {
    border-color: var(--gold) !important;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.method-card:hover .method-tag {
    transform: scale(1.05);
}

.method-card i {
    transition: transform 0.3s ease;
}

.method-card:hover i {
    transform: scale(1.1) rotate(5deg);
}

.method-selection-grid {
    animation: fadeIn 0.5s ease;
}
.interest-btn {
  background: var(--navy);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.interest-btn:hover {
  background: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 112, 67, 0.3);
}
.interest-btn.active {
  background: var(--green);
}

.submission-progress-container {
  background: var(--white);
  padding: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  margin-bottom: 24px;
}
.progress-steps-row {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-top: 20px;
}
.progress-steps-row::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gray-100);
  z-index: 1;
}
.progress-step-item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 80px;
}
.step-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  transition: all 0.3s ease;
  border: 4px solid var(--white);
}
.progress-step-item.completed .step-circle {
  background: var(--green);
}
.progress-step-item.active .step-circle {
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-light);
}
.step-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-400);
  text-align: center;
  white-space: nowrap;
}
.progress-step-item.active .step-label,
.progress-step-item.completed .step-label {
  color: var(--navy);
}

.next-step-card {
  background: linear-gradient(135deg, #fff, #fff9f6);
  border: 1px solid var(--gold-light);
  border-left: 5px solid var(--gold);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 32px;
  box-shadow: 0 10px 20px rgba(255, 112, 67, 0.05);
}
.next-step-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold-light);
  color: var(--color-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.floating-help-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.floating-help-btn:hover {
  transform: scale(1.1) rotate(5deg);
  background: var(--navy-dark);
}
.floating-help-btn::after {
  content: "Need Help?";
  position: absolute;
  right: 70px;
  background: var(--navy);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s ease;
  pointer-events: none;
}
.floating-help-btn:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.activity-item {
  display: flex;
  gap: 16px;
  position: relative;
}
.activity-item::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: -20px;
  width: 2px;
  background: var(--gray-100);
}
.activity-item:last-child::before {
  display: none;
}
.activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--gray-500);
  z-index: 2;
  flex-shrink: 0;
}
.activity-item.success .activity-icon { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.activity-item.warning .activity-icon { background: var(--yellow-bg); color: var(--yellow); border-color: var(--yellow); }
.activity-item.info .activity-icon { background: var(--blue-bg); color: var(--blue); border-color: var(--blue); }

.activity-content h4 { font-size: 0.95rem; margin-bottom: 2px; color: var(--navy); }
.activity-content p { font-size: 0.85rem; color: var(--gray-500); line-height: 1.4; }
.activity-time { font-size: 0.75rem; color: var(--gray-400); margin-top: 4px; font-weight: 600; }

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 112, 67, 0.14);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-brand .brand-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
}
.sidebar-nav {
  flex: 1;
  padding: 18px 12px;
}
.sidebar-nav a,
.sidebar-nav-parent {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--gray-700);
  font-size: 0.88rem;
  font-weight: 600;
  transition: var(--transition);
  margin-bottom: 6px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.sidebar-nav a:hover,
.sidebar-nav-parent:hover {
  background: rgba(255, 112, 67, 0.11);
  border-color: rgba(255, 112, 67, 0.16);
  color: var(--navy);
  transform: translateX(2px);
}
.sidebar-nav a.active {
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  border: 1px solid var(--color-primary-dark);
  box-shadow: 0 8px 20px rgba(198, 77, 58, 0.2);
}
.sidebar-nav a.active i {
  color: currentColor;
}
.sidebar-nav a i,
.sidebar-nav-parent i {
  width: 20px;
  text-align: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.sidebar-nav-group {
  margin-bottom: 6px;
}
.sidebar-nav-group.active .sidebar-nav-parent {
  background: rgba(255, 112, 67, 0.13);
  border-color: rgba(255, 112, 67, 0.22);
  color: var(--navy);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.sidebar-nav-group.open .sidebar-nav-parent {
  margin-bottom: 8px;
}
.sidebar-subnav {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: max-height 0.26s ease, opacity 0.2s ease, transform 0.24s ease;
  padding-left: 13px;
  border-left: 1px solid rgba(255, 112, 67, 0.22);
  margin-left: 23px;
}
.sidebar-nav-group.open .sidebar-subnav {
  max-height: 180px;
  opacity: 1;
  transform: translateY(0);
  margin-bottom: 6px;
}
.sidebar-subnav a.sidebar-subnav-link {
  position: relative;
  min-height: 38px;
  padding: 9px 12px;
  margin-bottom: 4px;
  border-radius: 10px;
  font-size: 0.8rem;
  color: #8f6a57;
}
.sidebar-subnav a.sidebar-subnav-link::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 112, 67, 0.34);
  position: absolute;
  left: -17px;
  top: 50%;
  transform: translateY(-50%);
}
.sidebar-subnav a.sidebar-subnav-link.active {
  background: #fff7ed;
  color: #334155;
  border-color: rgba(255, 112, 67, 0.24);
  box-shadow: 0 10px 24px rgba(255, 112, 67, 0.13);
}
.sidebar-subnav a.sidebar-subnav-link.active::before {
  width: 8px;
  height: 8px;
  background: var(--gold-dark);
  box-shadow: 0 0 0 5px rgba(255, 112, 67, 0.12);
}
.nav-chevron {
  margin-left: auto;
  font-size: 0.72rem !important;
  transition: transform 0.24s ease;
}
.sidebar-nav-group.open .nav-chevron {
  transform: rotate(180deg);
}
.sidebar-nav-badge,
.nav-text .chat-nav-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--red);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 800;
  margin-left: 6px;
}
.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 112, 67, 0.14);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-user .user-avatar {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--color-on-primary);
}
.user-info {
  display: flex;
  flex-direction: column;
}
.user-info .user-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--navy);
}
.user-info .user-role {
  font-size: 0.7rem;
  color: var(--gray-600);
}

/* =============== MAIN CONTENT =============== */
#main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  /* A flex item defaults to min-width:auto, so #main-content refuses to shrink
     below the intrinsic width of its widest descendant -- on a 390px phone it
     measured 932px, and body{overflow-x:hidden} silently clipped the excess.
     That is the truncated text seen across the applicant portal on mobile.
     min-width:0 lets it match the viewport so children wrap or scroll on
     their own terms. No effect on desktop, where content already fits. */
  min-width: 0;
  padding: 15px;
  transition: var(--transition);
  min-height: calc(100vh - var(--topbar-h));
}
.sidebar.collapsed ~ #main-content {
  margin-left: var(--sidebar-collapsed-w);
}
.page-header {
  margin-bottom: 12px;
}
.page-header h1 {
  /* In-app hierarchy comes from Inter weight/size; the serif is
     reserved for public landing pages. */
  font-family: "Inter", "Manrope", system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.page-header p {
  color: var(--gray-500);
  margin-top: 4px;
}

/* =============== DASHBOARD CARDS =============== */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
/* Five IP service summaries are peers on the Admin marketplace page. Keep
   them together on normal desktop widths, then let the grid reflow naturally. */
.marketplace-stat-cards {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.marketplace-stat-cards .stat-card {
  min-width: 0;
  padding: 20px;
}
.marketplace-stat-cards .stat-card-info {
  min-width: 0;
}
.marketplace-stat-cards .stat-card-info p {
  overflow-wrap: anywhere;
}
@media (max-width: 1100px) {
  .marketplace-stat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .marketplace-stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .marketplace-stat-cards { grid-template-columns: 1fr; }
}
.stat-card {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 18px 36px rgba(255, 112, 67, 0.08);
  border: 1px solid rgba(255, 112, 67, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-left: 4px solid transparent;
}
.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 42px rgba(255, 112, 67, 0.12);
  border-color: rgba(255, 112, 67, 0.22);
  border-left-color: var(--accent, var(--gold));
}
.stat-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.stat-card-icon.blue {
  background: var(--blue-bg);
  color: var(--blue);
}
.stat-card-icon.yellow {
  background: var(--yellow-bg);
  color: var(--yellow);
}
.stat-card-icon.green {
  background: var(--green-bg);
  color: var(--green);
}
.stat-card-icon.red {
  background: var(--red-bg);
  color: var(--red);
}
.stat-card-info h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy);
}
.stat-card-info p {
  font-size: 0.8rem;
  color: var(--gray-500);
  font-weight: 500;
}

/* =============== DATA TABLE =============== */
.table-container {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(255, 112, 67, 0.08);
  border: 1px solid rgba(255, 112, 67, 0.1);
  overflow-x: auto;
  overflow-y: hidden;
  transition: all 0.4s ease;
}
.table-container:hover {
  box-shadow: 0 20px 48px rgba(255, 112, 67, 0.1);
}
.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  flex-wrap: wrap;
  gap: 12px;
}
.table-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
}
.table-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-btn {
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid var(--gray-200);
  background: white;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray-600);
  transition: var(--transition);
}
.filter-btn.active,
.filter-btn:hover {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
.filter-select {
  padding: 6px 12px;
  border-radius: 50px;
  border: 1px solid var(--gray-200);
  font-size: 0.8rem;
  background: white;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th {
  text-align: left;
  padding: 8px 16px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.data-table td {
  padding: 8px 16px;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}
.data-table tr:hover {
  background: var(--gray-50);
}
.data-table tr {
  transition: var(--transition);
}

/* =============== STATUS BADGES =============== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  word-break: keep-all !important;
}
.badge-pending {
  background: var(--yellow-bg);
  color: var(--color-warning-text);
}
.badge-approved {
  background: var(--green-bg);
  color: var(--color-success-text);
}
.badge-rejected {
  background: var(--red-bg);
  color: var(--color-error-text);
}

/* =============== MARKETPLACE SECTION =============== */
#marketplace-section {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(226, 232, 240, 0.76) 100%
  );
  border-top: 1px solid rgba(255, 112, 67, 0.14);
  border-bottom: 1px solid rgba(255, 112, 67, 0.14);
  padding: 100px 0;
}
#marketplace-section .section-title {
  color: var(--gray-800);
  text-shadow: none;
}
#marketplace-section .section-subtitle {
  color: var(--gray-600);
  opacity: 1;
}
.marketplace-public-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.marketplace-public-filters .search-box {
  flex: 1;
  min-width: 300px;
}
.marketplace-public-filters .filter-controls {
  display: flex;
  gap: 12px;
}
.marketplace-public-filters select {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--gray-200);
  background: white;
  color: var(--gray-700);
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.marketplace-public-filters select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(255, 112, 67, 0.1);
}

.badge-review {
  background: var(--blue-bg);
  color: var(--color-info-text);
}
/* "Nothing recorded yet" -- deliberately quieter than any state badge, so an
   unevaluated case never looks like it carries a verdict. */
.badge-muted {
  background: var(--gray-100);
  color: var(--gray-600);
}
.badge-patent {
  background: var(--blue-bg);
  color: var(--color-info-text);
}
.badge-trademark {
  background: #fef3c7;
  color: var(--color-warning-text);
  border: 1px solid #fde68a;
}

.badge-copyright {
  background: var(--green-bg);
  color: var(--color-success-text);
}
.badge-awaiting {
  background: var(--gray-200);
  color: var(--gray-700);
  border: 1px dashed var(--gray-400);
}
.action-btns {
  display: flex;
  gap: 6px;
}

/* =============== IP RECORDS SECURITY =============== */
.ip-records-security-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 10px;
  margin-bottom: 24px;
}
.ip-records-security-banner > i {
  color: var(--color-info-text);
  font-size: 1.1rem;
}
.ip-records-security-copy {
  flex: 1;
  min-width: 240px;
}
.ip-records-security-banner p {
  font-size: 0.85rem;
  color: var(--gray-600);
  margin: 0;
}
.ip-records-security-banner strong {
  color: var(--color-info-text);
}
.table-action-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-500);
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 640px) {
  .ip-records-security-banner {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =============== QUICK ACTIONS =============== */
.quick-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: white;
  border-radius: 16px;
  border: 1px solid var(--gray-200);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--navy);
  transition: var(--transition);
  box-shadow: 0 12px 24px rgba(255, 112, 67, 0.06);
}
.quick-action-btn:hover {
  border-color: rgba(255, 112, 67, 0.36);
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(255, 112, 67, 0.1);
}
.quick-action-btn i {
  font-size: 1.1rem;
  color: var(--color-accent-text);
}

/* =============== FILING HUB =============== */
.filing-hub-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}
.filing-hub-main,
.filing-hub-sidebar {
  min-width: 0;
}
/* The main column shares space with services; avoid the legacy five-lane row. */
.filing-hub-main .filing-hub-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
}
.filing-hub-main .filing-card {
  font: inherit;
  text-align: left;
}
.filing-hub-lane-title {
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.filing-hub-lane-description {
  color: var(--gray-500);
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 12px;
}
.filing-hub-lane-guidance {
  color: var(--color-accent-text);
  font-weight: 800;
}
.filing-hub-consultation {
  margin-top: 28px;
  padding: 24px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}
.filing-hub-consultation > div:last-child {
  flex: 1 1 200px;
  min-width: 0;
}
.filing-hub-sidebar {
  padding: 24px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}
.filing-hub-sidebar h2 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 1.3rem;
  font-weight: 800;
}
.filing-hub-services-intro {
  margin: 0 0 20px;
  color: var(--gray-600);
  font-size: 0.88rem;
  line-height: 1.6;
}
.filing-hub-services-list {
  display: grid;
  gap: 12px;
}
.filing-hub-service {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: white;
  color: var(--navy);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.filing-hub-service:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
}
.filing-hub-service:focus-visible,
.filing-hub-main .filing-card:focus-visible,
.filing-hub-fees:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
.filing-hub-service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--gold-light);
  color: var(--color-accent-text);
}
.filing-hub-service-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.filing-hub-service-badge {
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--gold-light);
  color: var(--color-accent-text);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.filing-hub-service-title {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.4;
}
.filing-hub-service-description {
  color: var(--gray-600);
  font-size: 0.8rem;
  line-height: 1.55;
}
.filing-hub-sidebar .filing-hub-fees {
  width: 100%;
  margin-top: 20px;
  gap: 8px;
  white-space: normal;
  line-height: 1.5;
}
@media (max-width: 992px) {
  .filing-hub-container {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 400px) {
  .filing-hub-sidebar {
    padding: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .filing-hub-service,
  .filing-hub-main .filing-card {
    transition: none;
  }
  .filing-hub-service:hover,
  .filing-hub-main .filing-card:hover {
    transform: none;
  }
}
.filing-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
  margin-top: 32px;
}
.filing-card {
  background: white;
  border-radius: 16px;
  border: 1px solid var(--gray-200);
  padding: 32px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.filing-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold);
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}
.filing-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gold);
  opacity: 0;
  transition: all 0.3s ease;
}
.filing-card:hover::before {
  opacity: 1;
}
.filing-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--gray-50);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}
.filing-card:hover .filing-card-icon {
  background: var(--gold-light);
  color: var(--color-accent-text);
}
.filing-badge-group {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
}
.filing-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-docs { background: #e0e7ff; color: var(--color-info-text); }
.badge-time { background: #fef3c7; color: var(--color-warning-text); }

/* =============== IP SERVICES HUB TABS =============== */
.ip-services-tab-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 24px 0 20px 0;
}
.ip-service-pill {
  background: white;
  color: var(--navy);
  border: 1.5px solid var(--gray-200);
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.ip-service-pill:hover {
  border-color: var(--gold);
  color: var(--color-accent-text);
  background: var(--gray-50);
  transform: translateY(-1px);
}
.ip-service-pill.active {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
  box-shadow: 0 4px 14px rgba(10, 25, 47, 0.18);
}
.ip-service-pill .ip-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  font-size: 0.74rem;
  font-weight: 800;
  background: var(--gray-100);
  color: var(--gray-700);
  transition: all 0.2s ease;
}
.ip-service-pill.active .ip-pill-count {
  background: var(--gold);
  color: #111827;
}

/* =============== FORM WIZARD =============== */
.wizard-container {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}
.wizard-progress {
  display: flex;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.wizard-step {
  flex: 1;
  padding: 16px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-400);
  position: relative;
  transition: var(--transition);
}
.wizard-step.active {
  color: var(--color-accent-text);
  background: white;
}
.wizard-step.completed {
  color: var(--green);
}
.wizard-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-500);
  font-size: 0.75rem;
  margin-right: 6px;
}
.wizard-step.active .step-num {
  background: var(--gold);
  color: var(--navy-dark);
}
.wizard-step.completed .step-num {
  background: var(--green);
  color: white;
}
.wizard-body {
  padding: 36px;
}
.wizard-footer {
  display: flex;
  justify-content: space-between;
  padding: 20px 36px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0;
}
.form-group {
  margin-bottom: 8px;
}
.form-group.full {
  grid-column: 1 / -1;
}
.upload-area {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  padding: 20px 12px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: var(--gray-50);
}
.upload-area:hover {
  border-color: var(--gold);
  background: rgba(255, 112, 67, 0.04);
}
.upload-area i {
  font-size: 2.5rem;
  color: var(--gray-400);
  margin-bottom: 12px;
}
.upload-area p {
  color: var(--gray-500);
  font-size: 0.9rem;
}
.upload-area .browse-text {
  color: var(--color-accent-text);
  font-weight: 600;
}
.review-section {
  margin-bottom: 24px;
}
.review-section h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-200);
}
.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.review-item {
  display: flex;
  flex-direction: column;
}
.review-item .label {
  font-size: 0.8rem;
  color: var(--gray-500);
}
.review-item .value {
  font-weight: 600;
  color: var(--gray-800);
}

/* =============== CONFIRMATION =============== */
.confirmation-screen {
  text-align: center;
  padding: 48px 24px;
}
.confirmation-screen .check-circle {
  width: 80px;
  height: 80px;
  background: var(--green-bg);
  color: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 24px;
}
.confirmation-screen h2 {
  color: var(--navy);
  margin-bottom: 8px;
}
.confirmation-screen .ref-number {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-accent-text);
  background: rgba(255, 112, 67, 0.1);
  padding: 8px 24px;
  border-radius: 50px;
  display: inline-block;
  margin: 12px 0 24px;
}

/* =============== PATENT FORM 100 FLOW =============== */
.patent-gform-shell {
  max-width: 1180px;
  margin: 0 auto;
}
.patent-gform-header {
  margin-bottom: 24px;
}
.patent-gform-header-bar {
  height: 16px;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(135deg, var(--gold), var(--navy));
}
.patent-gform-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.patent-gform-sidebar {
  position: sticky;
  top: 88px;
}
.patent-gform-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--gray-200);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 20px 44px rgba(255, 112, 67, 0.08);
  margin-bottom: 20px;
}
.patent-gform-card h1,
.patent-gform-card h2,
.patent-gform-card h3 {
  color: var(--navy);
  margin-bottom: 8px;
}
.patent-gform-card p {
  color: var(--gray-600);
}
.patent-gform-card--hero {
  border-radius: 0 0 24px 24px;
}
.patent-gform-card--sheet {
  padding: 22px;
}
.patent-gform-kicker,
.patent-gform-side-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 12px;
}
.patent-gform-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.patent-gform-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--gray-50);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
  font-size: 0.8rem;
  font-weight: 700;
}
.patent-progress-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--gray-100);
  overflow: hidden;
  margin: 14px 0 10px;
}
.patent-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  box-shadow: 0 0 20px rgba(255, 112, 67, 0.22);
}
.patent-step-strip {
  display: grid;
  grid-template-columns: repeat(var(--patent-step-count, 4), minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.patent-step-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--gray-200);
  color: var(--gray-500);
  min-width: 0;
  white-space: normal !important;
  word-break: normal !important;
}
.patent-step-chip__num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 0.85rem;
  font-weight: 800;
  flex-shrink: 0;
}
.patent-step-chip__label {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  min-width: 0;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word;
}
.patent-step-chip.active {
  border-color: rgba(255, 112, 67, 0.4);
  background: white;
  color: var(--navy);
  box-shadow: 0 14px 24px rgba(255, 112, 67, 0.08);
}
.patent-step-chip.active .patent-step-chip__num {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--color-on-primary);
}
.patent-step-chip.done {
  color: var(--navy);
}
.patent-step-chip.done .patent-step-chip__num {
  background: var(--green);
  color: white;
}
button.patent-step-chip {
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  width: 100%;
  border-width: 1.5px;
  transition: all 0.18s ease;
}
button.patent-step-chip:hover {
  background: #ffffff;
  border-color: var(--gray-400);
  transform: translateY(-1px);
}
button.patent-step-chip:active {
  transform: translateY(0);
}
button.patent-step-chip.active {
  border-color: var(--gold, #ea580c);
  background: #ffffff;
  color: var(--navy);
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.16);
}
button.patent-step-chip.active .patent-step-chip__num {
  background: var(--gold, #ea580c);
  color: #ffffff;
}
button.patent-step-chip.active .patent-step-chip__label {
  color: var(--navy);
  font-weight: 800;
}

.patent-step-chip__flag-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #dc2626;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: auto;
  line-height: 1.2;
}

button.patent-step-chip.has-flag:not(.active) {
  border-color: rgba(220, 38, 38, 0.45);
  background: #fef2f2;
}

button.patent-step-chip.has-flag:not(.active) .patent-step-chip__label {
  color: #991b1b;
}

button.patent-step-chip.has-flag:not(.active) .patent-step-chip__num {
  background: #dc2626;
  color: #ffffff;
}
.patent-gform-section-copy {
  margin-bottom: 18px;
}
.patent-gform-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}
.patent-gform-actions__left,
.patent-gform-actions__right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.patent-gform-note-list {
  list-style: none;
  display: grid;
  gap: 12px;
}
.patent-gform-note-list li {
  position: relative;
  padding-left: 18px;
  color: var(--gray-600);
  font-size: 0.92rem;
}
.patent-gform-note-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.optional-upload-guidance {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  margin: 14px 0 20px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 14px;
  background: #eff6ff;
  color: var(--navy-dark);
}
.optional-upload-guidance i {
  margin-top: 2px;
  color: var(--color-info-text);
}
.optional-upload-guidance strong {
  display: block;
  margin-bottom: 4px;
  color: var(--navy-dark);
}
.optional-upload-guidance p {
  margin: 0;
  color: var(--color-info-text);
  font-size: 0.9rem;
  line-height: 1.55;
}
.patent-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 12px;
}
.patent-choice-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.patent-choice {
  position: relative;
  display: block;
  cursor: pointer;
}
.patent-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.patent-choice span {
  display: block;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1.5px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--gray-700);
  font-weight: 700;
  transition: var(--transition);
}
.patent-choice input:checked + span {
  background: rgba(255, 112, 67, 0.12);
  border-color: var(--gold);
  color: var(--navy);
  box-shadow: 0 12px 24px rgba(255, 112, 67, 0.08);
}
.patent-editor-sheet {
  background: linear-gradient(180deg, #fffefc 0%, #f7f8fa 100%);
  border: 1px solid var(--gray-300);
  border-radius: 20px;
  padding: 28px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 112, 67, 0.08),
    0 24px 48px rgba(255, 112, 67, 0.08);
}
.patent-editor-header {
  display: grid;
  grid-template-columns: 1.2fr 0.95fr;
  gap: 22px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 2px solid rgba(28, 36, 52, 0.2);
}
.patent-editor-header h2 {
  font-size: 1.8rem;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  color: var(--navy);
}
.patent-editor-office {
  display: grid;
  gap: 10px;
}
.patent-editor-section {
  position: relative;
  border: 1px solid rgba(255, 112, 67, 0.16);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.82);
}
.application-section-info {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
.application-info-guide {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid rgba(255, 112, 67, 0.24);
  border-radius: 50%;
  background: #fff7ed;
  color: var(--color-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.application-info-guide:focus-visible,
.application-info-guide.is-open {
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 112, 67, 0.12);
  outline: none;
}
.application-info-guide__tooltip {
  position: fixed;
  width: min(320px, 78vw);
  padding: 12px 14px;
  border: 1px solid rgba(28, 36, 52, 0.14);
  border-radius: 10px;
  background: #ffffff;
  color: var(--gray-700);
  box-shadow: 0 18px 38px rgba(17, 24, 39, 0.16);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  z-index: 1400;
}
.patent-editor-grid {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}
.patent-editor-grid--one {
  grid-template-columns: 1fr;
}
.patent-editor-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.patent-editor-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.patent-editor-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.patent-editor-inline-group {
  margin-bottom: 18px;
}
.patent-editor-inline-group__label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 10px;
}
.patent-editor-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.patent-editor-field--full {
  width: 100%;
}
.patent-editor-field__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.patent-editor-field__control {
  width: 100%;
  border: none;
  border-bottom: 2px solid rgba(28, 36, 52, 0.18);
  background: transparent;
  color: var(--gray-800);
  font-size: 0.96rem;
  font-weight: 600;
  padding: 10px 4px 8px;
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.patent-editor-field__control:focus {
  border-bottom-color: var(--gold-dark);
  background: rgba(255, 112, 67, 0.03);
}
.patent-editor-field__control:disabled {
  color: var(--gray-400);
  border-bottom-style: dashed;
  background: rgba(255, 255, 255, 0.6);
  cursor: not-allowed;
}
.patent-editor-field__control--select,
.patent-editor-field__control--textarea {
  border: 1px solid rgba(28, 36, 52, 0.18);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.84);
}
.patent-editor-field__control--textarea {
  min-height: 128px;
  resize: vertical;
  font-weight: 500;
}
.completeness-check-shell {
  display: flex;
  justify-content: center;
  background: #fff;
  padding: 18px 20px;
}
.patent-gform-completeness {
  border: 1px solid rgba(255, 112, 67, 0.14);
  border-radius: 14px;
  margin-top: 28px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
  overflow: hidden;
}

/* Check Completeness now lives in .patent-gform-actions itself; this is just
   the results drop zone below it, so it only takes up space once populated. */
.patent-gform-completeness-panel:not(:empty) {
  margin-top: 20px;
}
.completeness-panel {
  margin-top: 14px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  padding: 16px;
}
.completeness-panel.good {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.04);
}
.completeness-panel.warn {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.05);
}
.completeness-panel.risk {
  border-color: rgba(239, 68, 68, 0.26);
  background: rgba(239, 68, 68, 0.04);
}
.completeness-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.completeness-kicker {
  color: var(--color-accent-text);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.completeness-header h3 {
  color: var(--navy);
  font-size: 1.05rem;
  margin: 0;
}
.completeness-score {
  min-width: 58px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 900;
  text-align: center;
  padding: 8px 10px;
}
.completeness-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--gray-200);
  background: #fff;
  color: var(--gray-500);
  cursor: pointer;
  flex-shrink: 0;
}
.completeness-close-btn:hover {
  background: var(--gray-100);
  color: var(--navy);
}
.modern-form-review {
  display: grid;
  gap: 18px;
}
.modern-review-section {
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.modern-review-section__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--gray-100);
  background: var(--gray-50);
}
.modern-review-section__header i {
  color: var(--color-accent-text);
}
.modern-review-section__header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--navy);
}
.modern-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}
.modern-review-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.modern-review-field--full {
  grid-column: 1 / -1;
}
.modern-review-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.modern-review-value {
  min-height: 42px;
  padding: 11px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: #fff;
  color: var(--gray-800);
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.modern-review-value--multi {
  white-space: pre-wrap;
  min-height: 82px;
}
.modern-review-value--empty {
  color: var(--gray-400);
  font-style: italic;
  font-weight: 600;
}
.completeness-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.completeness-grid h4 {
  color: var(--navy);
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.completeness-grid ul {
  margin: 0;
  padding-left: 18px;
  color: var(--gray-700);
  font-size: 0.84rem;
  line-height: 1.55;
}
.completeness-grid p,
.completeness-note {
  color: var(--gray-600);
  font-size: 0.84rem;
  line-height: 1.55;
}
.completeness-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}
.patent-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.patent-upload-box {
  border: 2px dashed var(--gray-300);
  border-radius: 20px;
  background: var(--gray-50);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}
.patent-upload-box:hover {
  border-color: var(--gold);
  background: white;
  transform: translateY(-2px);
}
.patent-upload-box i {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: white;
  color: var(--color-accent-text);
  font-size: 1.25rem;
  margin-bottom: 14px;
  box-shadow: 0 10px 18px rgba(255, 112, 67, 0.08);
}
.patent-upload-box strong {
  display: block;
  color: var(--navy);
  margin-bottom: 6px;
}
.patent-upload-box p {
  font-size: 0.88rem;
}
.patent-upload-box--accent {
  background: rgba(255, 112, 67, 0.06);
  border-color: rgba(255, 112, 67, 0.38);
}
.patent-upload-list {
  display: grid;
  gap: 10px;
}
.patent-upload-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--gray-700);
  font-size: 0.9rem;
}
.patent-upload-pill strong {
  margin-left: auto;
  color: var(--gray-500);
  font-size: 0.8rem;
}
.patent-upload-pill.success {
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(34, 197, 94, 0.08);
  color: var(--color-success-text);
}
.patent-supplemental-entry {
  border-style: dashed;
  background: #fff;
}
.patent-supplemental-entry__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.patent-preview-list {
  list-style: none;
  display: grid;
  gap: 10px;
}
.patent-preview-list li,
.patent-preview-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
}
.patent-preview-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 8px;
  flex-shrink: 0;
}
.patent-paper-wrap {
  width: 100%;
  overflow-x: hidden;
}
.patent-paper-stack {
  display: grid;
  gap: 24px;
}
/* Evaluator packet tabs (Advisory Sheet / IP Disclosure / Form 110 / ...):
   [data-active-form] is only ever set on the reviewer's own wrapper around
   the packet (renderSubmittedFormDataPanel), never on the applicant's or
   admin's read of the same markup, so this never touches their view. */
[data-active-form] .patent-paper-stack > [data-print-form] {
  display: none;
}
[data-active-form] .patent-paper-stack > :not([data-print-form]) {
  display: none;
}
[data-active-form="advisory"] .patent-paper-stack > [data-print-form="advisory"],
[data-active-form="ip-disclosure"] .patent-paper-stack > [data-print-form="ip-disclosure"],
[data-active-form="trademark-application"] .patent-paper-stack > [data-print-form="trademark-application"],
[data-active-form="form-110"] .patent-paper-stack > [data-print-form="form-110"],
[data-active-form="copyright-forms"] .patent-paper-stack > [data-print-form="copyright-forms"],
[data-active-form="optional-documents"] .patent-paper-stack > [data-print-form="optional-documents"],
[data-active-form="documents"] .patent-paper-stack > [data-print-form="documents"],
[data-active-form="optional-documents"] .patent-paper-stack > [data-print-form="documents"],
[data-active-form="documents"] .patent-paper-stack > [data-print-form="optional-documents"] {
  display: block;
}
/* Tabs (which section) and the download control (which format) share one
   row instead of the tabs' own row plus a full-width bar underneath. */
.packet-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.packet-toolbar .packet-form-tabs {
  margin-bottom: 0;
}
.packet-download-wrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.packet-download-caret {
  font-size: 0.65rem;
  margin-left: 2px;
}
.packet-download-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 160px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
.packet-download-menu.open {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.packet-download-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}
.packet-download-menu button:hover {
  background: var(--gray-50);
}
.patent-paper {
  width: 100%;
  max-width: 900px;
  background: linear-gradient(180deg, #fffefc 0%, #f7f8fa 100%);
  border: 1px solid var(--gray-300);
  border-radius: 20px;
  padding: 28px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 112, 67, 0.08),
    0 24px 48px rgba(255, 112, 67, 0.08);
}
.patent-paper__header {
  display: grid;
  grid-template-columns: 1.2fr 0.95fr;
  gap: 22px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 2px solid rgba(28, 36, 52, 0.2);
}
.patent-paper__eyebrow {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 6px;
}
.patent-paper__header h2 {
  font-size: 1.8rem;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.patent-paper__sub {
  color: var(--gray-500);
  font-size: 0.88rem;
}
.patent-paper__office {
  display: grid;
  gap: 10px;
}
.patent-paper__section {
  border: 1px solid rgba(255, 112, 67, 0.16);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.82);
}
.patent-paper__section-title {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
  padding-right: 34px;
}
.patent-paper__grid {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}
.patent-paper__grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.patent-paper__grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.patent-paper__grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.patent-paper-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 66px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(28, 36, 52, 0.14);
}
.patent-paper-field--full {
  width: 100%;
}
.patent-paper-field__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.patent-paper-field__value {
  font-size: 0.96rem;
  color: var(--gray-800);
  min-height: 24px;
  font-weight: 600;
  word-break: break-word;
}
.patent-confirmation-shell {
  max-width: 1100px;
  margin: 0 auto;
}

.patent-paper-wrap--official {
  padding: 8px 0;
}

.patent-paper--official {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 22px 32px 18px 38px;
  border: 1px solid #6b7280;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.14);
  font-family: Arial, Helvetica, sans-serif;
  color: #111827;
  line-height: 1.15;
  box-sizing: border-box;
}
.patent-paper--official-page2 {
  padding-top: 18px;
}

.patent-paper--official::before,
.patent-paper--official::after {
  content: "";
  position: absolute;
  top: 136px;
  bottom: 22px;
  width: 16px;
  opacity: 0.45;
  background:
    repeating-linear-gradient(
      90deg,
      #111827 0 1px,
      transparent 1px 2px,
      #111827 2px 4px,
      transparent 4px 5px,
      #111827 5px 8px,
      transparent 8px 10px,
      #111827 10px 11px,
      transparent 11px 13px
    );
}

.patent-paper--official::before {
  left: 10px;
}

.patent-paper--official::after {
  right: 10px;
}

.copyright-paper-wrap {
  width: 100%;
  overflow-x: hidden;
}

.patent-official-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 235px;
  gap: 18px;
  align-items: start;
  margin-bottom: 12px;
}

.patent-official-brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.patent-official-brand__logo {
  width: 86px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.patent-official-brand__copy {
  flex: 1;
}

.patent-official-brand__agency {
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 4px;
}

.patent-official-brand__meta {
  font-size: 0.73rem;
  color: #374151;
  line-height: 1.3;
}

.patent-official-brand__title {
  margin-top: 10px;
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.patent-official-office__form {
  font-size: 1.36rem;
  font-weight: 800;
  color: var(--color-accent-text);
  text-align: right;
  margin-bottom: 8px;
}

.patent-official-office__label {
  font-size: 0.7rem;
  font-style: italic;
  text-align: center;
  color: #4b5563;
  margin-bottom: 4px;
}

.patent-official-office__table {
  border: 1px solid #000;
  background: #fff;
}

.patent-official-office-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-height: 30px;
}

.patent-official-office-row + .patent-official-office-row {
  border-top: 1px solid #000;
}

.patent-official-office-row span {
  padding: 6px 8px;
  font-size: 0.68rem;
}

.patent-official-office-row span:first-child {
  border-right: 1px solid #000;
  font-weight: 700;
  background: #f5f5f5;
}

.patent-official-route {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 8px 0 14px;
}

.patent-official-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #111827;
}

.patent-official-mark__box {
  width: 12px;
  height: 12px;
  border: 1px solid #111827;
  background: #fff;
  position: relative;
  flex-shrink: 0;
}

.patent-official-mark.checked .patent-official-mark__box::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #111827;
}

.patent-official-mark--round .patent-official-mark__box {
  border-radius: 50%;
}

.patent-official-mark--round.checked .patent-official-mark__box::after {
  inset: 3px;
  border-radius: 50%;
}

.patent-official-section-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-bottom: 0;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.patent-official-section-bar__note {
  font-size: 0.64rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.9;
}

.patent-official-row {
  display: grid;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #fff;
}

.patent-official-row--one {
  grid-template-columns: 1fr;
}

.patent-official-row--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.patent-official-row--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.patent-official-row--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.patent-official-row--priority-head,
.patent-official-row--priority {
  grid-template-columns: 1.45fr 1.2fr 0.78fr 1.08fr;
}

.patent-official-head-cell,
.patent-official-cell {
  border-right: 1px solid #000;
}

.patent-official-head-cell:last-child,
.patent-official-cell:last-child {
  border-right: 0;
}

.patent-official-head-cell {
  padding: 4px 6px;
  background: #f3f4f6;
  font-size: 0.67rem;
  font-weight: 700;
  color: #111827;
}

.patent-official-cell {
  min-height: 32px;
  padding: 3px 6px 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
}

.patent-official-cell--span-2 {
  grid-column: span 2;
}

.patent-official-cell--span-3 {
  grid-column: span 3;
}

.patent-official-cell--span-4 {
  grid-column: span 4;
}

.patent-official-cell--compact {
  min-height: 28px;
}

.patent-official-cell--compact .patent-official-cell__label {
  display: none;
}

.patent-official-cell__label {
  font-size: 0.62rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.15;
}

.patent-official-cell__value {
  min-height: 16px;
  padding: 2px 4px;
  background: #eef2ff;
  color: #111827;
  font-size: 0.7rem;
  line-height: 1.28;
  word-break: break-word;
}

.patent-official-cell__value--choices {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  min-height: 18px;
  padding: 0;
  background: transparent;
}

.patent-official-choice-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

/* Editable variants: the Form 110 fill-out step uses the exact same official
   grid/cell layout as the printed evaluator copy, with these swapped in for
   the read-only cell/mark renderers -- same pattern as the Advisory Sheet and
   IP Disclosure psu-paper-value--input redesign. */
.patent-official-cell__value--input {
  background: transparent;
  padding: 1px 2px;
}
.patent-official-cell__value--input input,
.patent-official-cell__value--input select {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #9ca3af;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
  padding: 1px 0;
  appearance: none;
}
.patent-official-cell__value--input input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}
.patent-official-cell__value--input input:focus,
.patent-official-cell__value--input select:focus {
  outline: 2px solid var(--color-info);
  outline-offset: 1px;
}

.patent-official-mark--input {
  cursor: pointer;
}
.patent-official-mark__box-wrap {
  position: relative;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.patent-official-mark__box-wrap input {
  position: absolute;
  inset: 0;
  width: 12px;
  height: 12px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.patent-official-mark__box-wrap .patent-official-mark__box {
  position: absolute;
  inset: 0;
}
.patent-official-mark__box-wrap input:checked + .patent-official-mark__box::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #111827;
}
.patent-official-mark--round .patent-official-mark__box-wrap input:checked + .patent-official-mark__box::after {
  border-radius: 50%;
}
.patent-official-mark__box-wrap input:focus-visible + .patent-official-mark__box {
  outline: 2px solid var(--color-info);
  outline-offset: 1px;
}

.patent-supplemental-entry-remove {
  margin-left: auto;
}

.patent-official-note-line {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 4px 8px;
  font-size: 0.64rem;
  color: #4b5563;
  font-style: italic;
  background: #fafafa;
}
.patent-official-page-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.patent-official-page-head__form {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--color-accent-text);
}
.patent-official-checklist-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.15fr;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #fff;
}
.patent-official-checklist-col {
  padding: 8px 10px 10px;
  border-right: 1px solid #000;
  display: grid;
  gap: 8px;
  font-size: 0.68rem;
  line-height: 1.28;
}
.patent-official-checklist-col:last-child {
  border-right: 0;
}
.patent-official-checklist-note {
  font-style: italic;
  color: #374151;
}
.patent-official-checklist-row,
.patent-official-checklist-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px auto;
  gap: 6px;
  align-items: center;
}
.patent-official-checklist-row__box {
  min-height: 18px;
  padding: 2px 4px;
  border: 1px solid #cbd5e1;
  background: #eef2ff;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
}
.patent-official-checklist-total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #d1d5db;
  font-weight: 700;
}
.patent-official-checklist-col--attachments {
  align-content: start;
}
.patent-official-check-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.patent-official-check-item .patent-official-mark {
  font-size: 0.68rem;
  line-height: 1.25;
  font-weight: 600;
}
.patent-official-checklist-subtitle {
  margin-top: 6px;
  font-size: 0.69rem;
  font-weight: 800;
  color: #111827;
}
.patent-official-inline-copy {
  font-size: 0.7rem;
  line-height: 1.35;
  color: #111827;
  margin: 10px 0 4px;
}
.patent-inline-box {
  display: inline-flex;
  min-width: 40px;
  min-height: 18px;
  padding: 2px 6px;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  background: #eef2ff;
}
.patent-official-choices-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 4px 0 10px;
}
.patent-official-question-block {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 8px 10px;
  background: #fff;
  font-size: 0.68rem;
  line-height: 1.3;
}
.patent-official-question-title {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-weight: 700;
}
.patent-official-question-title span:first-child {
  font-weight: 800;
}
.patent-official-question-meta {
  margin-top: 6px;
}
.patent-official-question-detail {
  min-height: 24px;
  margin-top: 6px;
  padding: 4px 6px;
  background: #eef2ff;
  border: 1px solid #dbeafe;
  color: #111827;
}
.patent-official-signature-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #fff;
}
.patent-official-signature-panel {
  min-height: 188px;
  padding: 10px;
  border-right: 1px solid #000;
  font-size: 0.68rem;
  line-height: 1.42;
}
.patent-official-signature-panel:last-child {
  border-right: 0;
}
.patent-official-signature-panel--center {
  text-align: center;
}
.patent-official-signature-choice {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
}
.patent-official-sign-line {
  margin: 72px 16px 10px;
  border-bottom: 1px solid #000;
}
.patent-official-sign-caption {
  font-size: 0.68rem;
  font-weight: 700;
}
.patent-official-sign-name {
  margin-top: 4px;
  font-size: 0.68rem;
  color: #4b5563;
}
.patent-official-disclaimer {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 8px 10px;
  background: #fafafa;
  font-size: 0.64rem;
  line-height: 1.35;
  color: #374151;
}
.patent-official-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.62rem;
  line-height: 1.25;
  color: #6b7280;
}

.patent-supplemental-official-paper {
  display: grid;
  gap: 10px;
}

.patent-supplemental-official-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 18px;
  align-items: start;
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid #111827;
}

.patent-supplemental-official-block {
  border-top: 1px solid #000;
}

.patent-supplemental-official-title {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 4px 8px;
  background: #f3f4f6;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.patent-supplemental-official-title span:first-child {
  min-width: 82px;
}

.psu-form-stack {
  gap: 28px;
}

.psu-form-paper {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  background: #fff;
  border: 1.5px solid #111;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

.psu-advisory-paper {
  padding: 28px 34px 34px;
}

.psu-advisory-head {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 330px;
  border: 1.5px solid #111;
}

.psu-advisory-logo-cell,
.psu-advisory-title-cell,
.psu-advisory-meta {
  min-height: 118px;
}

.psu-advisory-logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1.5px solid #111;
  padding: 12px;
}

.psu-advisory-logo-cell img,
.psu-disclosure-head img {
  width: 92px;
  height: 92px;
  object-fit: contain;
}

.psu-advisory-title-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 22px;
  border-right: 1.5px solid #111;
}

.psu-advisory-title {
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.psu-advisory-office {
  margin-top: 14px;
  font-size: 1.15rem;
  font-weight: 800;
}

.psu-advisory-sub {
  margin-top: 2px;
  font-size: 1.02rem;
  font-weight: 800;
}

.psu-advisory-meta {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
}

.psu-advisory-meta div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 30px;
  border-bottom: 1.5px solid #111;
}

.psu-advisory-meta div:last-child {
  border-bottom: 0;
}

.psu-advisory-meta span,
.psu-advisory-meta strong {
  padding: 6px 10px;
  font-size: 0.95rem;
}

.psu-advisory-meta span {
  border-right: 1.5px solid #111;
  text-align: right;
  font-weight: 700;
}

.psu-advisory-meta strong {
  text-align: center;
}

.psu-form-redbar {
  height: 22px;
  margin-top: 42px;
  background: linear-gradient(90deg, var(--color-error), var(--color-error), var(--color-error));
  border: 1.5px solid #111;
  border-bottom: 0;
}

.psu-advisory-row,
.psu-advisory-grid,
.psu-advisory-full,
.psu-advisory-title-line,
.psu-advisory-services {
  border-left: 1.5px solid #111;
  border-right: 1.5px solid #111;
  border-bottom: 1.5px solid #111;
}

.psu-advisory-row--client {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 52px;
  padding: 8px 10px;
  font-size: 1.05rem;
}

.psu-advisory-grid {
  display: grid;
}

.psu-advisory-grid > div,
.psu-advisory-full,
.psu-advisory-title-line,
.psu-advisory-services {
  min-height: 58px;
  padding: 7px 10px;
}

.psu-advisory-grid > div + div {
  border-left: 1.5px solid #111;
}

.psu-advisory-grid--company {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.psu-advisory-grid--position {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.psu-advisory-grid--names {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.psu-advisory-grid--contact {
  grid-template-columns: 0.62fr 0.38fr;
}

.psu-advisory-grid span,
.psu-advisory-full > span,
.psu-advisory-title-line > span {
  display: block;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
}

.psu-advisory-inline-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 1rem;
  font-weight: 900;
}

.psu-paper-value {
  min-height: 24px;
  padding: 4px 2px 2px;
  border-bottom: 1px solid #111;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.psu-paper-value--multi {
  min-height: 86px;
  border: 1px solid #d1d5db;
  padding: 8px 10px;
  margin-top: 8px;
}

.psu-paper-inline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.psu-paper-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
}

.psu-paper-check__box {
  width: 14px;
  height: 14px;
  border: 1.5px solid #111;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  background: #fff;
}

.psu-paper-check.checked .psu-paper-check__box::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 5px;
  height: 8px;
  border: solid #111;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.psu-advisory-title-line {
  min-height: 90px;
}

.psu-advisory-services {
  min-height: 116px;
}

.psu-advisory-services > strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.psu-advisory-service-grid,
.psu-paper-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
}

.psu-advisory-signatures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin: 112px 16px 0;
  text-align: center;
  font-size: 0.95rem;
}

.psu-advisory-signatures > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}

.psu-advisory-signatures .psu-sign-caption {
  display: block;
  min-height: 3em;
  line-height: 1.5;
  white-space: normal;
}

.psu-sign-line {
  min-height: 28px;
  border-bottom: 1.5px solid #111;
  padding: 4px 8px;
  font-weight: 700;
  white-space: nowrap;
}

.psu-advisory-signatures .psu-sign-line {
  width: 100%;
  box-sizing: border-box;
  font-size: clamp(0.75rem, 1.5vw, 0.95rem);
}

.psu-advisory-signatures .psu-sign-line > span {
  white-space: nowrap;
}

.psu-disclosure-paper {
  padding: 30px 36px;
}

.psu-disclosure-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 2px solid #111;
}

.psu-disclosure-kicker {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.psu-disclosure-head h2 {
  margin: 2px 0;
  font-size: 1.7rem;
  color: #111;
}

.psu-disclosure-head p {
  margin: 0;
  color: #374151;
  font-size: 0.95rem;
  font-weight: 700;
}

.psu-disclosure-section {
  margin-bottom: 16px;
}

.psu-disclosure-section-title {
  padding: 7px 10px;
  background: #111;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.psu-disclosure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-left: 1.5px solid #111;
  border-right: 1.5px solid #111;
  border-bottom: 1.5px solid #111;
}

.psu-disclosure-grid > div {
  min-height: 52px;
  padding: 8px 10px;
  border-right: 1.5px solid #111;
  border-bottom: 1.5px solid #111;
}

.psu-disclosure-grid > div:nth-child(2n) {
  border-right: 0;
}

.psu-disclosure-grid > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.psu-disclosure-grid span {
  display: block;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #374151;
}

.psu-paper-choice-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 10px;
  border-left: 1.5px solid #111;
  border-right: 1.5px solid #111;
  border-bottom: 1.5px solid #111;
  font-weight: 800;
}

.psu-paper-choice-grid {
  padding: 10px;
  border-left: 1.5px solid #111;
  border-right: 1.5px solid #111;
  border-bottom: 1.5px solid #111;
}

.psu-disclosure-declaration {
  margin: 0;
  padding: 12px;
  border-left: 1.5px solid #111;
  border-right: 1.5px solid #111;
  border-bottom: 1.5px solid #111;
  color: #111;
  font-size: 0.88rem;
  line-height: 1.55;
}

.psu-disclosure-sign-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 36px;
  padding: 20px 12px 4px;
  border-left: 1.5px solid #111;
  border-right: 1.5px solid #111;
  border-bottom: 1.5px solid #111;
}

.psu-disclosure-sign-grid span {
  display: block;
  margin-bottom: 24px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #374151;
}

/* Editable variants: the fill-out step uses the exact same official-form
   layout/classes as the printed evaluator copy, with these swapped in for
   the read-only value/check renderers so the field the applicant fills in
   is the field the evaluator later sees and prints. */
.psu-paper-value--input {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #111;
  background: transparent;
  font-family: inherit;
  color: inherit;
  outline: none;
  border-radius: 0;
  appearance: none;
}

textarea.psu-paper-value--input {
  border: 1px solid #d1d5db;
  resize: vertical;
  min-height: 86px;
}

/* Grows in place (via JS, see growPsuAutoTextarea) instead of the fixed
   86px multi-line box above -- starts the same size as a single-line field
   and only gets taller if the applicant actually needs the room.
   The sibling single-line <input> fields pick up a boxed look for free from
   the browser's native empty-field highlight, which textareas don't get --
   so this is styled explicitly to match instead of depending on that. */
textarea.psu-paper-value--autogrow {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
  padding: 8px 10px;
  resize: none;
  overflow: hidden;
  min-height: 24px;
}

.psu-paper-value--input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.psu-paper-value--input:focus {
  outline: 2px solid var(--color-info);
  outline-offset: 1px;
}

.psu-sign-line.psu-paper-value--input {
  border: none;
  border-bottom: 1.5px solid #111;
  text-align: center;
}

.psu-paper-check--input {
  cursor: pointer;
}

.psu-paper-check__box-wrap {
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-block;
  flex-shrink: 0;
}

.psu-paper-check__box-wrap input {
  position: absolute;
  inset: 0;
  width: 14px;
  height: 14px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.psu-paper-check__box-wrap .psu-paper-check__box {
  position: absolute;
  inset: 0;
}

.psu-paper-check__box-wrap input:checked + .psu-paper-check__box::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 5px;
  height: 8px;
  border: solid #111;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.psu-paper-check__box-wrap input:disabled {
  cursor: default;
}

.psu-paper-check__box-wrap input:disabled ~ .psu-paper-check__box {
  opacity: 0.55;
}

.psu-paper-check--input input:focus-visible + .psu-paper-check__box,
.psu-paper-check__box-wrap input:focus-visible ~ .psu-paper-check__box {
  outline: 2px solid var(--color-info);
  outline-offset: 1px;
}

@media (max-width: 900px) {
  .psu-advisory-head,
  .psu-advisory-grid--company,
  .psu-advisory-grid--position,
  .psu-advisory-grid--names,
  .psu-advisory-grid--contact,
  .psu-disclosure-grid,
  .psu-disclosure-sign-grid,
  .psu-advisory-signatures {
    grid-template-columns: 1fr;
  }

  .psu-advisory-logo-cell,
  .psu-advisory-title-cell,
  .psu-advisory-meta,
  .psu-advisory-grid > div + div {
    border-left: 0;
    border-right: 0;
  }

  .psu-advisory-logo-cell,
  .psu-advisory-title-cell {
    border-bottom: 1.5px solid #111;
  }

  .psu-advisory-paper,
  .psu-disclosure-paper {
    padding: 18px;
  }

  .psu-advisory-row--client,
  .psu-paper-choice-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .psu-advisory-signatures {
    gap: 36px;
    margin: 48px 8px 0;
  }

}

.copyright-paper-stack {
  display: grid;
  gap: 24px;
}

.copyright-paper-wrap {
  overflow-x: auto;
}

.copyright-paper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 22px 16px;
  border: 1px solid #6b7280;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.14);
  font-family: Arial, Helvetica, sans-serif;
  color: #111827;
  line-height: 1.18;
  box-sizing: border-box;
}

.copyright-paper__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 12px;
}

.copyright-paper__header--compact {
  align-items: center;
}

.copyright-paper__brand {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.copyright-paper__logo {
  width: 74px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.copyright-paper__meta {
  font-size: 0.74rem;
  color: #4b5563;
}

.copyright-paper__agency {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.15;
}

.copyright-paper__bureau {
  margin-top: 4px;
  font-size: 0.98rem;
  font-weight: 800;
}

.copyright-paper__office {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.copyright-paper__office-copy {
  font-size: 0.64rem;
  line-height: 1.35;
  text-align: right;
  color: #374151;
}

.copyright-paper__tag {
  border: 1px solid #4b5563;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  background: #fff;
}

.copyright-paper__title {
  margin: 6px 0 12px;
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
}

.copyright-paper__title--small {
  margin: 0;
  text-align: left;
}

.copyright-section-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: #000;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  border: 1px solid #000;
}

.copyright-section-bar__note {
  font-size: 0.64rem;
  font-style: italic;
  font-weight: 500;
  text-transform: none;
}

.copyright-note-block {
  border: 1px solid #000;
  border-top: 0;
  padding: 8px 10px;
  display: grid;
  gap: 6px;
  font-size: 0.64rem;
  line-height: 1.35;
}

.copyright-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

.copyright-panel {
  padding: 8px 10px 10px;
  border-right: 1px solid #000;
  display: grid;
  gap: 8px;
}

.copyright-panel:last-child {
  border-right: 0;
}

.copyright-panel__title {
  font-size: 0.63rem;
  font-weight: 800;
  color: #111827;
}

.copyright-option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 0.67rem;
}

.copyright-option-grid {
  display: grid;
  gap: 8px;
}

.copyright-inline-fill {
  display: inline-flex;
  min-width: 76px;
  min-height: 16px;
  padding: 1px 4px;
  align-items: center;
  background: #eef2ff;
  border: 1px solid #dbeafe;
  font-size: 0.67rem;
}

.copyright-submission-box {
  display: grid;
  gap: 4px;
  width: 240px;
  font-size: 0.66rem;
  line-height: 1.3;
}

.copyright-submission-box__title {
  font-weight: 800;
}

/* Editable inline-fill: same box as .copyright-inline-fill but holding a real
   input/textarea for the Y/N question rows on the BCRR fill-out step. */
.copyright-inline-fill--input {
  padding: 0;
}
.copyright-inline-fill--input input {
  width: 100%;
  min-width: 90px;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
  padding: 1px 4px;
}
.copyright-inline-fill--input input:focus {
  outline: 2px solid var(--color-info);
  outline-offset: 1px;
}

.copyright-subhead {
  padding: 6px 8px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #d1d5db;
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
}

.copyright-grid {
  display: grid;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #fff;
}

.copyright-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.copyright-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.copyright-cell {
  min-height: 42px;
  padding: 4px 6px;
  border-right: 1px solid #000;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.copyright-cell:last-child {
  border-right: 0;
}

.copyright-cell--span-2 {
  grid-column: span 2;
}

.copyright-cell--span-3 {
  grid-column: span 3;
}

.copyright-cell--span-4 {
  grid-column: span 4;
}

.copyright-cell--span-5 {
  grid-column: span 5;
}

.copyright-cell__label {
  font-size: 0.61rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.18;
}

.copyright-cell__value {
  min-height: 18px;
  padding: 2px 4px;
  background: #eef2ff;
  border: 1px solid #e5e7eb;
  font-size: 0.67rem;
  line-height: 1.3;
  word-break: break-word;
}

.copyright-cell__value--choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  min-height: 18px;
  padding: 0;
  background: transparent;
  border: 0;
}

/* Editable variant: the BCRR fill-out step uses the exact same copyright-cell/
   copyright-grid paper layout the printed evaluator/preview copy uses, with
   real inputs swapped in for the read-only value cells -- same underline-input
   convention as .patent-official-cell__value--input / .psu-paper-value--input. */
.copyright-cell__value--input {
  background: transparent;
  border: 0;
  padding: 1px 2px;
}
.copyright-cell__value--input input,
.copyright-cell__value--input select {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #9ca3af;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
  padding: 1px 0;
  appearance: none;
}
.copyright-cell__value--input input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}
.copyright-cell__value--input input:focus,
.copyright-cell__value--input select:focus {
  outline: 2px solid var(--color-info);
  outline-offset: 1px;
}
.copyright-cell__value--input input:disabled,
.copyright-cell__value--input select:disabled {
  color: #6b7280;
  border-bottom-style: dotted;
}

/* BCRR 2025-2 (Institutional Registration / Supplemental) editable step: each
   repeatable entry is its own labeled paper block -- a black header bar (title +
   Remove button, same border language as .copyright-section-bar) followed by a
   role-selection panel, then the usual copyright-subhead/copyright-grid stack. */
.copyright-entry-block {
  margin-top: 22px;
}
.copyright-entry-block:first-of-type {
  margin-top: 16px;
}
.copyright-entry-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  background: #000;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  border: 1px solid #000;
}
.copyright-entry-block__title {
  letter-spacing: 0.02em;
}
.copyright-entry-choice-panel {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 6px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  background: #fff;
}
.copyright-entry-choice-panel__label {
  font-size: 0.67rem;
  font-weight: 700;
}

.copyright-inline-row {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 6px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: 0.66rem;
}

.copyright-question-strip {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 6px 8px;
  background: #e5e7eb;
  font-size: 0.64rem;
  font-weight: 700;
  text-align: center;
}

.copyright-inline-grid {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  display: grid;
}

.copyright-inline-grid__row {
  padding: 6px 8px;
  border-bottom: 1px solid #000;
  font-size: 0.65rem;
  line-height: 1.35;
}

.copyright-inline-grid__row:last-child {
  border-bottom: 0;
}

.copyright-declaration-list {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 8px 10px;
  display: grid;
  gap: 6px;
  font-size: 0.64rem;
  line-height: 1.35;
}

.copyright-declaration-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  padding-top: 6px;
}

.copyright-doc-grid {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  font-size: 0.66rem;
}

.copyright-privacy-grid {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.copyright-privacy-panel {
  min-height: 180px;
  padding: 10px;
  border-right: 1px solid #000;
  font-size: 0.65rem;
  line-height: 1.4;
}

.copyright-privacy-panel:last-child {
  border-right: 0;
}

.copyright-privacy-panel--signature {
  text-align: center;
}

.copyright-signature-line {
  margin: 64px 28px 10px;
  border-bottom: 1px solid #000;
}

.copyright-signature-caption {
  font-size: 0.65rem;
  font-weight: 700;
}

.copyright-signature-name {
  margin-top: 4px;
  font-size: 0.65rem;
  color: #4b5563;
}

.copyright-reference-columns {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
}

.copyright-reference-panel {
  border: 1px solid #000;
  padding: 8px 10px 10px;
  display: grid;
  gap: 10px;
}

.copyright-reference-title,
.copyright-reference-subtitle {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.copyright-reference-copy {
  display: grid;
  gap: 6px;
  font-size: 0.63rem;
  line-height: 1.35;
}

.copyright-reference-list {
  padding-left: 16px;
  display: grid;
  gap: 4px;
  font-size: 0.63rem;
  line-height: 1.35;
}

.copyright-reference-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.62rem;
  line-height: 1.28;
}

.copyright-reference-table th,
.copyright-reference-table td {
  border: 1px solid #000;
  padding: 4px 5px;
  text-align: left;
  vertical-align: top;
}

.copyright-reference-table th {
  background: #e5e7eb;
  font-weight: 800;
}

.copyright-paper__footer {
  margin-top: 10px;
  font-size: 0.62rem;
  color: #6b7280;
  text-align: right;
}

@media (max-width: 1100px) {
  .patent-gform-layout {
    grid-template-columns: 1fr;
  }
  .patent-gform-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .patent-step-strip {
    grid-template-columns: 1fr 1fr;
  }
  .submitted-form-step-strip {
    grid-template-columns: 1fr 1fr;
  }
  .patent-gform-actions,
  .patent-gform-actions__left,
  .patent-gform-actions__right {
    flex-direction: column;
    align-items: stretch;
  }
  .patent-upload-grid,
  .patent-editor-header,
  .modern-review-grid,
  .patent-editor-grid--two,
  .patent-editor-grid--three,
  .patent-editor-grid--four,
  .patent-paper__header,
  .patent-paper__grid--two,
  .patent-paper__grid--three,
  .patent-paper__grid--four {
    grid-template-columns: 1fr;
  }
  .patent-choice-grid--two {
    grid-template-columns: 1fr;
  }
  .patent-paper {
    min-width: 0;
    padding: 20px;
  }
  .patent-editor-sheet {
    padding: 20px;
  }
  .patent-paper--official {
    width: 100%;
    min-width: auto;
    padding: 18px 20px 16px;
  }
  .patent-paper--official::before,
  .patent-paper--official::after {
    display: none;
  }
  .patent-official-header {
    grid-template-columns: 1fr;
  }
  .patent-supplemental-entry__head,
  .patent-supplemental-official-head {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
  .patent-official-checklist-grid,
  .patent-official-signature-grid {
    grid-template-columns: 1fr;
  }
  .patent-official-checklist-col,
  .patent-official-signature-panel {
    border-right: 0;
    border-bottom: 1px solid #000;
  }
  .patent-official-checklist-col:last-child,
  .patent-official-signature-panel:last-child {
    border-bottom: 0;
  }
  .patent-official-brand {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .patent-official-office__form {
    text-align: center;
  }
  .patent-official-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .copyright-two-col,
  .copyright-privacy-grid,
  .copyright-reference-columns {
    grid-template-columns: 1fr;
  }
  .copyright-panel,
  .copyright-privacy-panel {
    border-right: 0;
    border-bottom: 1px solid #000;
  }
  .copyright-panel:last-child,
  .copyright-privacy-panel:last-child {
    border-bottom: 0;
  }
  .copyright-doc-grid {
    grid-template-columns: 1fr;
  }
}

/* =============== SUBMISSION DETAIL =============== */
.detail-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
.detail-panel {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(255, 112, 67, 0.05);
  border: 1px solid var(--gray-200);
  padding: 14px;
}
.detail-panel h3 {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gray-200);
}
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
  min-width: 0;
}
.detail-row .label {
  flex: 0 0 auto;
  max-width: 40%;
}
.detail-row .value {
  flex: 1 1 auto;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}
.detail-row .label {
  color: var(--gray-500);
  font-size: 0.72rem;
}
.detail-row .value {
  font-weight: 600;
  font-size: 0.76rem;
}
.ip-record-description {
  display: block;
  padding: 12px 0;
}
.ip-record-description .label,
.ip-record-description .value {
  display: block;
}
.ip-record-description .label {
  margin-bottom: 7px;
}
.ip-record-description .value {
  max-height: min(38vh, 320px);
  overflow: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  line-height: 1.55;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--gray-50);
}
.status-update-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
}
.status-update-panel--locked {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--gray-500);
  background: var(--gray-50);
  font-size: 0.84rem;
  line-height: 1.45;
}
.status-update-panel--locked i {
  color: var(--color-accent-text);
  margin-top: 2px;
}
.status-update-panel--certified {
  display: block;
  background: rgba(16, 185, 129, 0.08);
  border-left: 4px solid var(--color-success);
  color: var(--color-success-text);
}
.locked-status-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.locked-status-message i,
.certification-registration i {
  color: var(--color-success-text);
}
.locked-status-message strong {
  color: inherit;
}
.certification-registration {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--color-success-text);
}
.certification-registration span {
  font-weight: 700;
}
.status-update-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.84rem;
}
.status-update-row span,
.status-update-panel label {
  color: var(--gray-500);
  font-weight: 800;
  /* 0.74rem rendered at 11.84px; 12px is the floor for anything carrying meaning. */
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.status-update-row strong {
  color: var(--navy);
  text-align: right;
}
.status-update-panel select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--navy);
  background: #fff;
}
.status-update-panel .btn {
  width: 100%;
  justify-content: center;
}

.submission-detail-layout > *,
.submission-detail-main,
.submission-detail-sidebar,
.detail-panel {
  min-width: 0;
}

.submission-detail-sidebar {
  overflow: hidden;
}

/* Every direct child (Status, Interviews, Payment, Documents, Deadlines,
   Activity Timeline) gets the exact same gap this way, regardless of each
   panel's own render function -- individual inline margin-top values used to
   drift out of sync (some panels had one, some didn't, some got overwritten
   after async hydration), leaving inconsistent/zero spacing between boxes. */
.submission-detail-main,
.submission-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.submission-detail-sidebar .detail-panel,
.submission-detail-sidebar .evaluation-content-panel,
.submission-detail-sidebar .evaluation-note,
.submission-detail-sidebar .evaluation-docs {
  max-width: 100%;
  overflow-wrap: anywhere;
}

body.role-reviewer .reviewer-cases-table {
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

body.role-reviewer .reviewer-cases-table .table-header {
  padding: 16px 20px;
}

body.role-reviewer .reviewer-cases-table .filter-btn,
body.role-reviewer .reviewer-cases-table .filter-select {
  min-height: 36px;
  font-size: 0.82rem;
}

body.role-reviewer .reviewer-case-data-table th,
body.role-reviewer .reviewer-case-data-table td {
  padding: 12px 14px;
  vertical-align: middle;
}

/* Urgency reads as pill + calendar date + relative phrase stacked together, so
   an evaluator sees WHEN, not only a mood word, and never colour alone. */
.deadline-status-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
.deadline-status-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-600);
  white-space: nowrap;
}
.deadline-status-cell.overdue .deadline-status-date,
.deadline-status-cell.today .deadline-status-date {
  color: var(--color-error-text);
  font-weight: 700;
}
.deadline-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
  border: 1px solid transparent;
}
.deadline-status-pill.overdue {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.22);
  color: var(--color-error-text);
}
.deadline-status-pill.today {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.24);
  color: var(--color-error-text);
}
.deadline-status-pill.soon {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.24);
  color: var(--color-warning-text);
}
.deadline-status-pill.upcoming {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.2);
  color: var(--color-info-text);
}
.deadline-status-pill.later {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.2);
  color: var(--color-success-text);
}
.deadline-status-pill.no-deadline {
  background: rgba(255, 112, 67, 0.1);
  border-color: rgba(255, 112, 67, 0.2);
  color: #475569;
}

.reviewer-deadline-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.reviewer-deadline-row.deadline-row-overdue td {
  background: rgba(254, 242, 242, 0.72);
}

.reviewer-deadline-row.deadline-row-today td {
  background: rgba(255, 247, 237, 0.78);
}

.reviewer-deadline-row.deadline-row-soon td {
  background: rgba(255, 251, 235, 0.7);
}

.reviewer-deadline-row.deadline-row-overdue td:first-child,
.reviewer-deadline-row.deadline-row-today td:first-child,
.reviewer-deadline-row.deadline-row-soon td:first-child {
  border-left: 4px solid var(--color-error);
}

.reviewer-deadline-row.deadline-row-soon td:first-child {
  border-left-color: var(--color-warning);
}

.marketplace-image-field {
  display: grid;
  gap: 10px;
}
.marketplace-image-helper {
  margin: 0;
  color: var(--gray-500);
  font-size: 0.88rem;
  line-height: 1.5;
}
.marketplace-image-upload {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 2px dashed var(--gray-200);
  border-radius: 12px;
  background: var(--gray-50);
  cursor: pointer;
  transition: var(--transition);
}
.marketplace-image-upload:hover {
  border-color: var(--gold);
  background: #fff;
}
.marketplace-image-upload.disabled {
  cursor: default;
  opacity: 0.78;
}
.marketplace-image-upload i {
  color: var(--color-accent-text);
  font-size: 1.5rem;
}
.marketplace-image-upload strong,
.marketplace-image-upload span {
  display: block;
}
.marketplace-image-upload strong {
  color: var(--navy);
  font-size: 0.92rem;
}
.marketplace-image-upload span {
  margin-top: 3px;
  color: var(--gray-500);
  font-size: 0.82rem;
}
.marketplace-image-preview-shell {
  display: grid;
  gap: 10px;
}
.marketplace-image-preview {
  width: 100%;
  min-height: 180px;
  max-height: 260px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.marketplace-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.role-reviewer .reviewer-case-data-table td:nth-child(3),
body.role-reviewer .reviewer-case-data-table td:nth-child(4) {
  max-width: 280px;
  overflow-wrap: anywhere;
}

body.role-reviewer .reviewer-case-data-table .action-btns {
  justify-content: flex-start;
}

body.role-reviewer .reviewer-case-detail-header {
  margin-bottom: 18px;
}

body.role-reviewer .reviewer-case-detail-header h1 {
  font-family: inherit;
  font-size: 1.55rem;
  line-height: 1.25;
  color: var(--navy);
  letter-spacing: 0;
}

body.role-reviewer .reviewer-case-detail-header p {
  font-size: 0.92rem;
  color: var(--gray-600);
}

body.role-reviewer .manual-review-banner {
  background: #fff7ed !important;
  border-color: #fed7aa !important;
  align-items: flex-start !important;
}

body.role-reviewer .reviewer-case-detail-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 20px;
  align-items: start;
}

/* Status/Office Actions/deadline stay in the viewport while the evaluator
   scrolls the applicant profile, form data and documents next to them --
   otherwise every action requires scrolling back up to reach the sidebar. */
body.role-reviewer .reviewer-case-detail-layout .submission-detail-sidebar {
  position: sticky;
  top: calc(var(--topbar-h) + 12px);
  max-height: calc(100vh - var(--topbar-h) - 24px);
  overflow-y: auto;
}
/* The sidebar is a flex column, and giving it a max-height turns every
   direct child into a flex item that can be shrunk to fit. Most panels have
   overflow:visible, so their content-based minimum size stops them shrinking
   -- but a panel like .deadline-panel that sets overflow:hidden (to wrap long
   note text) gets an automatic minimum size of 0 instead, so the flex algorithm
   crushed it down to ~46px (just enough for its heading) to make everything
   else fit, instead of leaving it full height and letting the sidebar scroll.
   flex-shrink:0 opts every panel out of that squeeze. */
body.role-reviewer .reviewer-case-detail-layout .submission-detail-sidebar > * {
  flex-shrink: 0;
}

/* Overview (applicant profile + submitted form data) and Documents used to
   render fully stacked, one after another, in the main column -- an evaluator
   scrolled through the whole thing just to reach the documents. Splitting them
   into tabs means only one is on screen at a time. */
.reviewer-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.reviewer-tabs .filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Moved to the top of the page (above the docket header) so it reads as the
   primary way to navigate the case, not a small in-column control -- sized
   up to match that role. */
.reviewer-tabs-top {
  margin-bottom: 20px;
}
.reviewer-tabs-top .filter-btn {
  padding: 12px 22px;
  font-size: 0.95rem;
}
/* On a phone the three sized-up tabs overran the screen by ~40px, so the
   whole case page scrolled sideways. They share the row equally instead. */
@media (max-width: 640px) {
  .reviewer-tabs-top .filter-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 10px 6px;
    font-size: 0.82rem;
    text-align: center;
  }
}
/* Stays legible against both the inactive (white) and active (navy) tab
   background, so an open Office Action reads as urgent either way. */
.tab-live-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--red, var(--color-error-text));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 18px;
}
.reviewer-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
/* display:flex above wins over the UA stylesheet's [hidden]{display:none} --
   author rules always beat UA ones regardless of specificity -- so the
   inactive tab stayed laid out (and visible) despite el.hidden being true.
   This restores the default. */
.reviewer-tab-panel[hidden] {
  display: none;
}

body.role-reviewer .reviewer-case-detail-layout .detail-panel {
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  border-color: var(--gray-200);
}

body.role-reviewer .reviewer-case-detail-layout .detail-panel h3 {
  font-size: 1rem;
  margin-bottom: 16px;
  padding-bottom: 10px;
}

body.role-reviewer .reviewer-case-detail-layout .detail-row {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

body.role-reviewer .reviewer-case-detail-layout .detail-row .value {
  text-align: right;
  overflow-wrap: anywhere;
}

body.role-reviewer .reviewer-case-detail-layout .evaluation-content-panel {
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  border-color: var(--gray-200);
}

body.role-reviewer .reviewer-case-detail-layout .evaluation-content-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

body.role-reviewer .reviewer-case-detail-layout .evaluation-content-header > div:first-child {
  flex: 1 1 auto;
  min-width: 140px;
}

body.role-reviewer .reviewer-case-detail-layout .evaluation-content-header .badge {
  white-space: nowrap !important;
  word-break: keep-all;
  max-width: 100%;
  flex-shrink: 0 !important;
}

body.role-reviewer .reviewer-case-detail-layout .evaluation-content-header h4 {
  font-size: 0.95rem;
  margin: 0;
}

body.role-reviewer .reviewer-case-detail-layout .evaluation-note,
body.role-reviewer .reviewer-case-detail-layout .evaluation-docs {
  padding: 12px;
  border-radius: 10px;
}

body.role-reviewer .reviewer-case-detail-layout .evaluation-note p,
body.role-reviewer .reviewer-case-detail-layout .evaluation-note small,
body.role-reviewer .reviewer-case-detail-layout .evaluation-content-header p {
  font-size: 0.82rem;
}

body.role-reviewer .reviewer-case-detail-layout .evaluation-option-row .filter-btn {
  flex: 1 1 130px;
  justify-content: center;
}

body.role-reviewer .reviewer-case-detail-layout .evaluation-content-panel textarea {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1180px) {
  body.role-reviewer .reviewer-case-detail-layout {
    grid-template-columns: 1fr;
  }
  body.role-reviewer .reviewer-case-detail-layout .detail-row .value {
    text-align: left;
  }
  /* Single-column now, so the sidebar sits below the main content in normal
     flow -- sticking it would pin it mid-page instead of alongside anything. */
  body.role-reviewer .reviewer-case-detail-layout .submission-detail-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 640px) {
  body.role-reviewer .reviewer-case-detail-header h1 {
    font-size: 1.28rem;
  }
  body.role-reviewer .reviewer-case-detail-layout .detail-panel {
    padding: 18px;
  }
  body.role-reviewer .reviewer-case-detail-layout .detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.submitted-form-step-strip {
  display: grid;
  grid-template-columns: repeat(var(--submitted-step-count, 4), minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 18px;
}
.submitted-paper-preview {
  margin-top: 18px;
  padding: 18px;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
  overflow-x: auto;
}
.submitted-paper-preview .psu-form-paper,
.submitted-paper-preview .copyright-paper {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
.submitted-form-empty {
  padding: 16px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.22);
  color: var(--gray-700);
}
.submitted-form-empty strong {
  display: block;
  color: var(--color-warning-text);
  margin-bottom: 6px;
}
.submitted-form-empty p {
  margin: 0 0 10px;
  font-size: 0.86rem;
  line-height: 1.55;
}
.detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.timeline {
  position: relative;
  padding-left: 28px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gray-200);
}
.timeline-item {
  position: relative;
  margin-bottom: 20px;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid white;
}
.timeline-item .time {
  font-size: 0.75rem;
  color: var(--gray-400);
}
.timeline-item .event {
  font-size: 0.85rem;
  color: var(--gray-700);
  font-weight: 500;
}
.reviewer-activity-timeline .timeline-item .event i {
  color: var(--color-accent-text);
  margin-right: 6px;
}
.case-activity-timeline .timeline-item .event i {
  color: var(--color-accent-text);
  margin-right: 6px;
}
.timeline-item--evaluator::before {
  background: var(--color-info);
}
.timeline-item--evaluator .time,
.timeline-item--evaluator .event i {
  color: var(--color-info-text);
}
.timeline-item--success::before {
  background: var(--green);
}
.timeline-item--success .event i {
  color: var(--green);
}
.timeline-item--info::before {
  background: var(--color-info);
}
.timeline-item--info .event i {
  color: var(--color-info-text);
}
.timeline-empty-state {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px dashed var(--gray-200);
  border-radius: 10px;
  background: var(--gray-50);
  color: var(--gray-500);
  font-size: 0.84rem;
  line-height: 1.5;
}
.timeline-empty-state i {
  color: var(--color-accent-text);
  margin-top: 2px;
}
.timeline-empty-state p {
  margin: 0;
}
.workflow-note {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 112, 67, 0.06);
  border: 1px solid rgba(255, 112, 67, 0.18);
  color: var(--gray-600);
  font-size: 0.82rem;
  line-height: 1.6;
  margin-bottom: 16px;
}
.copyright-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}
.copyright-flow-card {
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: var(--gray-50);
  padding: 16px;
  min-height: 170px;
}
.copyright-flow-card.completed {
  background: rgba(22, 163, 74, 0.05);
  border-color: rgba(22, 163, 74, 0.2);
}
.copyright-flow-card.active {
  background: rgba(255, 112, 67, 0.08);
  border-color: rgba(255, 112, 67, 0.28);
  box-shadow: 0 10px 24px rgba(255, 112, 67, 0.08);
}
.copyright-flow-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.copyright-flow-step {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.copyright-flow-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.45;
}
.copyright-flow-owner {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.copyright-flow-desc {
  font-size: 0.82rem;
  color: var(--gray-600);
  line-height: 1.6;
}
.copyright-stage-pill {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.copyright-stage-pill.completed {
  background: rgba(22, 163, 74, 0.1);
  color: var(--green);
}
.copyright-stage-pill.active {
  background: rgba(255, 112, 67, 0.12);
  color: var(--color-accent-text);
}
.copyright-stage-pill.pending {
  background: var(--gray-100);
  color: var(--gray-500);
}

/* =============== MARKETPLACE =============== */
.marketplace-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
}
.filter-panel {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
  padding: 24px;
  height: fit-content;
  position: sticky;
  top: calc(var(--topbar-h) + 32px);
}
.filter-panel h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 20px;
}
.filter-group {
  margin-bottom: 20px;
}
.filter-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.filter-group select,
.filter-group input {
  width: 100%;
}
.search-box {
  position: relative;
  margin-bottom: 24px;
}
.search-box i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}
.search-box input {
  padding-left: 42px;
  width: 100%;
}
.innovation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
.innovation-card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
}
.innovation-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.innovation-card-img {
  height: 160px;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-light));
  display: flex;
  align-items: center;
  justify-content: center;
}
.innovation-card-img i {
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.3);
}
.innovation-card-body {
  padding: 20px;
}
.innovation-card-body :is(h3, h4) {
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.innovation-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.innovation-meta span {
  font-size: 0.8rem;
  color: var(--gray-500);
}
.innovation-card-body p {
  font-size: 0.85rem;
  color: var(--gray-600);
  margin-bottom: 16px;
  line-height: 1.6;
}
.learn-more {
  color: var(--color-accent-text);
  font-weight: 600;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* =============== AUDIT LOG =============== */
.audit-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.audit-filters .form-group {
  margin-bottom: 0;
}
.audit-filters input[type="date"] {
  padding: 8px 12px;
}
.audit-role-badge,
.audit-action-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.audit-role-badge {
  background: rgba(148, 163, 184, 0.14);
  color: var(--gray-600);
}
.audit-badge-blue {
  background: rgba(37, 99, 235, 0.1);
  color: var(--color-info-text);
}
.audit-badge-green {
  background: rgba(34, 197, 94, 0.12);
  color: var(--color-success-text);
}
.audit-badge-orange {
  background: rgba(245, 158, 11, 0.14);
  color: var(--color-warning-text);
}
.audit-badge-purple {
  background: rgba(99, 102, 241, 0.12);
  color: var(--color-info-text);
}
.audit-badge-red {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-error-text);
}
.audit-badge-gray {
  background: rgba(255, 112, 67, 0.12);
  color: #475569;
}

/* =============== MODAL =============== */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  justify-content: center;
  align-items: center;
  padding: 24px;
  backdrop-filter: blur(4px);
}
.modal-overlay.active {
  display: flex;
}
.modal-card {
  background: white;
  border-radius: var(--radius);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  animation: modalIn 0.3s ease;
}
@keyframes modalIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid var(--gray-200);
}
.modal-header h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
}
.modal-close {
  background: none;
  color: var(--gray-400);
  font-size: 1.2rem;
}
.modal-close:hover {
  color: var(--gray-600);
}
.modal-body {
  padding: 24px;
}

.modal-card.form-document-modal {
  max-width: min(1120px, calc(100vw - 32px));
  width: min(1120px, calc(100vw - 32px));
  overflow: hidden;
}

.modal-card.form-document-modal .modal-body {
  padding: 0;
}

.form-document-preview {
  display: grid;
  grid-template-rows: auto minmax(420px, 68vh) auto;
  background: var(--gray-50);
}

.form-document-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: white;
  border-bottom: 1px solid var(--gray-200);
}

.form-document-kicker {
  display: inline-flex;
  margin-bottom: 4px;
  color: var(--color-accent-text);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-document-toolbar h4 {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 900;
  margin: 0;
}

.form-document-toolbar p {
  color: var(--gray-500);
  font-size: 0.84rem;
  line-height: 1.45;
  margin: 4px 0 0;
}

.form-document-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.form-document-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: white;
}

.form-document-fallback {
  padding: 12px 22px;
  border-top: 1px solid var(--gray-200);
  color: var(--gray-500);
  font-size: 0.8rem;
  background: white;
}

@media (max-width: 700px) {
  .form-document-preview {
    grid-template-rows: auto minmax(360px, 62vh) auto;
  }
  .form-document-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .form-document-actions {
    justify-content: stretch;
  }
  .form-document-actions .btn {
    flex: 1 1 150px;
    justify-content: center;
  }
}

/* =============== TOAST =============== */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--navy);
  color: white;
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-xl);
  z-index: 3000;
  transform: translateY(100px);
  opacity: 0;
  transition: var(--transition);
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}
.toast-icon {
  color: var(--green);
  font-size: 1.2rem;
}

/* =============== PROFILE =============== */
.profile-card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
  padding: 36px;
  max-width: 600px;
}
.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray-200);
}
.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

@media (max-width: 1024px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
  .marketplace-layout {
    grid-template-columns: 1fr;
  }
  .filter-panel {
    position: static;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hero-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  #main-content {
    margin-left: 0 !important;
  }
  #dashboard-topbar {
    left: 0 !important;
  }
  .hero {
    padding-top: 116px;
  }
  .hero-title {
    font-size: 2.85rem;
  }
  .hero-content {
    max-width: 100%;
  }
  .hero-system-panel {
    padding: 20px;
  }
  .hero-logos {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    margin-top: 40px;
  }
  .hero-logo-item,
  .hero-logo-item:nth-child(2) {
    height: 80px;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .service-cards {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .mobile-menu-btn {
    display: block;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 18px 36px rgba(255, 112, 67, 0.1);
    border-bottom: 1px solid rgba(255, 112, 67, 0.14);
  }
  .nav-links.open {
    display: flex;
  }
  .table-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .topbar-brand .brand-name {
    display: none;
  }
  .innovation-grid {
    grid-template-columns: 1fr;
  }
  .review-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .hero-title {
    font-size: 2.2rem;
  }
  .hero-cta {
    flex-direction: column;
  }
  .hero-chip-row {
    gap: 8px;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .wizard-step .step-text {
    display: none;
  }
}
/* Table responsive wrapper */
.table-responsive {
  overflow-x: auto;
}

/* =============== TUTORIAL STYLES =============== */
/* =============== UTILITIES =============== */
.hidden {
  display: none !important;
}

/* =============== MARKETPLACE PAGE STYLES =============== */
#page-marketplace {
  background: var(--gray-50);
}
.marketplace-header-bg {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  padding: 80px 0 60px;
  color: white;
  text-align: center;
}
.m-eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-accent-text);
  margin-bottom: 12px;
}
.marketplace-hero h1 {
  font-family: "Fraunces", serif;
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 16px;
}
.marketplace-hero p {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

.marketplace-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  padding: 60px 24px;
}

.marketplace-sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.filter-group label {
  display: block;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--gray-800);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-chip {
  padding: 8px 16px;
  border-radius: 50px;
  background: white;
  border: 1px solid var(--gray-200);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.2s;
}
.filter-chip:hover {
  border-color: var(--gold);
  color: var(--color-accent-text);
}
.filter-chip.active {
  background: linear-gradient(135deg, #FF7F50 0%, #F59E0B 100%);
  border-color: #F59E0B;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(224, 90, 43, 0.28);
}

.sidebar-info-card {
  background: var(--gray-50);
  border: 1px solid rgba(255, 112, 67, 0.2);
  padding: 24px;
  border-radius: 16px;
  margin-top: 20px;
}
.sidebar-info-card i {
  font-size: 1.5rem;
  color: var(--color-accent-text);
  margin-bottom: 12px;
}
.sidebar-info-card p {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.6;
}

.settings-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 18px;
}
.settings-section-tab {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
  color: var(--gray-600);
  padding: 9px 14px;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.settings-section-tab:hover,
.settings-section-tab.active {
  border-color: var(--gold);
  color: var(--navy);
  box-shadow: 0 8px 18px rgba(255, 112, 67, 0.08);
}
.language-settings-panel {
  max-width: 860px;
}
.language-settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 18px;
  align-items: end;
  padding: 10px 0 18px;
  border-bottom: 1px solid var(--gray-100);
}
.language-settings-row label {
  display: block;
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.language-settings-row p,
.settings-note {
  color: var(--gray-500);
  font-size: 0.84rem;
  line-height: 1.55;
}
.language-settings-row select {
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  padding: 11px 12px;
}
.settings-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 0 0;
}
.settings-note i {
  color: var(--color-accent-text);
  margin-top: 3px;
}
.settings-note--muted i {
  color: var(--gray-400);
}
.deadline-panel h3 {
  margin-bottom: 14px;
}
.deadline-panel {
  max-width: 100%;
  overflow: hidden;
}
.deadline-panel,
.deadline-panel * {
  box-sizing: border-box;
}
.deadline-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.deadline-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--gray-300);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}
.deadline-item.soon {
  border-left-color: var(--gold);
}
.deadline-item.urgent,
.deadline-item.overdue {
  border-left-color: var(--red);
  background: rgba(239, 68, 68, 0.04);
}
.deadline-task {
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 800;
}
.deadline-meta {
  color: var(--color-accent-text);
  font-size: 0.78rem;
  font-weight: 800;
  margin-top: 3px;
}
.deadline-note,
.deadline-helper,
.deadline-empty {
  color: var(--gray-500);
  font-size: 0.82rem;
  line-height: 1.5;
  margin-top: 5px;
}
.deadline-empty {
  border: 1px dashed var(--gray-200);
  border-radius: 10px;
  padding: 14px;
}
.deadline-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 16px;
  align-items: stretch;
}
.deadline-create select,
.deadline-create input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 44px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--navy);
  background: #fff;
  font-size: 0.88rem;
  line-height: 1.2;
}
.deadline-create select {
  appearance: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.deadline-create .btn {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  justify-content: center;
  white-space: nowrap;
}
@media (min-width: 1200px) {
  .submission-detail-sidebar .deadline-create {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .submission-detail-sidebar .deadline-create input[type="text"],
  .submission-detail-sidebar .deadline-create .btn {
    grid-column: 1 / -1;
  }
}
body.role-reviewer .reviewer-case-detail-layout .deadline-empty {
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .language-settings-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .settings-section-tab {
    flex: 1 1 140px;
  }
  .deadline-create,
  .completeness-grid {
    grid-template-columns: 1fr;
  }
  .deadline-item {
    flex-direction: column;
  }
}

.marketplace-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.marketplace-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-200);
}
#marketResultsCount {
  font-weight: 700;
  color: var(--gray-500);
  font-size: 0.9rem;
}
.market-view-options {
  display: flex;
  gap: 8px;
}

/* Featured Section on Landing */
#featured-marketplace-section {
  padding: 80px 0 100px;
}

#featured-marketplace-section .container {
  max-width: 1280px;
  margin: 0 auto;
}

#featured-marketplace-section .m-eyebrow {
  display: inline-block;
  color: var(--color-accent-text);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

#featured-marketplace-section .section-title {
  font-family: "Fraunces", serif;
  font-size: 2.5rem;
  color: #1e293b;
  margin-bottom: 12px;
}

#featured-marketplace-section .section-subtitle {
  color: #64748b;
  font-size: 1.1rem;
  max-width: 600px;
}

#featured-marketplace-section .innovation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

#featured-marketplace-section .innovation-card {
  background: white;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#featured-marketplace-section .innovation-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(255, 112, 67, 0.12);
  border-color: rgba(255, 112, 67, 0.2);
}

#featured-marketplace-section .innovation-card-img {
  height: 220px;
  width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}

#featured-marketplace-section .innovation-card-body {
  padding: 28px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

#featured-marketplace-section .innovation-card-body :is(h3, h4) {
  font-family: "Inter", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 12px;
  line-height: 1.4;
}

#featured-marketplace-section .innovation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 0.8rem;
  color: #64748b;
}

#featured-marketplace-section .innovation-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

#featured-marketplace-section .innovation-card-body p {
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
}

#featured-marketplace-section .learn-more {
  margin-top: auto;
  color: var(--color-accent-text);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.2s;
}

#featured-marketplace-section .innovation-card:hover .learn-more {
  gap: 12px;
}

#page-marketplace.container {
  width: min(1440px, calc(100vw - 48px));
  max-width: 1440px;
}

#marketplacePublicContent .page-header {
  margin-bottom: 22px;
}

#marketplacePublicContent .page-header h1 {
  font-size: clamp(2rem, 3vw, 2.65rem);
  line-height: 1.08;
}

#marketplacePublicContent .page-header p {
  max-width: none;
  font-size: 1rem;
}

#marketplacePublicContent .mp-type-filters {
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}

#marketplacePublicContent .mp-type-btn {
  min-height: 46px;
  border-color: #f4d7ca;
  color: #8b6251;
  box-shadow: none;
}

#marketplacePublicContent .mp-type-btn.active {
  border-color: var(--gold);
  color: white;
  box-shadow: 0 12px 24px -12px rgba(255, 112, 67, 0.75);
}

.marketplace-search {
  max-width: 920px;
  margin-bottom: 26px !important;
}

#marketplacePublicContent .marketplace-search input {
  height: 52px;
  border-color: #f2c6b4;
  background: rgba(255, 255, 255, 0.92);
}

#marketplacePublicContent .innovation-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 0;
}

#marketplacePublicContent .innovation-card {
  border-radius: 14px;
  background: white;
  border: 1px solid rgba(255, 112, 67, 0.12);
  box-shadow: 0 16px 38px rgba(98, 49, 27, 0.08);
}

#marketplacePublicContent .innovation-card-img {
  height: auto;
  aspect-ratio: 16 / 9;
}

#marketplacePublicContent .innovation-card-body {
  padding: 22px;
}

#marketplacePublicContent .innovation-card-body :is(h3, h4) {
  color: var(--color-accent-text);
  font-size: 1.08rem;
}

#marketplacePublicContent .innovation-meta {
  gap: 10px;
}

#marketplacePublicContent .innovation-card-body p {
  min-height: 4.8em;
}

#featured-marketplace-section .landing-marketplace-filters {
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}

#featured-marketplace-section .mp-type-btn {
  min-height: 46px;
  border-color: #f4d7ca;
  color: #8b6251;
  box-shadow: none;
}

#featured-marketplace-section .mp-type-btn.active {
  border-color: var(--gold);
  color: white;
  box-shadow: 0 12px 24px -12px rgba(255, 112, 67, 0.75);
}

.landing-marketplace-search {
  max-width: 920px;
  margin-bottom: 26px !important;
}

#featured-marketplace-section .landing-marketplace-search input {
  height: 52px;
  border-color: #f2c6b4;
  background: rgba(255, 255, 255, 0.9);
}

#featured-marketplace-section .innovation-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 0;
}

#featured-marketplace-section .innovation-card {
  border-radius: 14px;
  background: white;
  border: 1px solid rgba(255, 112, 67, 0.12);
  box-shadow: 0 16px 38px rgba(98, 49, 27, 0.08);
}

#featured-marketplace-section .innovation-card-img {
  height: auto;
  aspect-ratio: 16 / 9;
}

#featured-marketplace-section .innovation-card-body {
  padding: 22px;
}

#featured-marketplace-section .innovation-card-body :is(h3, h4) {
  color: var(--color-accent-text);
  font-size: 1.08rem;
}

#featured-marketplace-section .innovation-meta {
  gap: 10px;
}

#featured-marketplace-section .innovation-card-body p {
  min-height: 4.8em;
}

@media (max-width: 1180px) {
  #marketplacePublicContent .innovation-grid,
  #featured-marketplace-section .innovation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #page-marketplace.container {
    width: min(100% - 28px, 720px);
    padding-top: 88px !important;
  }
  #marketplacePublicContent .mp-type-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  #marketplacePublicContent .mp-type-btn {
    flex: 0 0 auto;
    padding: 10px 16px;
  }
  .marketplace-search {
    max-width: none;
  }
  #marketplacePublicContent .innovation-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #featured-marketplace-section {
    padding: 34px 0 64px;
  }
  #featured-marketplace-section .container {
    width: min(100% - 28px, 720px);
  }
  #featured-marketplace-section .landing-marketplace-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  #featured-marketplace-section .mp-type-btn {
    flex: 0 0 auto;
    padding: 10px 16px;
  }
  .landing-marketplace-search {
    max-width: none;
  }
  #featured-marketplace-section .innovation-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.section-header-inline {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
}

@media (max-width: 1024px) {
  .marketplace-container {
    grid-template-columns: 1fr;
  }
  .marketplace-sidebar {
    order: 2;
  }
  .marketplace-main {
    order: 1;
  }
}

@media (max-width: 768px) {
  .section-header-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .marketplace-hero h1 {
    font-size: 2.2rem;
  }
}

/* List View Mode */
.innovation-grid.list-mode {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
}
.innovation-list-item {
  display: grid;
  grid-template-columns: 70px 2fr 1.2fr 1fr auto;
  align-items: center;
  gap: 24px;
  background: white;
  padding: 18px 24px;
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  transition: all 0.2s ease;
  cursor: pointer;
}
.innovation-list-item:hover {
  transform: translateX(8px);
  border-color: var(--gold);
  background: #f7f8fa;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.list-img-box {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--gray-400);
  overflow: hidden;
}
.list-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.list-title h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.list-inventor {
  font-size: 0.85rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.list-college {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-600);
}

/* =============== CASE TRACKING STYLES =============== */
.case-card {
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
}
.case-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}
.case-card.needs-action {
  border-left: 4px solid var(--red) !important;
}
.case-card-header:hover {
  background: var(--gray-50) !important;
}
.chevron-icon {
  transition: transform 0.3s ease;
  color: var(--gray-400);
}

.case-detail-panel {
  padding: 0 24px 24px;
  background: white;
  animation: slideDown 0.3s ease-out;
}
.case-detail-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 720px) {
  .case-detail-grid { grid-template-columns: 1fr; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.tracking-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--gray-50);
  border-radius: 12px;
  margin-top: 16px;
}
.tracking-step {
  display: flex;
  gap: 16px;
  position: relative;
}
.tracking-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: -16px;
  width: 2px;
  background: var(--gray-200);
}
.step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--gray-200);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gray-400);
}
.tracking-step.completed .step-dot {
  background: var(--green);
  border-color: var(--green);
  color: white;
}
.tracking-step.current .step-dot {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--color-on-primary);
  box-shadow: 0 0 0 4px rgba(255, 112, 67, 0.2);
}

.tutorial-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tutorial-step {
  display: flex;
  gap: 16px;
  padding: 18px;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border-left: 4px solid transparent;
  transition: var(--transition);
}
.tutorial-step:hover {
  background: rgba(255, 112, 67, 0.06);
  transform: translateX(4px);
  border-left-color: var(--gold);
}
.step-badge {
  min-width: 56px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--navy-dark);
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
}
.tutorial-step h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.tutorial-step p {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.6;
}

/* =============== DOCUMENT CHECKLIST =============== */
.doc-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.doc-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
}
.doc-item i {
  margin-top: 2px;
  font-size: 1.1rem;
}
.doc-item strong {
  display: block;
  font-size: 0.9rem;
  color: var(--navy);
  margin-bottom: 2px;
}
.doc-item p {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin: 0;
}

/* =============== FAQ ACCORDION =============== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  border: 1.5px solid var(--color-tertiary);
  border-radius: 12px;
  overflow: hidden;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}
.faq-item:hover {
  border-color: var(--color-tertiary);
  box-shadow: 0 4px 12px rgba(248, 161, 112, 0.1);
}
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-accent-text);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: "Inter", sans-serif;
}
.faq-q i {
  transition: transform 0.3s ease;
  color: var(--color-accent-text);
  font-size: 0.9rem;
}
.faq-item.open {
  border-color: var(--color-tertiary);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.6;
  padding: 0 24px;
  opacity: 0;
}
.faq-item.open .faq-a {
  max-height: 1000px;
  padding: 0 24px 24px;
  opacity: 1;
}
.faq-item.open .faq-q i {
  transform: rotate(180deg);
}

.help-guidelines-section {
  margin-bottom: 30px;
  padding: 24px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.help-guidelines-heading {
  margin-bottom: 22px;
}
.help-guidelines-heading h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 8px;
  color: var(--navy);
  font-size: 1.45rem;
}
.help-guidelines-heading h2 i {
  color: var(--color-accent-text);
}
.help-guidelines-heading p {
  margin: 0;
  color: var(--gray-500);
  line-height: 1.6;
}
.help-guidelines-list {
  display: grid;
  gap: 12px;
}
.help-guideline-toggle span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.help-guideline-toggle span i {
  width: 18px;
  text-align: center;
  transform: none !important;
}
.help-guideline-body {
  color: var(--gray-600);
}
.help-guideline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.help-guideline-block {
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--gray-50);
}
.help-guideline-block strong {
  display: block;
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 0.88rem;
}
.help-guideline-block p,
.help-guideline-block ul {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.92rem;
  line-height: 1.6;
}
.help-guideline-block ul {
  padding-left: 18px;
}
.help-guideline-block li + li {
  margin-top: 6px;
}
@media (max-width: 720px) {
  .help-guideline-grid {
    grid-template-columns: 1fr;
  }
}

/* =============== DASHBOARD GUIDE CARDS =============== */
.guide-section {
  margin-bottom: 32px;
}
.section-header {
  margin-bottom: 20px;
}
.section-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-header p {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-top: 4px;
}
.guide-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}
.guide-card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
  padding: 24px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.guide-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gray-200);
  transition: var(--transition);
}
.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}
.guide-card:hover::before {
  background: var(--gold);
}
.guide-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: white;
  margin-bottom: 16px;
}
.guide-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.guide-card > p {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 14px;
}
.guide-docs {
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.guide-docs strong {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  display: block;
  margin-bottom: 6px;
}
.guide-docs ul {
  list-style: none;
  padding: 0;
}
.guide-docs li {
  font-size: 0.8rem;
  color: var(--gray-600);
  padding: 3px 0;
  padding-left: 16px;
  position: relative;
}
.guide-docs li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
  font-size: 0.7rem;
}
.guide-link {
  color: var(--color-accent-text);
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* =============== FORM GUIDE PANEL =============== */
.form-guide-panel {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.form-guide-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  cursor: pointer;
  transition: var(--transition);
}
.form-guide-toggle:hover {
  background: var(--gray-50);
}
.form-guide-toggle span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--gray-700);
}
.form-guide-toggle > i {
  color: var(--gray-400);
  font-size: 0.8rem;
  transition: var(--transition);
}
.form-guide-panel.open .form-guide-toggle > i {
  transform: rotate(180deg);
  color: var(--color-accent-text);
}
.form-guide-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.form-guide-panel.open .form-guide-body {
  max-height: 600px;
}
.form-guide-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 0 24px 24px;
}
.form-guide-cols h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.guide-steps-list {
  padding-left: 20px;
}
.guide-steps-list li {
  font-size: 0.82rem;
  color: var(--gray-600);
  padding: 5px 0;
  line-height: 1.5;
}
.guide-docs-list {
  list-style: none;
  padding: 0;
}
.guide-docs-list li {
  font-size: 0.82rem;
  color: var(--gray-600);
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 768px) {
  .form-guide-cols {
    grid-template-columns: 1fr;
  }
  .guide-cards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 992px) {
  .innovation-list-item {
    grid-template-columns: 60px 1fr 1fr;
  }
  .list-college, .list-tags {
    display: none;
  }
}

/* =============== CASE TRACKING STYLES =============== */
.badge-utility {
  background: rgba(99, 102, 241, 0.1);
  color: var(--color-info-text);
  border: 1px solid rgba(99, 102, 241, 0.2);
}
.badge-industrial {
  background: rgba(236, 72, 153, 0.1);
  color: #be185d;
  border: 1px solid rgba(236, 72, 153, 0.2);
}
.badge-patent {
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-info-text);
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.badge-trademark {
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-warning-text);
  border: 1px solid rgba(245, 158, 11, 0.24);
}

.badge-copyright {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success-text);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* =============== FINAL POLISH =============== */
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page {
  flex: 1;
  display: none;
}
.page.active {
  display: block;
  animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============== INNOVATION MARKETPLACE CARDS =============== */
.innovation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 30px;
  margin-top: 20px;
}

.innovation-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.innovation-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(255, 112, 67, 0.12);
  border-color: rgba(255, 112, 67, 0.3);
}

.innovation-card-img {
  height: 200px;
  width: 100%;
  background-color: var(--gray-100);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.innovation-card-img i {
  font-size: 3.5rem;
  color: var(--gray-300);
  transition: all 0.4s ease;
}

.innovation-card:hover .innovation-card-img i {
  transform: scale(1.1);
  color: var(--navy);
}

.innovation-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.innovation-card-body :is(h3, h4) {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 12px;
  line-height: 1.4;
  /* Multi-line ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.innovation-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 0.8rem;
  color: var(--gray-500);
  font-weight: 500;
}

.innovation-meta .badge {
  padding: 3px 10px;
  font-size: 0.7rem;
}

.innovation-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.innovation-card-body p {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =============== PROFESSIONAL IP DETAIL LAYOUT =============== */
.modal-card.xl {
  max-width: 1100px;
  width: 95%;
  padding: 0;
  overflow: hidden;
}

/* The Upload Forms screen packs a title field, an application-form card, and
   a full checklist of required-document cards -- too much content for the
   default 600px dialog (it was scrolling inside a tiny box). Widen it like
   the other content-heavy modals above, and lay the document cards out in a
   responsive grid so the extra width is put to use instead of leaving a
   single narrow column stranded in the middle. */
.modal-card.upload-forms-modal {
  width: min(920px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
}

.upload-forms-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.upload-forms-doc-grid .upload-forms-doc-card {
  margin-bottom: 0;
}

.modal-card.marketplace-detail-modal {
  width: min(1040px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(88vh, 880px);
  overflow: hidden;
}

.modal-card.marketplace-detail-modal .modal-header {
  padding: 16px 20px;
  background: white;
}

.modal-card.marketplace-detail-modal .modal-body {
  padding: 0;
  overflow: hidden;
}

.ip-detail-scroll {
  max-height: calc(min(88vh, 880px) - 58px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 32px;
}

.ip-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  min-width: 0;
}

.ip-detail-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.ip-detail-header-group {
  margin-bottom: 10px;
}

.ip-detail-title-large {
  max-width: 760px;
  font-size: clamp(1.65rem, 4.8vw, 2.55rem);
  font-weight: 900;
  color: var(--color-accent-text);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 16px;
  overflow-wrap: anywhere;
}

.ip-detail-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  min-width: 0;
}

.ip-detail-subtitle {
  font-size: 0.9rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 24px;
}

.ip-detail-subtitle span {
  color: var(--color-accent-text);
}

.ip-detail-section-label {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-accent-text);
  margin-bottom: 12px;
  display: block;
}

.ip-detail-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #444;
}

.ip-detail-features-list {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ip-detail-features-list li {
  position: relative;
  padding-left: 0;
  line-height: 1.6;
  color: #444;
}

.ip-detail-side {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.ip-product-visual {
  width: 100%;
  max-height: 360px;
  aspect-ratio: 16/11;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* Decorative shield mask for image as seen in reference */
.ip-product-visual::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.ip-visual-caption {
  text-align: center;
  font-size: 0.9rem;
  color: var(--gray-500);
  font-weight: 700;
  margin: -4px 0 0;
  overflow-wrap: anywhere;
}

.inquiry-box {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 22px;
  min-width: 0;
}

.inquiry-box h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}

.inquiry-copy {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 20px;
  line-height: 1.6;
}

.inquiry-contact {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
  min-width: 0;
}

.inquiry-contact span {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-400);
  font-weight: 700;
  text-transform: uppercase;
}

.inquiry-contact div {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
  margin-top: 4px;
}

.inquiry-contact a {
  display: inline-block;
  max-width: 100%;
  font-size: 0.85rem;
  color: var(--color-accent-text);
  overflow-wrap: anywhere;
}

.marketplace-detail-modal .interest-btn {
  width: 100%;
  justify-content: center;
  min-width: 0;
  white-space: normal;
  text-align: center;
}

.inquiry-box .btn-contact {
  width: 100%;
  padding: 10px;
  border: 1px solid #e66b3f;
  background: transparent;
  color: var(--color-accent-text);
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.inquiry-box .btn-contact:hover {
  background: rgba(255, 112, 67, 0.05);
}

.modal-card.marketplace-inquiry-modal {
  max-width: 760px;
  border-top: 6px solid var(--gold);
}
.marketplace-inquiry-form {
  display: grid;
  gap: 18px;
}
.marketplace-inquiry-context {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 112, 67, 0.16);
  background: linear-gradient(135deg, #fff8f4, #ffffff);
}
.marketplace-inquiry-context span {
  color: var(--color-accent-text);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}
.marketplace-inquiry-context strong {
  color: var(--navy);
  font-size: 1rem;
}
.marketplace-inquiry-context small {
  color: var(--gray-500);
  font-weight: 700;
}
.marketplace-inquiry-form .form-group {
  margin-bottom: 0;
}
.marketplace-inquiry-form label {
  color: var(--color-info-text);
  font-weight: 800;
  font-size: 0.9rem;
}
.marketplace-inquiry-form input,
.marketplace-inquiry-form textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #e8eefc;
  color: var(--color-info-text);
  padding: 16px 18px;
  font: inherit;
  font-size: 0.96rem;
  outline: none;
  transition: var(--transition);
}
.marketplace-inquiry-form input {
  min-height: 58px;
}
.marketplace-inquiry-form textarea {
  min-height: 132px;
  resize: vertical;
}
.marketplace-inquiry-form input:focus,
.marketplace-inquiry-form textarea:focus {
  background: white;
  border-color: #cbd5e1;
  box-shadow: 0 0 0 4px rgba(255, 112, 67, 0.12);
  color: var(--navy);
}
.marketplace-inquiry-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-footer-contact {
  margin-top: 40px;
  font-size: 0.85rem;
  color: #555;
  border-top: 1px solid var(--gray-100);
  padding-top: 24px;
}

.detail-footer-contact a {
  color: var(--color-accent-text);
  text-decoration: none;
  font-weight: 600;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-200);
}
.dot.active {
  background: #e66b3f;
}

@media (min-width: 1180px) {
  .ip-detail-scroll {
    padding: 40px;
  }
  .ip-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    gap: 40px;
  }
  .ip-detail-title-large {
    font-size: clamp(2rem, 3.4vw, 2.65rem);
  }
  .ip-product-visual {
    max-height: none;
  }
}

@media (max-width: 991px) {
  .ip-detail-grid {
    grid-template-columns: 1fr;
  }
  .ip-detail-scroll {
    padding: 24px;
  }
  .ip-detail-title-large {
    font-size: 1.7rem;
  }
  .ip-product-visual {
    max-height: 280px;
  }
}

@media (max-width: 560px) {
  .modal-overlay.marketplace-detail-overlay {
    padding: 10px;
  }
  .modal-card.marketplace-detail-modal {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }
  .ip-detail-scroll {
    max-height: calc(100vh - 80px);
    padding: 18px;
  }
  .ip-detail-main {
    gap: 24px;
  }
  .inquiry-box {
    padding: 18px;
  }
}

.learn-more {
  margin-top: auto;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.innovation-card:hover .learn-more {
  color: var(--color-accent-text);
  gap: 12px;
}

/* Animations for grid items */
.innovation-card {
  animation: slideUpFade 0.6s ease-out both;
}

.innovation-card:nth-child(1) {
  animation-delay: 0.1s;
}
.innovation-card:nth-child(2) {
  animation-delay: 0.2s;
}
.innovation-card:nth-child(3) {
  animation-delay: 0.3s;
}
.innovation-card:nth-child(4) {
  animation-delay: 0.4s;
}
.innovation-card:nth-child(5) {
  animation-delay: 0.5s;
}
.innovation-card:nth-child(6) {
  animation-delay: 0.6s;
}

/* =============== NOTIFICATION BELL =============== */
.notif-bell-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600);
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--transition);
  background: transparent;
}
.notif-bell-wrap:hover,
.notif-bell-wrap.active {
  background: rgba(255, 112, 67, 0.1);
  color: var(--navy-dark);
}
.notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  background: var(--color-error-text);
  color: white;
  border-radius: 50px;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid white;
  pointer-events: none;
}
.notif-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: -10px;
  width: 340px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 1500;
  overflow: hidden;
  animation: modalIn 0.2s ease;
}
.notif-dropdown.open {
  display: block;
}
/* Phones: the panel is a fixed 340px anchored to the bell at right:-10px, so
   on a 320px screen it hangs ~28px past the right edge and the notification
   text is clipped -- measured at 320px and 390px in a real browser.
   Pinning it to both edges makes the width follow the viewport instead of the
   bell, so it fits at any width. `position: fixed` is deliberate: the bell
   sits in a sticky header, and an absolutely positioned panel would inherit
   that offset and drift.
   Height is capped so a long list scrolls inside the panel rather than running
   off the bottom of the screen with no way back. */
@media (max-width: 480px) {
  .notif-dropdown {
    position: fixed;
    top: 64px;
    left: 10px;
    right: 10px;
    width: auto;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--gray-50);
}

/* =============== PROFILE DROPDOWN =============== */
.topbar-user-wrap {
  position: relative;
}

.profile-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 240px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  z-index: 2000;
  animation: modalIn 0.25s ease;
}

.profile-dropdown.open {
  display: block;
}

.profile-dropdown-header {
  padding: 16px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar.small {
  width: 36px;
  height: 36px;
  font-size: 0.9rem;
}

.user-meta {
  display: flex;
  flex-direction: column;
}

.user-full-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy-dark);
}

.user-role-label {
  font-size: 0.72rem;
  color: var(--color-accent-text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-dropdown-body {
  padding: 8px 0;
}

body.role-superadmin [data-applicant-only="true"],
body.role-admin [data-applicant-only="true"],
body.role-reviewer [data-applicant-only="true"] {
  display: none !important;
}

/* Staff portal accents: all primary actions remain PSU coral. The secondary
   colour identifies the work context without changing status semantics. */
body.role-reviewer {
  --navy: #176b68;
  --navy-dark: #115552;
  --navy-light: #e3f2f1;
  --navy-subtle: #d2e9e7;
}

body.role-admin,
body.role-superadmin {
  --navy: #263b4d;
  --navy-dark: #1b2d3d;
  --navy-light: #eaf0f5;
  --navy-subtle: #dce7ef;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: var(--gray-700);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: all 0.2s;
}

.dropdown-item:hover {
  background: rgba(255, 112, 67, 0.06);
  color: var(--color-accent-text);
}

.dropdown-item i {
  font-size: 1.05rem;
  width: 20px;
  text-align: center;
  color: var(--gray-400);
}

.dropdown-item:hover i {
  color: var(--color-accent-text);
}

.dropdown-divider {
  height: 1px;
  background: var(--gray-100);
  margin: 6px 0;
}

.logout-item {
  color: var(--color-error-text) !important;
}

.logout-item:hover {
  background: rgba(239, 68, 68, 0.06);
}

.logout-item i {
  color: var(--color-error-text);
}

/* =============== LOGIN PAGE FIX =============== */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  padding: 24px;
}

/* =============== IP TUTORIAL RESPONSIVE =============== */
@media (max-width: 900px) {
  .notif-dropdown {
    position: fixed !important;
    top: calc(var(--topbar-h, 60px) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100vh - var(--topbar-h, 60px) - 24px) !important;
    max-height: calc(100dvh - var(--topbar-h, 60px) - 24px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 10000 !important;
  }
}
@media (max-width: 768px) {
  /* IP Tutorial grid → single column on mobile */
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* =============== PROPOSAL BLUEPRINT =============== */
.proposal-band {
  padding-top: 28px;
  padding-bottom: 28px;
}
.proposal-band-secondary {
  padding-top: 0;
  padding-bottom: 90px;
}
/* Every section the landing nav jumps to lands below the fixed nav. */
#project-overview-section,
#proposal-foundation-section,
#announcements-landing-section,
#ip-services-landing-section,
#featured-marketplace-section {
  scroll-margin-top: calc(var(--public-nav-h, 72px) + 28px);
}
.proposal-shell {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.proposal-hero {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}
.proposal-hero.project-page {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98),
    rgba(226, 232, 240, 0.82)
  );
}
.proposal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-dark);
  margin-bottom: 14px;
}
.proposal-heading {
  font-size: 2rem;
  line-height: 1.15;
  color: var(--gray-800);
  margin-bottom: 12px;
}
.proposal-copy {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--gray-600);
}
.proposal-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.proposal-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 112, 67, 0.12);
  color: var(--gray-700);
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid rgba(255, 112, 67, 0.18);
}
.proposal-grid {
  display: grid;
  gap: 24px;
}
.proposal-grid-1 {
  grid-template-columns: 1fr;
}
.proposal-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.proposal-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.proposal-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.proposal-card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  padding: 28px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.05);
}
.proposal-card.soft {
  background: rgba(226, 232, 240, 0.34);
  border-color: rgba(255, 112, 67, 0.14);
}
.proposal-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--gray-800);
  margin-bottom: 18px;
}
.proposal-section-title i {
  color: var(--navy-dark);
}
.proposal-compare-table {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.proposal-compare-row {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 14px;
}
.proposal-compare-cell {
  border-radius: 16px;
  padding: 18px;
}
.proposal-compare-cell.manual {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--gray-200);
}
.proposal-compare-cell.system {
  background: rgba(255, 112, 67, 0.08);
  border: 1px solid rgba(255, 112, 67, 0.18);
}
.proposal-compare-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.proposal-compare-cell.manual .proposal-compare-label {
  color: var(--gray-500);
}
.proposal-compare-cell.system .proposal-compare-label {
  color: var(--navy-dark);
}
.proposal-compare-cell p {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--gray-700);
}
.proposal-pillar-card,
.proposal-mini-card,
.proposal-evidence-card,
.proposal-step {
  border-radius: 18px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--gray-200);
}
.proposal-pillar-card i,
.proposal-mini-card i,
.proposal-evidence-card i {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--navy-dark), #e66b3f);
  color: var(--color-on-primary);
  font-size: 1rem;
  margin-bottom: 14px;
}
.proposal-pillar-card h4,
.proposal-mini-card h4,
.proposal-evidence-card h4,
.proposal-step h4 {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--gray-800);
  margin-bottom: 8px;
}
.proposal-pillar-card p,
.proposal-mini-card p,
.proposal-evidence-card p,
.proposal-step p {
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--gray-600);
}
.proposal-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.proposal-step {
  position: relative;
  padding-top: 54px;
}
.proposal-step-index {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy-dark);
  color: white;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.proposal-bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}
.proposal-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--gray-700);
  line-height: 1.7;
}
.proposal-bullet-list i {
  color: var(--navy-dark);
  margin-top: 4px;
}
.proposal-evidence-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.proposal-evidence-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.proposal-column-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-dark);
}
.proposal-evidence-card span {
  display: inline-flex;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
@media (max-width: 1100px) {
  .proposal-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .proposal-grid-2,
  .proposal-grid-3,
  .proposal-grid-4,
  .proposal-step-grid,
  .proposal-evidence-columns,
  .proposal-compare-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .proposal-hero,
  .proposal-card {
    padding: 22px;
    border-radius: 18px;
  }
  .proposal-heading {
    font-size: 1.55rem;
  }
  .proposal-band {
    padding-top: 18px;
  }
  .proposal-band-secondary {
    padding-bottom: 72px;
  }
}

/* My Cases - Modern Dashboard Styles */
.user-controls-bar {
  background: white;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--gray-100);
}

.search-box {
  position: relative;
  margin-bottom: 0 !important; /* Remove conflicting margin */
}
.search-box i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
}
.search-box input {
  padding-left: 42px !important;
  height: 46px;
  border-radius: 10px;
  border: 1.5px solid var(--gray-200);
  background: white;
  transition: all 0.3s ease;
  width: 100%;
}
.search-box input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(255, 112, 67, 0.1);
  outline: none;
}

.filter-select {
  height: 46px;
  border-radius: 10px;
  border: 1.5px solid var(--gray-200);
  padding: 0 16px;
  font-weight: 600;
  color: var(--navy);
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 160px;
}
.filter-select:focus {
  border-color: var(--gold);
  outline: none;
}

.filter-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  background: white;
  color: var(--gray-600);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-btn.active,
.filter-btn:hover {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}

.case-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.tracking-timeline.horizontal {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;
  margin: 30px 0;
  position: relative;
  z-index: 1;
}

.tracking-timeline.horizontal::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: var(--gray-200);
  z-index: -1;
}

.tracking-timeline.horizontal .tracking-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
}

.tracking-timeline.horizontal .tracking-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  border: 4px solid var(--gray-200);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tracking-timeline.horizontal .tracking-step.completed .tracking-dot {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--color-on-primary);
}

.tracking-timeline.horizontal .tracking-step.active .tracking-dot {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(255, 112, 67, 0.2);
  transform: scale(1.2);
}

.tracking-timeline.horizontal .tracking-label {
  font-size: 0.65rem;
  text-align: center;
  max-width: 80px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.3;
}

.tracking-timeline.horizontal .tracking-step.active .tracking-label {
  color: var(--color-accent-text);
  font-weight: 700;
}

.case-card.needs-action {
  border-left: 4px solid var(--red-500) !important;
}

@media (max-width: 768px) {
  .tracking-timeline.horizontal {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .tracking-timeline.horizontal::before {
    display: none;
  }
  .tracking-timeline.horizontal .tracking-step {
    flex-direction: row;
    gap: 12px;
    align-items: center;
  }
  .tracking-timeline.horizontal .tracking-label {
    max-width: none;
    text-align: left;
  }
}

/* Project Overview (About) Styles */
.project-overview-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.overview-content .section-desc {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--gray-600);
  margin-bottom: 32px;
}
.overview-features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.overview-feature {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.feature-icon {
  width: 50px;
  height: 50px;
  background: var(--gray-100);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  font-size: 1.4rem;
  flex-shrink: 0;
  border: 1px solid var(--gray-200);
  transition: all 0.3s ease;
}
.overview-feature:hover .feature-icon {
  background: var(--navy);
  color: white;
  transform: scale(1.1);
}
.overview-feature :is(h3, h4) {
  font-family: "Fraunces", serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.overview-feature p {
  color: var(--gray-500);
  line-height: 1.5;
  font-size: 0.95rem;
}

.overview-card-stack {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stack-card {
  position: absolute;
  background: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 240px;
  border: 1px solid var(--gray-100);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.stack-card i {
  font-size: 2rem;
  color: var(--color-accent-text);
}
.stack-card span {
  font-weight: 700;
  color: var(--navy);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card-1 { transform: rotate(-5deg) translateX(-20px) translateY(-20px); z-index: 1; opacity: 0.6; }
.card-2 { transform: rotate(3deg) translateX(20px) translateY(10px); z-index: 2; opacity: 0.8; }
.card-3 { transform: rotate(0deg); z-index: 3; background: var(--navy); color: white; border-color: var(--navy); box-shadow: 0 20px 40px rgba(30, 41, 59, 0.2); }
.card-3 i { color: var(--color-accent-text); }
.card-3 span { color: white; }

.overview-image-wrap:hover .card-1 { transform: rotate(-10deg) translateX(-110px) translateY(-50px); opacity: 1; }
.overview-image-wrap:hover .card-2 { transform: rotate(8deg) translateX(110px) translateY(-30px); opacity: 1; }
.overview-image-wrap:hover .card-3 { transform: scale(1.05); }

@media (max-width: 992px) {
  .project-overview-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .overview-card-stack {
    height: 300px;
  }
  .stack-card {
    width: 200px;
  }
}

/* FAQ Page Padding Fix */

#page-faq {
  padding-top: calc(var(--public-nav-h, 72px) + 28px) !important;
  min-height: calc(100vh - var(--public-nav-h, 72px));
}

/* Announcements Landing Styles */
.announcement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 1024px) {
  .announcement-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .announcement-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.announcement-card {
  background: white;
  border-radius: 20px;
  padding: 30px;
  border: 1px solid var(--gray-100);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.announcement-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(255, 112, 67, 0.12);
  border-color: var(--gold-light);
}
.ann-badge-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.ann-badge {
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ann-badge.news { background: var(--blue-bg); color: var(--blue); }
.ann-badge.event { background: var(--indigo-bg); color: var(--indigo); }
.ann-badge.alert { background: var(--red-bg); color: var(--red); }
/* Announcement category badges (see announcementBadgeClass in app.js) */
.ann-badge.general { background: var(--blue-bg); color: var(--blue); }
.ann-badge.system { background: var(--indigo-bg); color: var(--indigo); }
.ann-badge.reminder { background: var(--gold-light); color: var(--color-accent-text); }
.ann-badge.maintenance { background: var(--red-bg); color: var(--red); }
.ann-badge.guideline { background: var(--green-bg); color: var(--green); }

.ann-date {
  font-size: 0.8rem;
  color: var(--gray-400);
  font-weight: 600;
}
.ann-title {
  font-family: "Inter", "Manrope", system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.4;
  /* Clamped for the same reason .ann-content already is. The body text was
     held to three lines but the title was not, so a one-line title beside a
     two-line one made the two cards' text blocks different heights and their
     "View Details" links sat at different heights across the row. Two lines
     keeps the row even; the full title is still shown in the detail view. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ann-content {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ann-footer {
  margin-top: auto;
}
.ann-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-accent-text);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s ease;
  /* Measured at 23px tall in a real browser, which is 1px under the WCAG 2.5.8
     (AA) minimum target of 24x24. It is a standalone card action rather than a
     link inside a sentence, so the inline exemption does not apply to it. The
     padding lifts it clear of the floor without changing the card's layout the
     way a 44px min-height would. */
  padding: 8px 0;
  min-height: 24px;
}
.announcement-card:hover .ann-link {
  gap: 12px;
}

/* Admin Specific Overrides/Adds */
.action-btns {
  display: flex;
  gap: 8px;
}

.pulse-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 0 rgba(255, 112, 67, 0.4);
  animation: pulseGold 2s infinite;
}
@keyframes pulseGold {
  0% { box-shadow: 0 0 0 0 rgba(255, 112, 67, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255, 112, 67, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 112, 67, 0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Modal form tuning */
#announcementForm textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  resize: vertical;
  font-family: inherit;
}
#announcementForm select {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
}

/* Reusable Outline Navy Button */
.btn-outline-navy {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-outline-navy:hover {
  background: var(--navy);
  color: white;
}

/* Public Announcements Filter Bar */
.announcement-filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 28px;
}

.ann-filter-pill {
  background: white;
  color: var(--gray-700);
  border: 1.5px solid var(--gray-200);
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}

.ann-filter-pill:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--gray-50);
}

.ann-filter-pill.active {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
  box-shadow: 0 4px 12px rgba(10, 25, 47, 0.15);
}

.ann-unit {
  font-size: 0.82rem;
  color: var(--gray-500);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.ann-unit i {
  color: var(--color-accent-text);
  font-size: 0.85rem;
}

/* Five IP Services Landing Section */
.ip-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 36px;
}

.ip-service-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ip-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(10, 25, 47, 0.08);
  border-color: var(--gold);
}

.ip-service-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 18px;
  background: var(--gray-50);
  color: var(--navy);
  border: 1px solid var(--gray-100);
}

.ip-service-card.patent .ip-service-icon { background: rgba(37, 99, 235, 0.1); color: var(--color-info-text); }
.ip-service-card.utility .ip-service-icon { background: rgba(147, 51, 234, 0.1); color: var(--color-info-text); }
.ip-service-card.industrial .ip-service-icon { background: rgba(236, 72, 153, 0.1); color: #ec4899; }
.ip-service-card.trademark .ip-service-icon { background: rgba(217, 119, 6, 0.1); color: var(--color-warning-text); }
.ip-service-card.copyright .ip-service-icon { background: rgba(16, 185, 129, 0.1); color: var(--color-success-text); }

.ip-service-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}

.ip-service-desc {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.55;
  margin-bottom: 16px;
}

.ip-service-reqs {
  margin-top: auto;
  margin-bottom: 20px;
  padding-top: 14px;
  border-top: 1px dashed var(--gray-200);
}

.ip-service-req-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.ip-service-req-items {
  font-size: 0.82rem;
  color: var(--gray-700);
  line-height: 1.45;
}

.ip-service-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.ip-service-actions .btn-apply {
  flex: 1;
  text-align: center;
  padding: 8px 14px;
  font-size: 0.85rem;
}

.ip-service-actions .link-guide {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent-text);
  white-space: nowrap;
}
.ip-service-actions .link-guide:hover {
  text-decoration: underline;
}

/* IP Protection Journey Visual Stepper */
.ip-journey-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}

@media (max-width: 992px) {
  .ip-journey-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .ip-journey-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.ip-journey-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 18px;
  padding: 28px 22px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.ip-journey-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}

.ip-journey-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.ip-journey-step-num {
  font-size: 0.82rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 50px;
  background: var(--navy);
  color: white;
  letter-spacing: 0.5px;
}

.ip-journey-icon {
  font-size: 1.35rem;
  color: var(--color-accent-text);
}

.ip-journey-title {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.35;
}

.ip-journey-desc {
  font-size: 0.88rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}


/* Cancellation Reason Select (Shopee Style) */
.reason-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
}
.reason-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--gray-50);
  border: 2px solid var(--gray-100);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.reason-option:hover {
  background: rgba(255, 112, 67, 0.05);
  border-color: var(--gold-light);
}
.reason-option.selected {
  background: white;
  border-color: var(--gold);
  box-shadow: 0 4px 15px rgba(255, 112, 67, 0.12);
}
.reason-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  background: white;
  position: relative;
  transition: all 0.2s ease;
}
.reason-option.selected .reason-dot {
  border-color: var(--gold);
  background: var(--gold);
}
.reason-option.selected .reason-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
}
.reason-text {
  font-weight: 600;
  color: var(--navy);
  font-size: 0.95rem;
}


/* =============== PASSWORD RECOVERY & MOCK EMAIL =============== */
.mock-email {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 320px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  display: flex;
  padding: 16px;
  gap: 16px;
  cursor: pointer;
  z-index: 9999;
  border: 1px solid var(--gray-200);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.mock-email:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}
.mock-email .email-icon {
  width: 44px;
  height: 44px;
  background: var(--gold-light);
  color: var(--color-accent-text);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.mock-email .email-content {
  flex: 1;
}
.mock-email .email-sender {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent-text);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mock-email .email-subject {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}
.mock-email .email-preview {
  font-size: 0.75rem;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.mock-email .email-close {
  background: transparent;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  padding: 4px;
  align-self: flex-start;
  transition: color 0.2s;
}
.mock-email .email-close:hover {
  color: var(--red);
}

@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(120%); opacity: 0; }
}

.mock-email.slide-in {
  animation: slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mock-email.slide-out {
  animation: slideOutRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Strength Meter */
.password-strength {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.strength-meter {
  flex: 1;
  height: 6px;
  background: var(--gray-100);
  border-radius: 10px;
  overflow: hidden;
}
.strength-bar {
  height: 100%;
  width: 0;
  background: var(--red);
  transition: width 0.3s ease, background 0.3s ease;
}
.strength-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-500);
  min-width: 45px;
  text-align: right;
}
.password-rules {
  display: block;
  margin-top: 6px;
  color: var(--gray-500);
  font-size: 0.78rem;
  line-height: 1.45;
}

.email-modal {
  max-width: 500px !important;
  border-top: 6px solid var(--gold);
}
.email-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.email-modal-title {
  font-weight: 800;
  color: var(--navy);
  font-size: 1.1rem;
}


/* Profile Submenu Styles */
.has-submenu { position: relative; cursor: pointer; }
.dropdown-item-main { display: flex; align-items: center; gap: 12px; width: 100%; }
.submenu-arrow { margin-left: auto; font-size: 0.7rem !important; opacity: 0.5; transition: transform 0.2s; }
.has-submenu:hover .submenu-arrow { transform: translateX(3px); opacity: 1; }
.profile-submenu { position: absolute; top: 0; right: calc(100% - 5px); width: 200px; background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04); padding: 8px 0; display: none; z-index: 2100; }
.profile-submenu::before { content: ""; position: absolute; top: 0; right: -15px; width: 20px; height: 100%; }
.has-submenu:hover .profile-submenu { display: block; }
.submenu-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--gray-700); text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: all 0.2s; }
.submenu-item:hover { background: rgba(255, 112, 67, 0.06); color: var(--color-accent-text); }
.submenu-item i { font-size: 0.95rem; width: 18px; text-align: center; color: var(--gray-400); }
.submenu-item:hover i { color: var(--color-accent-text); }

.mp-type-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  justify-content: center;
}
.mp-type-btn {
  padding: 12px 24px;
  border-radius: 100px;
  border: 2px solid var(--gray-100);
  background: white;
  color: var(--gray-500);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mp-type-btn i {
  font-size: 1rem;
  opacity: 0.7;
}
.mp-type-btn:hover {
  border-color: var(--gold-light);
  color: var(--color-accent-text);
  transform: translateY(-2px);
  background: var(--gray-50);
}
.mp-type-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--color-on-primary);
  box-shadow: 0 10px 20px -5px rgba(212, 175, 55, 0.4);
}
.mp-type-btn.active i {
  opacity: 1;
}

.marketplace-layout.no-sidebar {
  grid-template-columns: 1fr;
}

/* Case Chat */
.chat-nav-badge,
.chat-button-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--red);
  color: white;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}
.chat-shell {
  display: grid;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}
.chat-thread-list,
.chat-panel {
  background: white;
  border: 1px solid rgba(255, 112, 67, 0.14);
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}
.chat-thread-list {
  overflow: hidden;
  max-height: calc(100vh - 190px);
  display: flex;
  flex-direction: column;
}
.chat-thread-list-header {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 112, 67, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--navy);
  background: linear-gradient(180deg, #fafbfc, #ffffff);
}
.chat-thread-list-header span {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--red);
}
.admin-chat-monitor-controls {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  padding: 16px;
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  overflow: hidden;
}
.chat-filter-group {
  flex: 1 1 220px;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-filter-group label {
  color: #334155;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
}
.chat-filter-group select {
  width: 100%;
  height: 44px;
  min-height: 44px;
  border: 1.5px solid #cbd5e1;
  border-radius: 9px;
  background: #ffffff;
  color: #334155;
  padding: 0 38px 0 12px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-filter-search {
  flex: 2 1 320px;
}
.chat-search-input {
  position: relative;
}
.chat-search-input i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-accent-text);
  font-size: 0.85rem;
}
.chat-search-input input {
  width: 100%;
  height: 44px;
  border: 1.5px solid #cbd5e1;
  border-radius: 9px;
  background: #ffffff;
  color: #334155;
  padding: 0 12px 0 38px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  outline: none;
  transition: var(--transition);
}
.chat-search-input input:focus,
.chat-filter-group select:focus {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 4px rgba(255, 112, 67, 0.12);
}
.chat-filter-actions {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-filter-summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 9px;
  background: #fff8f4;
  color: #8f6a57;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}
.chat-filter-summary strong {
  margin-right: 4px;
  color: var(--color-accent-text);
  font-size: 1rem;
}
.chat-filter-reset {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid var(--color-primary-dark);
  border-radius: 9px;
  background: white;
  color: var(--color-accent-text);
  padding: 0 16px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}
.chat-filter-reset:hover {
  background: #fff8f4;
}
.chat-thread-item {
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid rgba(255, 112, 67, 0.1);
  background: white;
  padding: 18px 20px;
  cursor: pointer;
  transition: var(--transition);
}
.chat-thread-item:hover,
.chat-thread-item.active {
  background: #fafbfc;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}
.chat-thread-item.active {
  box-shadow: inset 4px 0 0 var(--gold), 0 12px 26px rgba(15, 23, 42, 0.09);
}
.chat-thread-item.priority {
  background: linear-gradient(90deg, rgba(255, 247, 237, 0.95), #ffffff);
}
.chat-thread-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-size: 0.8rem;
}
.chat-thread-signals {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.chat-unread-badge {
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--red);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
}
.conversation-status-pill {
  height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
  font-size: 0.66rem;
  font-weight: 800;
}
.conversation-status-pill.unread {
  background: #fff1f2;
  color: var(--color-error-text);
  border-color: #fecdd3;
}
.conversation-status-pill.active {
  background: #ecfdf5;
  color: var(--color-success-text);
  border-color: #bbf7d0;
}
.conversation-status-pill.new {
  background: #eff6ff;
  color: var(--color-info-text);
  border-color: #bfdbfe;
}
.conversation-status-pill.waiting {
  background: #fffbeb;
  color: var(--color-warning-text);
  border-color: #fde68a;
}
.conversation-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.chat-thread-title {
  margin-top: 6px;
  color: var(--navy);
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1.35;
}
.chat-thread-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--gray-500);
  font-size: 0.75rem;
}
.chat-thread-activity {
  margin-top: 8px;
  color: var(--color-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-thread-item p {
  margin: 10px 0 0;
  color: var(--gray-500);
  font-size: 0.78rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-workspace {
  min-width: 0;
}
.chat-panel {
  min-height: 620px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-panel-header {
  padding: 20px 22px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.chat-case-kicker {
  color: var(--color-accent-text);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.chat-panel-header h2 {
  margin: 4px 0;
  color: var(--navy);
  font-size: 1.15rem;
  line-height: 1.35;
}
.chat-panel-header p {
  margin: 0;
  color: var(--gray-500);
  font-size: 0.85rem;
}
.chat-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.chat-unavailable,
.chat-readonly-note {
  margin: 16px 18px 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.18);
  color: var(--color-info-text);
  font-size: 0.85rem;
  font-weight: 700;
}
.chat-message-area {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
  background: linear-gradient(180deg, #ffffff 0%, var(--gray-50) 100%);
}
.chat-message {
  display: flex;
  margin-bottom: 16px;
}
.chat-message.mine {
  justify-content: flex-end;
}
.chat-bubble {
  width: min(620px, 82%);
  border-radius: 14px;
  border: 1px solid var(--gray-100);
  background: white;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}
.chat-message.mine .chat-bubble {
  background: #fff7ed;
  border-color: rgba(255, 112, 67, 0.22);
}
.chat-message.audit-message {
  justify-content: stretch;
}
.chat-message.audit-message .chat-bubble {
  width: min(720px, 92%);
  border-left: 4px solid rgba(255, 112, 67, 0.5);
  background: #fffdfb;
}
.chat-message-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--navy);
  font-size: 0.78rem;
  margin-bottom: 8px;
}
.chat-message-head span,
.chat-message-status,
.chat-file-meta {
  color: var(--gray-400);
  font-size: 0.72rem;
}
.chat-message-text {
  color: var(--gray-700);
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.chat-payment-card {
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.22);
  background: rgba(16, 185, 129, 0.06);
  padding: 12px;
  display: grid;
  gap: 10px;
}
.chat-payment-card__top,
.chat-payment-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.chat-payment-card__top span {
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chat-payment-card__top strong {
  color: var(--color-success-text);
  font-size: 0.75rem;
}
.chat-payment-row span {
  color: var(--gray-500);
  font-size: 0.78rem;
}
.chat-payment-row strong {
  color: var(--navy);
  font-size: 0.92rem;
}
.chat-payment-details {
  white-space: pre-wrap;
  color: var(--gray-700);
  font-size: 0.84rem;
  line-height: 1.5;
  padding: 10px;
  border-radius: 8px;
  background: white;
  border: 1px solid rgba(16, 185, 129, 0.16);
}
.chat-payment-actions {
  display: flex;
  justify-content: flex-end;
}
.chat-payment-actions input[type="file"] {
  display: none;
}
.chat-payment-meta {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.08);
  color: var(--color-info-text);
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 800;
}
.payment-panel-list {
  display: grid;
  gap: 12px;
}
.payment-panel-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(16, 185, 129, 0.18);
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.05);
}
.payment-panel-card__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.payment-panel-card__top span {
  color: var(--navy);
  font-weight: 900;
}
.payment-panel-card__top strong {
  padding: 5px 9px;
  border-radius: 999px;
  background: white;
  color: var(--color-success-text);
  font-size: 0.72rem;
  font-weight: 900;
}
.payment-panel-card p {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.82rem;
  line-height: 1.5;
}
.payment-panel-receipt {
  display: grid;
  gap: 6px;
}
.payment-panel input[type="file"] {
  display: none;
}
.chat-message-status {
  text-align: right;
  margin-top: 8px;
  font-weight: 700;
}
.chat-image-attachment {
  display: inline-block;
  margin-top: 10px;
}
.chat-image-attachment img,
.chat-draft-attachment img {
  width: 140px;
  height: 96px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--gray-100);
}
.chat-file-attachment,
.chat-draft-attachment {
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-file-icon,
.chat-draft-attachment > i {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: white;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-file-info,
.chat-draft-attachment div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-file-info strong,
.chat-draft-attachment strong {
  color: var(--navy);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}
.chat-file-info span,
.chat-draft-attachment span {
  color: var(--gray-400);
  font-size: 0.72rem;
}
.chat-draft-attachment button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: white;
  color: var(--gray-500);
  cursor: pointer;
}
.chat-composer {
  padding: 16px 18px;
  border-top: 1px solid var(--gray-100);
  background: white;
}
.chat-composer-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.chat-composer textarea {
  flex: 1;
  min-height: 48px;
  max-height: 140px;
  resize: vertical;
  border-radius: 10px;
  border: 1.5px solid var(--gray-200);
  padding: 12px 14px;
  font-family: inherit;
}
.chat-file-button {
  width: 48px;
  border: 1.5px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--navy);
  border-radius: 10px;
  cursor: pointer;
}
.chat-composer input[type="file"] {
  display: none;
}
.chat-upload-hint {
  color: var(--gray-400);
  font-size: 0.72rem;
  margin-top: 8px;
}
.chat-empty-state {
  min-height: 260px;
  padding: 40px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--gray-400);
}
.chat-empty-state i {
  font-size: 2rem;
  margin-bottom: 12px;
  opacity: 0.6;
}
.chat-empty-state h3 {
  color: var(--navy);
  margin-bottom: 6px;
}
.chat-empty-state.compact {
  min-height: 180px;
}

.admin-monitor-notice {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: linear-gradient(135deg, #fff8f4, #ffffff);
  color: #334155;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-monitor-notice i {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-primary);
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  flex-shrink: 0;
}
.admin-monitor-notice span {
  font-weight: 900;
}
.admin-monitor-notice small {
  margin-left: auto;
  color: var(--color-secondary);
  font-weight: 700;
}

.comms-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.contact-ticket-kpi {
  min-width: 130px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #fff7ed;
  border: 1px solid rgba(255, 112, 67, 0.2);
  color: #334155;
  text-align: center;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.07);
}
.contact-ticket-kpi span {
  display: block;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
}
.contact-ticket-kpi small {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.contact-submissions-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.contact-submissions-toolbar button {
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: white;
  color: #334155;
  padding: 0 16px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
}
.contact-submissions-toolbar button:hover,
.contact-submissions-toolbar button.active {
  background: #fff7ed;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.contact-submissions-toolbar button.active {
  border-color: var(--gold-dark);
}
.contact-submissions-toolbar button span {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--red);
  color: white;
  font-size: 0.68rem;
}
.inquiry-management-controls {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--gray-100);
  border-radius: 14px;
  background: white;
}
.inquiry-management-controls .form-group {
  margin: 0;
}
.inquiry-management-controls label {
  display: block;
  margin-bottom: 7px;
  color: var(--gray-500);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}
.inquiry-management-controls select,
.inquiry-nlq-input input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 0 12px;
  font: inherit;
}
.inquiry-nlq-input {
  display: flex;
  gap: 8px;
}
.inquiry-nlq-input input {
  flex: 1 1 auto;
}
.inquiry-nlq-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 18px;
}
.inquiry-nlq-summary span,
.inquiry-popularity-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
}
.inquiry-nlq-summary span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 112, 67, 0.2);
  background: #fff7ed;
  color: #334155;
}
.inquiry-management-table {
  min-width: 1260px;
  width: 100%;
}
.inquiry-management-table th,
.inquiry-management-table td {
  vertical-align: middle;
  padding: 12px 14px;
}
.inquiry-management-table th {
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy-800, #1e293b);
  background: #f8fafc;
  border-bottom: 2px solid var(--gray-200, #e2e8f0);
}
.inquiry-management-table td:nth-child(5) {
  max-width: 320px;
  min-width: 220px;
  word-break: break-word;
  overflow-wrap: break-word;
}
.inquiry-management-table .inquiry-email-text {
  font-size: 0.8125rem;
  color: var(--gray-600, #475569);
  word-break: break-all;
}
.inquiry-table-message {
  max-width: 300px;
  margin: 4px 0 0;
  color: var(--gray-500);
  font-size: 0.78rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.inquiry-popularity-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(37, 99, 235, 0.1);
  color: var(--color-info-text);
}
.inquiry-management-table .inquiry-actions-cell {
  width: 290px;
  min-width: 285px;
  text-align: right;
  white-space: nowrap;
}
.inquiry-table-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
.btn-inquiry-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.15s ease-in-out !important;
}
.btn-inquiry-action i {
  font-size: 0.8125rem !important;
}
.btn-inquiry-reply {
  background: #d9531e !important;
  color: #ffffff !important;
  border: 1px solid #d9531e !important;
}
.btn-inquiry-reply:hover {
  background: #b83f12 !important;
  border-color: #b83f12 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(217, 83, 30, 0.25) !important;
  transform: translateY(-1px);
}
.btn-inquiry-close {
  background: #ffffff !important;
  color: var(--navy-800, #1e293b) !important;
  border: 1px solid var(--gray-300, #cbd5e1) !important;
}
.btn-inquiry-close:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  transform: translateY(-1px);
}
.btn-inquiry-ai {
  background: #ffffff !important;
  color: var(--navy-800, #1e293b) !important;
  border: 1px solid var(--gray-300, #cbd5e1) !important;
}
.btn-inquiry-ai i {
  color: #6366f1 !important;
}
.btn-inquiry-ai:hover {
  background: #eef2ff !important;
  border-color: #a5b4fc !important;
  color: #3730a3 !important;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15) !important;
  transform: translateY(-1px);
}
.contact-ticket-board {
  background: white;
  border: 1px solid rgba(255, 112, 67, 0.14);
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.contact-ticket-board-header {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 112, 67, 0.12);
  background: linear-gradient(180deg, #fafbfc, #ffffff);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--navy);
}
.contact-ticket-board-header span {
  color: var(--color-secondary);
  font-size: 0.8rem;
  font-weight: 800;
}
.contact-ticket-list {
  display: grid;
  gap: 14px;
  padding: 16px;
}
.contact-ticket-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: #ffffff;
  transition: var(--transition);
  height: auto;
  min-width: 0;
}
.contact-ticket-main {
  min-width: 0;
  overflow-wrap: anywhere;
}
.contact-ticket-card:hover {
  border-color: rgba(255, 112, 67, 0.24);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.contact-ticket-card.priority {
  border-left: 4px solid var(--gold-dark);
}
.contact-ticket-topline,
.contact-ticket-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.contact-ticket-topline > span:first-child {
  color: var(--color-secondary);
  font-size: 0.74rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.contact-ticket-card h3 {
  margin: 8px 0 6px;
  color: var(--navy);
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.contact-ticket-card p {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.88rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.contact-ticket-meta {
  margin-top: 12px;
  color: var(--gray-500);
  font-size: 0.76rem;
  font-weight: 700;
}
.contact-ticket-meta span {
  overflow-wrap: anywhere;
}
.contact-ticket-status {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  background: #f8fafc;
  color: #475569;
  white-space: nowrap;
}
.contact-ticket-status.new {
  background: #fff1f2;
  color: var(--color-error-text);
}
.contact-ticket-status.read {
  background: #eff6ff;
  color: var(--color-info-text);
}
.contact-ticket-status.replied {
  background: #ecfdf5;
  color: var(--color-success-text);
}
.contact-ticket-status.archived {
  background: #f1f5f9;
  color: #64748b;
}
.contact-ticket-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 140px;
  flex-shrink: 0;
}
.contact-ticket-actions .btn {
  justify-content: center;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-align: center;
  height: auto;
  min-height: 36px;
  padding: 6px 12px;
}
.contact-ticket-ai {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #fff8f4;
  color: #334155;
  border: 1px solid rgba(255, 112, 67, 0.16);
  font-size: 0.82rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  min-width: 0;
}

.marketplace-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.marketplace-bookmark-btn {
  min-height: 34px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: white;
  color: var(--navy);
  padding: 0 11px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.marketplace-bookmark-btn:hover,
.marketplace-bookmark-btn.saved {
  border-color: var(--gold-dark);
  background: #fff7ed;
  color: #334155;
}
.bookmarked-listings-panel {
  overflow: hidden;
  border: 1px solid rgba(255, 112, 67, 0.14);
  border-radius: 16px;
  background: white;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}
.bookmarked-listings-table {
  min-width: 980px;
}

.ip-guide-modal {
  display: grid;
  gap: 16px;
}
.ip-guide-hero {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff8f4, #ffffff);
  border: 1px solid rgba(255, 112, 67, 0.16);
}
.ip-guide-hero h3 {
  margin: 0 0 6px;
  color: var(--navy);
}
.ip-guide-hero p,
.ip-guide-note {
  color: var(--gray-600);
  line-height: 1.55;
  font-size: 0.9rem;
}
.ip-guide-note {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
}
.ip-guide-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.ip-guide-columns > div {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--gray-100);
  background: white;
}
.ip-guide-columns h4 {
  color: var(--navy);
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.ip-guide-columns ul {
  margin: 0;
  padding-left: 18px;
  color: var(--gray-600);
  font-size: 0.84rem;
  line-height: 1.65;
}
.panel-heading-with-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-info-btn {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: #fff7ed;
  color: var(--color-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.72rem;
}
.panel-info-btn:hover {
  box-shadow: 0 0 0 4px rgba(255, 112, 67, 0.12);
}
.evaluation-content-panel {
  margin-bottom: 18px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 112, 67, 0.16);
  background: #fffdfb;
}
.evaluation-content-header {
  display: flex;
  justify-content: space-between;
  gap: 8px 12px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.evaluation-content-header > div:first-child {
  flex: 1 1 auto;
  min-width: 140px;
}
.evaluation-content-header .badge {
  white-space: nowrap !important;
  word-break: keep-all;
  max-width: 100%;
  flex-shrink: 0 !important;
  align-self: flex-start;
}
.evaluation-content-header h4 {
  margin: 0 0 4px;
  color: var(--navy);
}
.evaluation-content-header p,
.evaluation-note p,
.evaluation-note small {
  color: var(--gray-600);
  font-size: 0.84rem;
  line-height: 1.55;
}
.evaluation-note,
.evaluation-docs {
  padding: 12px;
  border-radius: 12px;
  background: white;
  border: 1px solid var(--gray-100);
  margin-bottom: 12px;
}
.evaluation-choice label,
.evaluation-docs strong,
.evaluation-note strong {
  display: block;
  color: #334155;
  font-weight: 900;
  font-size: 0.78rem;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.evaluation-option-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.evaluation-docs p {
  margin: 8px 0 0;
  color: var(--gray-700);
  font-size: 0.84rem;
  line-height: 1.55;
}
.evaluation-content-panel textarea {
  width: 100%;
  min-height: 90px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1.5px solid var(--gray-200);
  padding: 12px;
  font-family: inherit;
}

@media (max-width: 900px) {
  .admin-chat-monitor-controls {
    align-items: stretch;
  }
  .chat-filter-actions {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .chat-shell {
    grid-template-columns: 1fr;
  }
  .chat-thread-list {
    max-height: none;
  }
  .chat-panel {
    min-height: 560px;
  }
  .comms-page-header,
  .admin-monitor-notice,
  .contact-ticket-board-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .admin-monitor-notice small {
    margin-left: 0;
  }
  .contact-ticket-card {
    grid-template-columns: 1fr;
  }
  .inquiry-management-controls {
    grid-template-columns: 1fr;
  }
  .inquiry-nlq-input {
    flex-wrap: wrap;
  }
  .inquiry-nlq-input .btn {
    flex: 1 1 140px;
  }
  .contact-ticket-actions {
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ip-guide-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .admin-chat-monitor-controls {
    padding: 12px;
  }
  .chat-filter-group,
  .chat-filter-actions {
    flex-basis: 100%;
    min-width: 0;
  }
  .chat-filter-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .chat-filter-summary,
  .chat-filter-reset {
    width: 100%;
  }
  .chat-panel-header,
  .chat-composer-row {
    flex-direction: column;
  }
  .chat-bubble {
    width: 100%;
  }
  .chat-message.mine {
    justify-content: stretch;
  }
  .chat-file-button {
    width: 100%;
    height: 44px;
  }
}

.floating-ai-button {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 1000;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
}
.floating-ai-button:hover {
  transform: translateY(-2px);
  background: var(--navy-dark);
}
.ai-assistant-panel {
  display: grid;
  gap: 16px;
}
.ai-assistant-summary {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--gray-100);
  border-radius: 12px;
  background: var(--gray-50);
  color: var(--gray-600);
}
.ai-assistant-summary strong {
  color: var(--navy);
  font-size: 1.6rem;
}
.ai-report-preview {
  padding: 0;
  border-radius: 14px;
  background: #fff;
  color: var(--gray-700);
  max-height: 430px;
  overflow: auto;
  border: 1px solid var(--gray-200);
}
.nql-result-panel {
  background: #fff;
}
.nql-result-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid var(--gray-100);
}
.nql-result-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--color-accent-text);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nql-result-header h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1rem;
}
.nql-result-count,
.nql-summary-chip,
.nql-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-weight: 800;
  white-space: nowrap;
}
.nql-result-count {
  background: var(--navy);
  color: #fff;
  padding: 8px 12px;
  font-size: 0.8rem;
}
.nql-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px 0;
}
.nql-summary-chip {
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  background: var(--gray-50);
  padding: 7px 10px;
  font-size: 0.78rem;
}
.nql-summary-chip strong {
  color: var(--navy);
}
.nql-table-toolbar {
  display: grid;
  gap: 6px;
  padding: 14px 18px;
}
.nql-table-toolbar label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--gray-500);
  text-transform: uppercase;
}
.nql-table-toolbar input {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 10px 12px;
}
.nql-table-wrap {
  overflow-x: auto;
}
.nql-results-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.nql-results-table th,
.nql-results-table td {
  padding: 12px 14px;
  text-align: left;
  border-top: 1px solid var(--gray-100);
  vertical-align: top;
  font-size: 0.84rem;
}
.nql-results-table th {
  color: var(--gray-500);
  background: var(--gray-50);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.nql-status-badge {
  background: rgba(14, 165, 233, 0.1);
  color: var(--color-secondary-dark);
  padding: 5px 9px;
  font-size: 0.75rem;
}
.nql-empty-state {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 18px;
  color: var(--gray-500);
}
.nql-empty-state i {
  color: var(--color-accent-text);
}
.nql-result-footnote {
  margin: 0;
  padding: 12px 18px 16px;
  color: var(--gray-500);
  font-size: 0.82rem;
}
.email-module-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}
.email-module-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-weight: 700;
  margin-right: auto;
}
.email-module-stat i {
  color: var(--color-accent-text);
}
.email-module-stat span {
  color: var(--gray-500);
  font-weight: 600;
}
.email-inquiry-list {
  display: grid;
  gap: 14px;
}
.email-inquiry-card {
  background: white;
  border: 1px solid var(--gray-100);
  border-left: 4px solid transparent;
  border-radius: 12px;
  padding: 18px;
}
.email-inquiry-card.unread {
  border-left-color: var(--gold-dark);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
}
.email-inquiry-top,
.email-inquiry-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.email-inquiry-top strong,
.email-inquiry-card h3 {
  color: var(--navy);
}
.email-inquiry-top span,
.email-inquiry-footer {
  color: var(--gray-500);
  font-size: 0.82rem;
}
.email-inquiry-card p {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 10px 0 14px;
}

/* =============== UX AUDIT: TYPED TOAST FEEDBACK =============== */
/* Pairs with showToast(msg, type) in app.js — one color language for
   success / warning / error / info across the whole application. */
.toast {
  border-left: 4px solid var(--green);
}
.toast.toast-success { border-left-color: var(--green); }
.toast.toast-success .toast-icon { color: var(--green); }
.toast.toast-error { border-left-color: var(--red); }
.toast.toast-error .toast-icon { color: var(--red); }
.toast.toast-warning { border-left-color: var(--color-warning); }
.toast.toast-warning .toast-icon { color: var(--color-warning-text); }
.toast.toast-info { border-left-color: var(--blue); }
.toast.toast-info .toast-icon { color: var(--blue); }

/* =============== UX AUDIT: TABLE READABILITY =============== */
/* Sticky headers take effect inside any vertically scrolling wrapper. */
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
/* Subtle zebra striping keeps long registries scannable. */
.data-table tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.02);
}
.data-table tbody tr:hover {
  background: var(--gray-50);
}
/* Registries stay usable on narrow screens: the container scrolls
   horizontally instead of crushing the columns. */
.table-container .data-table {
  min-width: 640px;
}

/* =============== UX AUDIT: KEYBOARD ACCESSIBILITY =============== */
:focus-visible {
  outline: 2px solid var(--gold, var(--color-warning));
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 3000;
  padding: 10px 18px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
}

/* =============== UX AUDIT: REDUCED MOTION =============== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============== STABILIZATION: PASSWORD FIELDS =============== */
/* Edge/Chromium inject a native reveal eye inside password inputs,
   which doubles up with our .password-toggle button. Hide the native one. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/* =============== STABILIZATION: OTP RESEND COUNTDOWN =============== */
.otp-resend-waiting {
  opacity: 0.65;
  pointer-events: none;
  cursor: not-allowed;
}

/* =============== STABILIZATION: APPLICANT IMPORTANT NOTICES =============== */
.notice-panel {
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.notice-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.notice-panel__header i {
  color: var(--color-accent-text);
}
.notice-panel__header h2 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
}
.notice-panel__count {
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 50px;
  padding: 2px 10px;
}
.notice-panel__list {
  display: grid;
  gap: 10px;
}
.notice-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--gray-100);
  border-left-width: 4px;
  background: var(--gray-50);
}
.notice-item--urgent { border-left-color: var(--red); }
.notice-item--urgent .notice-item__icon { color: var(--red); }
.notice-item--warning { border-left-color: var(--color-warning); }
.notice-item--warning .notice-item__icon { color: var(--color-warning-text); }
.notice-item--info { border-left-color: var(--blue); }
.notice-item--info .notice-item__icon { color: var(--blue); }
.notice-item__icon {
  font-size: 1rem;
  flex-shrink: 0;
}
.notice-item__body {
  flex: 1;
  min-width: 180px;
}
.notice-item__title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
}
.notice-item__detail {
  font-size: 0.8rem;
  color: var(--gray-600);
  margin-top: 2px;
  line-height: 1.5;
}
.notice-panel__more {
  font-size: 0.78rem;
  color: var(--gray-500);
  font-weight: 600;
  padding: 4px 2px 0;
}
@media (max-width: 640px) {
  .notice-item {
    flex-wrap: wrap;
  }
  .notice-item .btn {
    margin-left: 30px;
  }
}

/* =============== STABILIZATION: MESSAGING LAYOUT =============== */
/* Filter labels were clipped by overflow:hidden + line-height:1; selects
   with line-height equal to their height cut descenders on some browsers. */
.admin-chat-monitor-controls {
  overflow: visible;
}
.chat-filter-group label {
  line-height: 1.3;
  white-space: normal;
}
.chat-filter-group select {
  line-height: normal;
  text-overflow: ellipsis;
}
/* Keep the conversation list and the chat panel the same visual height so
   the two columns align instead of one floating shorter than the other. */
.chat-shell {
  align-items: start;
}
.chat-panel {
  max-height: calc(100vh - 190px);
  min-height: 560px;
}
.chat-thread-list {
  min-height: 560px;
}
.chat-thread-item .chat-thread-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .chat-panel {
    max-height: none;
  }
  .chat-thread-list {
    min-height: 0;
    max-height: 340px;
  }
}

/* =============== REGISTRY GRADE: RECORD TYPOGRAPHY =============== */
/* Counts, dates, and IDs align like records, not prose. */
.data-table td,
.data-table th,
.stat-number,
.stat-card,
.tab-count,
.notif-badge,
.deadline-meta {
  font-variant-numeric: tabular-nums;
}
.ref-number,
.chat-case-kicker,
.chat-thread-top strong,
.mono-id {
  font-family: "Consolas", "SF Mono", "Roboto Mono", monospace;
  letter-spacing: 0.02em;
}

/* =============== REGISTRY GRADE: TABLE DENSITY =============== */
/* Evaluators and admins live in tables all day: compact rows. */
body.role-reviewer .data-table th,
body.role-superadmin .data-table th,
body.role-admin .data-table th {
  padding: 10px 16px;
}
body.role-reviewer .data-table td,
body.role-superadmin .data-table td,
body.role-admin .data-table td {
  padding: 10px 16px;
  font-size: 0.85rem;
}

/* =============== REGISTRY GRADE: SMALL FIXES =============== */
/* "Remember me" must never wrap onto two lines. */
.checkbox-label {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Messages IP-Service filter: a compact control, not a full-width bar. */
.chat-filter-group {
  flex: 0 1 280px;
}
.chat-filter-group select {
  max-width: 280px;
}
/* Landing hero: content within the first viewport, calm credential logos. */
.hero {
  min-height: auto;
  padding: 120px 24px 64px;
}
/* Tone only -- sizing lives with the base .hero-corner-logo rule above. */
.hero-corner-logo {
  filter: grayscale(0.35);
  opacity: 0.85;
}
/* Below 900px both corner logos drop to the same small badge size and sit at
   the same height, so the hero title stays readable. */
@media (max-width: 900px) {
  .hero-corner-logo,
  .hero-corner-logo.left,
  .hero-corner-logo.right {
    width: 56px;
    height: 56px;
    top: calc(72px + 16px);
  }
  .hero-corner-logo.left {
    left: 5%;
  }
  .hero-corner-logo.right {
    right: 5%;
  }
}
/* Filing hub: five IP lanes sit on one balanced row on wide screens
   instead of a 4 + 1 dangling card. */
@media (min-width: 1280px) {
  .filing-hub-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* =============== APPLICANT SETTING: COMPACT CASE REGISTRY =============== */
/* Driven by the "Compact case cards" preference in Applicant Settings. */
body.compact-case-cards #userSubmissionsList .data-table td {
  padding: 8px 16px;
  font-size: 0.84rem;
}
body.compact-case-cards #userSubmissionsList .data-table th {
  padding: 8px 16px;
}

/* =============== PORTFOLIO ANALYTICS GRID =============== */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  /* A single 1fr track still overflows when the chart card's intrinsic width
     wins, which clipped the analytics panel at 390 and 360. */
  .analytics-grid > * {
    min-width: 0;
    overflow: hidden;
  }
  .analytics-grid canvas {
    max-width: 100%;
  }
}

/* Website Analytics Breakdown Grid (Device Types & Browsers) */
.analytics-breakdown-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 780px;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .analytics-breakdown-container {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 100%;
  }
}

.analytics-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
.analytics-card__head {
  margin-bottom: 12px;
}
.analytics-card__head h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.analytics-card__head p {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 2px 0 0;
}
.analytics-card__plot {
  position: relative;
  flex: 1;
  min-height: 180px;
}
.analytics-card__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
  padding: 12px 20px;
  border: 1px dashed var(--line);
  border-radius: 10px;
}
.analytics-card__empty i {
  font-size: 1.4rem;
  opacity: 0.45;
}

/* Analytics filter row: compact inline controls, not full-width stacks. */
.dashboard-panel .filter-select {
  width: auto;
  max-width: 200px;
  flex: 0 1 auto;
}

/* =============== NLQ ASSISTANT: PARSE ECHO, SUGGESTIONS, FEEDBACK =============== */
.nql-parse-echo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
}
.nql-parse-echo__label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.nql-suggestion-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.nql-suggestion-chip {
  border: 1px solid var(--line);
  background: var(--gray-50);
  color: var(--gray-700);
  border-radius: 50px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  transition: var(--transition);
}
.nql-suggestion-chip:hover {
  border-color: var(--brand);
  color: var(--color-accent-text);
  background: var(--surface);
}
.nql-result-summary {
  font-size: 0.85rem;
  color: var(--gray-600);
  margin: 4px 0 10px;
}
.nql-count-hero {
  text-align: center;
  padding: 28px 16px;
}
.nql-count-hero__value {
  font-size: 3rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.nql-count-hero__label {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 8px;
}
.nql-feedback-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}
.nql-feedback-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--gray-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.nql-feedback-btn:hover {
  border-color: var(--brand);
  color: var(--color-accent-text);
}

/* =============== CHAT ATTACHMENTS: SECURE BLOB LOADING =============== */
.chat-image-attachment {
  border: 1px solid var(--line);
  background: var(--gray-100);
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  display: block;
  max-width: 260px;
}
.chat-image-attachment img {
  display: block;
  width: 100%;
  min-height: 90px;
  object-fit: cover;
}
.chat-image-attachment img:not(.loaded) {
  opacity: 0.4;
}
.chat-image-attachment.failed::after {
  content: "Preview unavailable — use Download";
  display: block;
  padding: 10px;
  font-size: 0.75rem;
  color: var(--muted);
}
.chat-attachment-download {
  background: none;
  border: none;
  color: var(--color-accent-text);
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 8px;
  cursor: pointer;
}
.chat-attachment-download:hover {
  text-decoration: underline;
}

/* Authenticated document / receipt preview. The file itself remains a
   short-lived browser Blob obtained from the protected download endpoint. */
.secure-file-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: min(78vw, 720px);
}
.secure-file-preview__image {
  display: block;
  max-width: 100%;
  max-height: min(65vh, 680px);
  margin: 0 auto;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--gray-100);
}
.secure-file-preview__pdf {
  width: min(78vw, 720px);
  height: min(65vh, 680px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}
.secure-file-preview__actions { justify-content: flex-end; }
@media (max-width: 640px) {
  .secure-file-preview { min-width: 0; width: 100%; }
  .secure-file-preview__pdf { width: 100%; height: 58vh; }
  .secure-file-preview__actions .btn { flex: 1; }
}

/* =============== VIBRANT REGISTRY: DEPTH & CATEGORY IDENTITY =============== */
/* Interactive cards lift gently; panels stay calm. */
.stat-card,
.analytics-card,
.innovation-card,
.action-card,
.filing-card {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.stat-card:hover,
.innovation-card:hover,
.action-card:hover,
.filing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -10px rgba(139, 69, 19, 0.18);
}
.analytics-card:hover {
  box-shadow: 0 8px 18px -8px rgba(139, 69, 19, 0.12);
}

/* Category identity: every stat card carries its accent as a top strip. */
.stat-card {
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--card-accent, var(--line));
}
.stat-card:has(.stat-card-icon.blue) { --card-accent: var(--info); }
.stat-card:has(.stat-card-icon.green) { --card-accent: var(--success); }
.stat-card:has(.stat-card-icon.yellow) { --card-accent: var(--warning); }
.stat-card:has(.stat-card-icon.red) { --card-accent: var(--danger); }
.stat-card:has(.stat-card-icon.indigo) { --card-accent: var(--collab); }
.stat-card-icon.indigo {
  background: var(--collab-tint);
  color: var(--collab);
}

/* Buttons feel alive: subtle lift, never a change of meaning. */
.btn {
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -6px rgba(255, 112, 67, 0.45);
}

/* =============== VIBRANT REGISTRY: MODULE ACCENTS =============== */
/* Messages: technology-blue list accents, coral active thread. */
.chat-unread-badge,
.chat-button-badge {
  background: var(--info) !important;
  color: #fff;
}
.chat-thread-item {
  border-left: 3px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.chat-thread-item.active {
  border-left: 3px solid var(--brand);
  background: var(--info-tint);
}
.chat-thread-item:hover {
  background: var(--gray-50);
}
/* Marketplace: teal identity on its own surfaces only. */
#page-marketplace .mp-type-btn.active,
#main-content .mp-type-btn.active {
  background: var(--market);
  border-color: var(--market);
  color: #fff;
}
.innovation-card {
  border: 1px solid var(--line);
}
.innovation-card:hover {
  border-color: var(--market);
}
.marketplace-bookmark-btn.saved {
  color: var(--market);
}

/* Forms: technology-blue section spine for orientation. */
.patent-editor-section {
  border-left: 3px solid var(--info-tint);
  padding-left: 14px;
}
.patent-editor-section .patent-paper__section-title {
  color: var(--trust);
}

/* Empty states: icon sits in a soft tinted disc instead of floating gray. */
.chat-empty-state i,
.nql-empty-state i,
.analytics-card__empty i,
.timeline-empty-state i {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--info-tint);
  color: var(--info);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  opacity: 1;
}

/* =============== VIBRANT REGISTRY: MICRO-DELIGHT =============== */
/* Submission success: the check pops in once (<=600ms). */
.confirmation-screen .check-circle {
  animation: tcbPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes tcbPopIn {
  0% { transform: scale(0.3); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
/* Notification badge pulses once when a new alert lands. */
.notif-badge.pulse-once {
  animation: tcbPulse 0.6s ease-out 1;
}
@keyframes tcbPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 112, 67, 0.55); }
  100% { box-shadow: 0 0 0 12px rgba(255, 112, 67, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .confirmation-screen .check-circle,
  .notif-badge.pulse-once {
    animation: none;
  }
}

/* ============================================================
   DYNAMIC SYSTEM BRANDING
   Uploaded logos replace the shield icon inside every .brand-icon;
   the admin Branding panel shows a live identity preview.
   ============================================================ */
.brand-icon img.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  display: block;
  background: #fff;
  padding: 2px;
}

.brand-preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  margin-bottom: 18px;
  border: 1px dashed var(--gray-300, #cbd5e1);
  border-radius: 12px;
  background: var(--trust-tint, #eaf0f7);
  text-align: center;
}

.brand-preview-logo {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy, var(--navy));
  color: #fff;
  font-size: 1.8rem;
  overflow: hidden;
}

.brand-preview-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.brand-preview-name {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--navy, var(--navy));
}

.brand-preview-institution {
  font-size: 0.85rem;
  color: var(--gray-500, #64748b);
}

.form-hint-inline {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--gray-400, #94a3b8);
  margin-left: 6px;
}

/* ============================================================
   APPLICANT ADMINISTRATION WORKSPACE
   Registry-grade panels: identity grid, danger zone, collaboration
   registry groups, ownership continuity, immutable history timeline.
   Reuses existing tokens; color only for meaning.
   ============================================================ */
.workspace-identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px 24px;
  margin: 16px 0;
}

.workspace-identity-grid > div,
.ownership-owner-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.workspace-identity-grid > div > strong,
.ownership-owner-grid > div > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ownership-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-400, #94a3b8);
}

.ownership-sub {
  font-size: 0.78rem;
  color: var(--gray-500, #64748b);
}

.workspace-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px;
  margin-top: 16px;
}

.workspace-stat {
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.78rem;
  color: var(--gray-500, #64748b);
  background: var(--trust-tint, #eaf0f7);
}

.workspace-stat span {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--navy, var(--navy));
}

.workspace-terminated-note {
  margin-top: 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--red, var(--color-error));
  background: var(--danger-tint, #fdeaea);
  border-radius: 0 8px 8px 0;
  font-size: 0.85rem;
  color: var(--navy, var(--navy));
}

.danger-zone-panel {
  border: 1px solid var(--gray-200, #e2e8f0);
  border-left: 3px solid var(--warning, var(--color-warning));
}

.danger-zone-note {
  font-size: 0.83rem;
  color: var(--gray-500, #64748b);
  margin: 6px 0 14px;
}

.danger-zone-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ownership-panel {
  border-left: 3px solid var(--info, var(--color-info));
}

.ownership-owner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px 24px;
  margin: 14px 0;
}

.ownership-continuity {
  border: 1px dashed var(--gray-300, #cbd5e1);
  background: var(--warning-tint, #fdf3d7);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0;
}

.ownership-continuity h4 {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: var(--navy, var(--navy));
}

.ownership-continuity p {
  font-size: 0.83rem;
  color: var(--gray-600, #475569);
  line-height: 1.55;
  margin: 0 0 12px;
}

.ownership-section-title {
  margin: 22px 0 8px;
  font-size: 0.95rem;
  color: var(--navy, var(--navy));
}

.ownership-registry-group {
  margin-bottom: 14px;
}

.ownership-registry-group h4 {
  font-size: 0.82rem;
  color: var(--gray-600, #475569);
  margin: 10px 0 6px;
}

.registry-count {
  display: inline-block;
  min-width: 20px;
  text-align: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--trust-tint, #eaf0f7);
  color: var(--navy, var(--navy));
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.registry-table th,
.registry-table td {
  font-size: 0.83rem;
}

.registry-empty {
  font-size: 0.82rem;
  color: var(--gray-400, #94a3b8);
  padding: 6px 0 2px;
}

.ownership-timeline {
  border-left: 2px solid var(--gray-200, #e2e8f0);
  margin: 10px 0 4px 8px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ownership-event {
  position: relative;
}

.ownership-event-marker {
  position: absolute;
  left: -25px;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.ownership-event-marker.origin { background: var(--navy, var(--navy)); }
.ownership-event-marker.transfer { background: var(--info, var(--color-info)); }

.ownership-event-title {
  font-weight: 700;
  font-size: 0.87rem;
  color: var(--navy, var(--navy));
}

.ownership-event-meta {
  font-size: 0.79rem;
  color: var(--gray-500, #64748b);
  line-height: 1.5;
}

.workspace-confirm p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--gray-600, #475569);
  margin-bottom: 10px;
}

.workspace-confirm-audit {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--trust-tint, #eaf0f7);
  color: var(--navy, var(--navy)) !important;
  font-size: 0.82rem !important;
}

@media (max-width: 640px) {
  .danger-zone-actions { flex-direction: column; align-items: stretch; }
  .workspace-identity-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .workspace-identity-grid,
  .ownership-owner-grid {
    grid-template-columns: 1fr;
  }
}

/* Marketplace: search bar sits on the same row as the page title. */
.page-header.mp-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.mp-header-search {
  flex: 0 1 380px;
  min-width: 240px;
  margin: 0;
}

@media (max-width: 640px) {
  .mp-header-search {
    flex-basis: 100%;
  }
}

/* Review & Submit: filing snapshot header + Not Provided styling. */
.review-not-provided {
  color: var(--gray-400, #94a3b8);
  font-style: italic;
}

.review-filing-snapshot {
  border: 1px solid var(--gray-200, #e2e8f0);
  border-left: 3px solid var(--info, var(--color-info));
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 20px;
  background: #fff;
}

.review-filing-snapshot .review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px 24px;
  margin-top: 10px;
}

.review-service-lock {
  font-size: 0.72rem;
  color: var(--gray-400, #94a3b8);
  margin-left: 6px;
  white-space: nowrap;
}

.review-snapshot-note {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--gray-500, #64748b);
  line-height: 1.5;
}

/* Account Administration zone inside the evaluator "Manage" modal. */
.account-admin-zone {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--gray-200, #e2e8f0);
}

.account-admin-zone h4 {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: var(--navy, var(--navy));
}

.account-admin-zone p {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--gray-500, #64748b);
  line-height: 1.5;
}

.account-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================================
   EVALUATOR EXAMINATION CONSOLE
   Work-queue dashboard, docket header, office actions, checklist.
   Registry tokens only; color carries meaning, never decoration.
   ============================================================ */
.exam-queue-panel { border-left: 3px solid var(--brand, #e66b3f); }

.exam-queue-table th { white-space: nowrap; }

.exam-quick-actions .btn { min-height: 34px; }

.exam-next-action {
  font-size: 0.75rem;
  color: var(--gray-500, #64748b);
  white-space: nowrap;
}

.priority-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.priority-critical { background: var(--danger-tint, #fdeaea); color: var(--danger, var(--color-error-text)); }
.priority-high     { background: var(--warning-tint, #fdf3d7); color: var(--color-warning-text); }
.priority-medium   { background: var(--info-tint, #eaf1fe);   color: var(--info, var(--color-info-text)); }
.priority-normal   { background: var(--gray-100, #eef1f5);    color: var(--gray-600, #475569); }
.priority-low      { background: var(--gray-100, #eef1f5);    color: var(--gray-400, #94a3b8); }

.exam-pending-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px;
  margin: 0 0 24px;
}

.exam-pending-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  min-height: 44px;
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 12px;
  background: var(--surface, #fff);
  cursor: pointer;
  text-align: left;
  transition: transform var(--transition, 0.2s), box-shadow var(--transition, 0.2s), border-color var(--transition, 0.2s);
}
/* Hover feedback WITHOUT movement.
 *
 * translateY(-2px) lifted every card on hover, so running the mouse across the
 * row made the whole strip bob -- the "di gumagalaw" in the fix list. The
 * feedback itself is worth keeping; only the displacement is the problem, so
 * the shadow and border do the work and the box stays where it is.
 *
 * Only cards that are actually buttons react. An empty group renders as a
 * <div class="is-empty"> and is excluded, because nothing should look
 * interactive when it cannot be clicked. */
button.exam-pending-card:hover {
  box-shadow: 0 8px 16px -8px rgba(139, 69, 19, 0.25);
  border-color: var(--navy, var(--navy));
}

/* An empty group: information, not a control. No pointer, no hover response,
 * muted numerals so the row still reads as a set. `cursor: default` matters --
 * the inherited `cursor: pointer` was itself a promise the card could not
 * keep. */
.exam-pending-card.is-empty {
  cursor: default;
  background: var(--gray-50, #f8fafc);
}
.exam-pending-card.is-empty .exam-pending-count,
.exam-pending-card.is-empty i {
  color: var(--gray-400, #637896);
}
.exam-pending-card.is-empty:hover {
  box-shadow: none;
  border-color: var(--gray-200, #e2e8f0);
}
.exam-pending-card.active { border-color: var(--brand, #e66b3f); box-shadow: inset 0 0 0 1px var(--brand, #e66b3f); }
.exam-pending-card i { color: var(--navy, var(--navy)); }
.exam-pending-count { font-size: 1.5rem; font-weight: 800; color: var(--navy, var(--navy)); font-variant-numeric: tabular-nums; }
.exam-pending-label { font-size: 0.78rem; color: var(--gray-500, #64748b); }

.exam-activity-list { display: flex; flex-direction: column; gap: 12px; }
.exam-activity-item { display: flex; gap: 12px; align-items: flex-start; }
.exam-activity-item i { color: var(--info, var(--color-info-text)); margin-top: 3px; }
.exam-activity-title { font-weight: 700; font-size: 0.86rem; color: var(--navy, var(--navy)); }
.exam-activity-meta { font-size: 0.78rem; color: var(--gray-500, #64748b); }

/* Docket header: sticky case identity for the examiner */
.examiner-docket {
  background: var(--surface, #fff);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-left: 3px solid var(--navy, var(--navy));
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  box-shadow: 0 8px 18px -12px rgba(139, 69, 19, 0.35);
}
.docket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 10px 18px;
}
.docket-cell { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; }
.docket-cell-sub {
  font-size: 0.72rem;
  color: var(--gray-500, #64748b);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.docket-progress { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.docket-progress-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--gray-100, #eef1f5);
  overflow: hidden;
}
.docket-progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--info, var(--color-info)), var(--success, var(--color-success))); }
.docket-progress-label { font-size: 0.75rem; font-weight: 700; color: var(--gray-600, #475569); white-space: nowrap; }

/* Keeps the case's identity (app no., status, deadline) in view while the
   evaluator scrolls the long case detail body below it, instead of forcing a
   scroll back to the top to remember which case this is. Off under 640px --
   pinning ~150px of a phone viewport permanently costs more than it saves. */
body.role-reviewer {
  overflow-x: clip;
}

@media (min-width: 641px) {
  body.role-reviewer .examiner-docket {
    position: static;
    transition: box-shadow 0.2s ease, top 0.2s ease;
  }
  body.role-reviewer .examiner-docket.is-pinned {
    position: sticky;
    top: calc(var(--topbar-h) + 10px);
    z-index: 90;
    box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
    background: var(--surface, #fff);
  }
}

.office-actions-panel { border-left: 3px solid var(--info, var(--color-info)); }
.office-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; align-items: start; }
.office-actions-buttons { display: flex; flex-direction: column; gap: 10px; }
.office-actions-buttons .btn { justify-content: flex-start; min-height: 44px; }

/* Accessibility: visible focus for the console's interactive elements */
.exam-pending-card:focus-visible,
.exam-quick-actions .btn:focus-visible,
#reviewerCaseSearch:focus-visible {
  outline: 2px solid var(--brand, #e66b3f);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .docket-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   MESSENGER-STYLE CHAT
   Sticky composer, scrollable messages, grouped bubbles,
   day separators, welcoming empty state.
   ============================================================ */
.chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 140px);
}

.chat-message-area {
  flex: 1 1 auto;
  min-height: 220px;
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.chat-composer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--surface, #fff);
  border-top: 1px solid var(--gray-200, #e2e8f0);
  padding-top: 10px;
}

.chat-composer textarea {
  resize: none;
  max-height: 160px;
  line-height: 1.45;
}

.chat-message.grouped { margin-top: 2px; }
.chat-message.grouped .chat-bubble { border-top-left-radius: 8px; border-top-right-radius: 8px; }

.chat-day-separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 10px;
  color: var(--gray-400, #94a3b8);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.chat-day-separator::before,
.chat-day-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gray-200, #e2e8f0);
}

.chat-empty-state h3 { margin: 8px 0 4px; color: var(--navy, var(--navy)); }

@media (max-width: 768px) {
  .chat-panel { max-height: none; }
  .chat-composer { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}

/* Logo crop dialog (Instagram-style placement) */
.logo-crop-stage {
  display: flex;
  justify-content: center;
  padding: 8px 0 14px;
}
#logoCropCanvas {
  width: 280px;
  height: 280px;
  border-radius: 20px;
  border: 1px solid var(--gray-200, #e2e8f0);
  box-shadow: 0 8px 20px -12px rgba(139, 69, 19, 0.4);
  cursor: grab;
  touch-action: none;
}
#logoCropCanvas:active { cursor: grabbing; }
.logo-crop-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gray-400, #94a3b8);
}
.logo-crop-controls input[type="range"] { flex: 1; accent-color: var(--brand, #e66b3f); }

/* Evaluator Manage modal: active-case reassignment list */
.evaluator-case-reassign-list { display: flex; flex-direction: column; gap: 8px; }
.evaluator-case-reassign-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 10px;
}

/* ============================================================
   OFFICE ACTION MANAGEMENT
   Pinned ACTION REQUIRED banner, detail checklist, chat card.
   Countdown tones: later=amber, soon=orange, today/overdue=red.
   ============================================================ */
.oa-banner {
  border: 1px solid var(--warning, var(--color-warning));
  border-left-width: 5px;
  border-radius: 12px;
  background: var(--warning-tint, #fdf3d7);
  padding: 16px 20px;
  margin-bottom: 18px;
}
.oa-banner.oa-tone-soon { border-color: var(--color-primary); background: #fff1e6; }
.oa-banner.oa-tone-today,
.oa-banner.oa-tone-overdue { border-color: var(--danger, var(--color-error)); background: var(--danger-tint, #fdeaea); }

.oa-banner-head {
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--navy, var(--navy));
  display: flex;
  align-items: center;
  /* Without wrapping, the heading and the OA reference are forced onto one
     flex line on a phone and each breaks mid-phrase. Wrapping lets the
     reference drop cleanly onto its own line. */
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.oa-banner-head i { color: var(--danger, var(--color-error-text)); }

.oa-banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 8px 18px;
}
.oa-banner-grid > div { display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; }
.oa-tone-today .oa-remaining, .oa-tone-overdue .oa-remaining { color: var(--danger, var(--color-error-text)); }
.oa-tone-soon .oa-remaining { color: var(--color-accent-text); }

.oa-detail-panel { border-left: 3px solid var(--danger, var(--color-error)); }

/* Option 1: Applicant Office Action Slim 1-Line Banner + Collapsible Drawer */
.applicant-oa-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-left: 5px solid #d97706;
  border-radius: 10px;
  padding: 10px 18px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.08);
  flex-wrap: wrap;
}

.applicant-oa-summary-bar.resolved {
  background: #f0fdf4;
  border-color: #86efac;
  border-left-color: #10b981;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.08);
}

.applicant-oa-summary-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 260px;
}

.applicant-oa-icon-alert {
  color: #d97706;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.applicant-oa-icon-resolved {
  color: #10b981;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.applicant-oa-num-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 6px;
  background: #fbbf24;
  color: #78350f;
  flex-shrink: 0;
}

.applicant-oa-num-pill.resolved {
  background: #dcfce7;
  color: #15803d;
}

.applicant-oa-text {
  font-size: 0.88rem;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.4;
}

.applicant-oa-summary-bar.resolved .applicant-oa-text {
  color: #166534;
}

.applicant-oa-label {
  font-weight: 700;
  color: #78350f;
}

.applicant-oa-desc {
  color: #92400e;
}

.applicant-oa-sub {
  font-size: 0.82rem;
  color: #15803d;
  opacity: 0.9;
}

.applicant-oa-deadline-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(217, 119, 6, 0.15);
  color: #92400e;
}

.applicant-oa-deadline-pill.tone-overdue {
  background: #fee2e2;
  color: #991b1b;
}

.applicant-oa-deadline-pill.tone-soon {
  background: #ffedd5;
  color: #c2410c;
}

.applicant-oa-summary-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.applicant-oa-edit-btn {
  background: #d97706 !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(180, 83, 9, 0.2);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.applicant-oa-edit-btn:hover {
  background: #b45309 !important;
  border-color: #92400e !important;
  transform: translateY(-1px);
}

.applicant-oa-toggle-btn {
  background: #ffffff !important;
  border: 1px solid #d97706 !important;
  color: #b45309 !important;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 7px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.applicant-oa-toggle-btn:hover,
.applicant-oa-toggle-btn.active {
  background: #fef3c7 !important;
  border-color: #b45309 !important;
  color: #78350f !important;
}

.applicant-oa-drawer {
  margin-bottom: 24px;
  border-radius: 12px;
  overflow: hidden;
  animation: applicantOASlideDown 0.2s ease-out;
}

.applicant-oa-drawer .oa-sticky-bar {
  display: none;
}

@keyframes applicantOASlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.interview-detail-panel { border-left: 3px solid var(--navy, var(--navy)); }
.interview-field { margin-top: 10px; font-size: 0.88rem; color: var(--gray-600, #475569); }
.interview-field p { margin: 4px 0 0; line-height: 1.5; }
.interview-none-note { margin: 12px 0 0; font-size: 0.88rem; color: var(--gray-500, #64748b); }

.interview-history { margin-top: 14px; }
.interview-history summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gray-500, #64748b);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.interview-history summary::-webkit-details-marker { display: none; }
.interview-history summary::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  transition: transform 0.15s ease;
}
.interview-history[open] summary::before { transform: rotate(90deg); }
.interview-history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 4px;
  font-size: 0.84rem;
  color: var(--gray-600, #475569);
  border-top: 1px solid var(--gray-100, #f1f5f9);
}
.interview-history-row:first-of-type { border-top: none; }
.interview-history-meta { margin-left: auto; color: var(--gray-400, #94a3b8); font-size: 0.78rem; }

/* Compact single-line prompt used in place of a full interview card when the
   applicant still needs to respond -- the full details (location, notes) move
   into the Respond modal instead of always being rendered inline. */
.interview-respond-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid rgba(37, 99, 235, 0.25);
  background: rgba(37, 99, 235, 0.06);
  border-radius: 10px;
  font-size: 0.88rem;
  color: var(--gray-700, #334155);
}
.interview-respond-banner .interview-respond-datetime { font-weight: 700; color: var(--navy, var(--navy)); }
.interview-respond-banner-actions { margin-left: auto; }

.oa-record {
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 12px;
}
.oa-record.oa-tone-today, .oa-record.oa-tone-overdue { border-color: rgba(220, 38, 38, 0.45); }
.oa-record-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }

.oa-items { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.oa-items li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: var(--navy, var(--navy)); }
.oa-items li input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--success, var(--color-success)); cursor: pointer; }
.oa-items li i { margin-top: 3px; color: var(--gray-300, #cbd5e1); font-size: 0.7rem; }
.oa-items li.done i { color: var(--success, var(--color-success-text)); font-size: 0.9rem; }
.oa-items li.done strong { text-decoration: line-through; color: var(--gray-500, #64748b); }
.oa-item-instruction { font-size: 0.82rem; color: var(--gray-500, #64748b); line-height: 1.5; }

.oa-submit-block {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--warning-tint, #fdf3d7);
  color: var(--color-warning-text);
  font-size: 0.82rem;
}

.oa-chat-card {
  border: 1px solid var(--danger, var(--color-error));
  border-left-width: 4px;
  border-radius: 12px;
  background: var(--danger-tint, #fdeaea);
  padding: 12px 16px;
  margin-bottom: 12px;
}
.oa-chat-card.oa-tone-later { border-color: var(--warning, var(--color-warning)); background: var(--warning-tint, #fdf3d7); }

/* ===== Office Action UX redesign (D8–D15): category identity + task workspace ===== */

/* Plain-language + WHAT-DO-I-DO lines on the dashboard banner (D10/D15). */
.oa-banner-plain { margin: 0 0 10px; font-size: 0.9rem; color: var(--navy, var(--navy)); line-height: 1.5; }
.oa-do-line { margin-top: 10px; font-size: 0.9rem; color: var(--navy, var(--navy)); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.oa-do-line .ownership-label { flex: none; }

/* D8/D2: derived request-category chips — one visual identity per category. */
.oa-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.oa-cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.oa-cat-chip b { font-weight: 800; }
.oa-cat-chip.oa-cat-documents { background: #fef3c7; color: var(--color-warning-text); border-color: #fcd34d; }
.oa-cat-chip.oa-cat-corrections { background: #ffedd5; color: var(--color-secondary-dark); border-color: var(--color-tertiary); }
.oa-cat-chip.oa-cat-clarification { background: #dbeafe; color: var(--color-info-text); border-color: #93c5fd; }

/* D-complete: sticky action bar so the applicant never scrolls back up. */
.oa-sticky-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin: -14px -16px 12px; border-radius: 12px 12px 0 0;
  background: var(--navy, var(--navy)); color: #fff; font-size: 0.85rem;
}
.oa-sticky-bar .ref-number { color: #fff; }
.oa-sticky-bar strong { color: #fde68a; }

/* D11: summary + evaluator message blocks. */
.oa-summary-block { margin: 12px 0; }
.oa-eval-message {
  margin: 12px 0; padding: 12px 14px; border-radius: 10px;
  background: var(--gray-50, #f8fafc); border: 1px solid var(--gray-200, #e2e8f0);
  font-size: 0.88rem; color: var(--navy, var(--navy)); line-height: 1.5;
}
.oa-eval-message .ownership-label { display: block; margin-bottom: 4px; }

/* D12: category-grouped task cards (D3/D4). */
.oa-task-group { margin-top: 16px; }
.oa-group-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 0.86rem; letter-spacing: 0.02em;
  padding-bottom: 6px; margin-bottom: 10px; border-bottom: 2px solid var(--gray-100, #f1f5f9);
}
.oa-group-head.oa-cat-documents { color: var(--color-warning-text); border-color: #fcd34d; }
.oa-group-head.oa-cat-corrections { color: var(--color-secondary-dark); border-color: var(--color-tertiary); }
.oa-group-head.oa-cat-clarification { color: var(--color-info-text); border-color: #93c5fd; }
.oa-group-count {
  margin-left: auto; background: var(--gray-100, #f1f5f9); color: var(--gray-600, #475569);
  border-radius: 999px; padding: 1px 9px; font-size: 0.75rem;
}

.oa-task-card {
  border: 1px solid var(--gray-200, #e2e8f0); border-left-width: 4px;
  border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff;
}
.oa-task-card.oa-cat-documents { border-left-color: var(--color-warning); }
.oa-task-card.oa-cat-corrections { border-left-color: var(--color-primary); }
.oa-task-card.oa-cat-clarification { border-left-color: var(--color-info); }
.oa-task-card.is-done { border-left-color: var(--success, var(--color-success)); background: #f6fdf9; }
.oa-task-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.oa-task-head strong { color: var(--navy, var(--navy)); font-size: 0.95rem; }
.oa-task-card.is-done .oa-task-head strong { text-decoration: line-through; color: var(--gray-500, #64748b); }
.oa-task-request { margin: 8px 0; font-size: 0.85rem; color: var(--gray-600, #475569); line-height: 1.5; }
.oa-task-request .ownership-label { display: block; margin-bottom: 2px; }
.oa-task-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }

.oa-task-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--success, var(--color-success)); background: #fff; color: var(--success, var(--color-success-text));
  border-radius: 8px; padding: 6px 12px; font-size: 0.82rem; font-weight: 700;
}
.oa-task-toggle:hover { background: #f0fdf4; }
.oa-task-toggle.is-done { border-color: var(--gray-300, #cbd5e1); color: var(--gray-500, #64748b); }
.oa-task-state { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--gray-500, #64748b); }
.oa-task-state.is-done { color: var(--success, var(--color-success-text)); font-weight: 700; }

/* Guidance + timeline (built from real OA timestamps). */
.oa-whatnext { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--navy-tint, #eaf1fb); }
.oa-whatnext .ownership-label { display: block; margin-bottom: 6px; }
.oa-whatnext ol { margin: 0; padding-left: 20px; font-size: 0.85rem; color: var(--navy, var(--navy)); line-height: 1.6; }

.oa-timeline { list-style: none; margin: 16px 0 0; padding: 0; }
.oa-timeline li { display: flex; gap: 12px; padding: 0 0 14px 4px; position: relative; }
.oa-timeline li:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 20px; bottom: 0; width: 2px; background: var(--gray-200, #e2e8f0); }
.oa-timeline li > i { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.7rem; background: var(--gray-100, #f1f5f9); color: var(--gray-400, #94a3b8); z-index: 1; }
.oa-timeline li.done > i { background: #dcfce7; color: var(--success, var(--color-success-text)); }
.oa-timeline li.current > i { background: var(--warning-tint, #fdf3d7); color: var(--color-accent-text); }
.oa-tl-label { font-size: 0.86rem; color: var(--navy, var(--navy)); font-weight: 600; }

/* Closed states (D-complete): completed = green submitted, withdrawn = gray. */
.oa-record.oa-closed-done { border-left: 4px solid var(--success, var(--color-success)); background: #f6fdf9; }
.oa-record.oa-closed-withdrawn { border-left: 4px solid var(--gray-300, #cbd5e1); background: var(--gray-50, #f8fafc); }
.oa-closed-body { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; }
.oa-closed-body > i { font-size: 1.4rem; }
.oa-closed-done .oa-closed-body > i { color: var(--success, var(--color-success-text)); }
.oa-closed-withdrawn .oa-closed-body > i { color: var(--gray-400, #94a3b8); }
.oa-closed-body strong { color: var(--navy, var(--navy)); }
.oa-closed-body p { margin: 4px 0 0; font-size: 0.85rem; color: var(--gray-600, #475569); line-height: 1.5; }

/* Mobile: cards stack; sticky bar stays glued to the bottom (deadline + CTA visible). */
@media (max-width: 640px) {
  .oa-task-head { flex-direction: column; gap: 6px; }
  .oa-task-actions { flex-direction: column; align-items: stretch; }
  .oa-task-toggle, .oa-task-actions .btn { width: 100%; justify-content: center; }
  .oa-sticky-bar {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; margin: 0;
    border-radius: 12px 12px 0 0; box-shadow: 0 -6px 20px rgba(0,0,0,0.18);
  }
  .oa-detail-panel { padding-bottom: 72px; }
}

/* ===== Registry Filing 2.0 (F1/F2): autosave indicator + draft strips ===== */
.autosave-indicator {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--navy, var(--navy));
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.autosave-indicator.is-saved { background: var(--success, var(--color-success)); }
.autosave-indicator.is-error { background: var(--danger, var(--color-error)); }

.draft-resume-strip { border-left: 3px solid var(--navy, var(--navy)); }
.legacy-draft-card { border-left: 3px solid var(--warning, var(--color-warning)); background: var(--warning-tint, #fdf3d7); }
.draft-resume-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100, #f1f5f9);
}
.draft-resume-row:last-of-type { border-bottom: none; }

/* F4: lane switcher — Step 1 of every filing wizard. */
.filing-type-switcher { margin-top: 8px; font-size: 0.82rem; color: var(--gray-600, #475569); }
.filing-type-switcher summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.filing-type-switcher summary::-webkit-details-marker { display: none; }
.filing-switch-link { color: var(--navy, var(--navy)); font-weight: 700; text-decoration: underline; }
.filing-type-options { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 12px; border: 1px solid var(--gray-200, #e2e8f0); border-radius: 10px; background: #fff; }

/* F5: server readiness meter (registry checklist). */
.server-readiness { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--gray-200, #e2e8f0); border-left: 4px solid var(--navy, var(--navy)); border-radius: 10px; background: #fff; text-align: left; }
.server-readiness--blocked { border-left-color: var(--danger, var(--color-error)); color: var(--danger, var(--color-error-text)); font-weight: 600; }
.server-readiness-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.server-readiness-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 6px; }
.server-readiness-list li { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--navy, var(--navy)); }
.server-readiness-list li span { margin-left: auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }
.server-readiness-list li.sr-ready i { color: var(--success, var(--color-success-text)); }
.server-readiness-list li.sr-missing i, .server-readiness-list li.sr-missing span { color: var(--danger, var(--color-error-text)); }
.server-readiness-list li.sr-review i, .server-readiness-list li.sr-review span { color: var(--color-accent-text); }
.server-readiness-list li.sr-optional i, .server-readiness-list li.sr-optional span { color: var(--gray-400, #94a3b8); }

/* F8: smart filing triage. */
.filing-triage-card { border-left: 3px solid var(--gold-dark, var(--color-warning)); margin-bottom: 24px; }
.triage-question { margin-top: 12px; }
.triage-label { font-weight: 700; color: var(--navy, var(--navy)); font-size: 0.9rem; margin-bottom: 8px; }
.triage-options { display: flex; gap: 8px; flex-wrap: wrap; }
.triage-option {
  border: 1.5px solid var(--gray-200, #e2e8f0); background: #fff; border-radius: 999px;
  padding: 8px 14px; font-size: 0.82rem; cursor: pointer; color: var(--gray-600, #475569);
}
.triage-option:hover { border-color: var(--navy, var(--navy)); }
.triage-option.active { border-color: var(--navy, var(--navy)); background: var(--navy, var(--navy)); color: #fff; font-weight: 700; }
.triage-recommendation { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--navy-tint, #eaf1fb); border: 1px solid rgba(139, 69, 19, 0.2); }
.triage-rec-head { font-size: 1rem; color: var(--navy, var(--navy)); }
.triage-recommendation ul { margin: 8px 0 0; padding-left: 20px; font-size: 0.85rem; color: var(--gray-600, #475569); line-height: 1.55; }

/* F10: success center facts + next steps. */
.success-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px 18px; margin: 0 auto 18px; max-width: 560px; text-align: left; }
.success-facts > div { display: flex; flex-direction: column; gap: 2px; }
.success-next { max-width: 560px; margin: 0 auto 22px; text-align: left; padding: 14px 16px; border-radius: 12px; background: var(--gray-50, #f8fafc); border: 1px solid var(--gray-200, #e2e8f0); }
.success-next ol { margin: 0; padding-left: 20px; font-size: 0.86rem; color: var(--navy, var(--navy)); line-height: 1.6; }

/* Applicant idle pause: a non-destructive full-screen overlay. The session and
   page state stay intact behind it; the applicant clicks Resume to continue. */
.session-paused-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
}
.session-paused-card {
  max-width: 420px;
  width: 100%;
  text-align: center;
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.session-paused-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy-tint, #eaf1fb);
  color: var(--navy, var(--navy));
  font-size: 1.4rem;
}
.session-paused-card h2 { margin: 0 0 10px; font-size: 1.3rem; color: var(--navy, var(--navy)); }
.session-paused-card p { margin: 0 0 22px; color: #475569; line-height: 1.5; }

/* Brand & System Config: landing page logo controls. */
.landing-logo-control { border-top: 1px solid var(--gray-100, #f1f5f9); padding-top: 12px; }
.landing-logo-preview { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.landing-logo-preview img,
.landing-logo-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  border: 1px solid var(--gray-200, #e2e8f0);
  background: var(--gray-50, #f8fafc);
  object-fit: contain;
  padding: 6px;
}
.landing-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400, #94a3b8);
  font-size: 1.4rem;
}

/* ============================================================
   LIVE FORM 100 WORKSPACE
   ============================================================ */
.form100-ws { padding: 4px 0 96px; }

.form100-ws__topbar {
  display: flex; flex-wrap: wrap; gap: 18px 24px;
  align-items: flex-end; justify-content: space-between;
  background: #fff; border: 1px solid var(--gray-100, #eef1f5);
  border-radius: 18px; padding: 18px 22px; margin-bottom: 14px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}
.form100-ws__kicker {
  display: inline-block; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange, var(--color-accent-text));
}
.form100-ws__titlewrap h1 { color: var(--navy, var(--navy-dark)); font-size: 1.5rem; font-weight: 800; margin: 4px 0; }
.form100-ws__titlewrap p { color: var(--gray-500, #64748b); font-size: 0.9rem; max-width: 46ch; }
.form100-ws__status { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 220px; }
.form100-autosave {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.78rem; font-weight: 700; color: var(--color-success-text);
  background: #e8f6ee; border-radius: 999px; padding: 5px 12px;
}
.form100-autosave.is-saving { color: var(--color-warning-text); background: #fdf3e3; }
.form100-progress { width: 220px; height: 8px; background: var(--gray-100, #eef1f5); border-radius: 999px; overflow: hidden; }
.form100-progress__bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--color-success), var(--color-success)); transition: width 0.25s ease; }
.form100-progress__label { font-size: 0.74rem; color: var(--gray-500, #64748b); font-weight: 600; }

.form100-ws__tabs { display: none; gap: 8px; margin-bottom: 12px; }
.form100-tab {
  flex: 1; padding: 10px; border-radius: 12px; font-weight: 700; font-size: 0.85rem;
  border: 1px solid var(--gray-200, #d9dee7); background: #fff; color: var(--gray-600, #475569); cursor: pointer;
}
.form100-tab.is-active { background: var(--navy, var(--navy-dark)); color: #fff; border-color: var(--navy, var(--navy-dark)); }

.form100-ws__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }

.form100-ws__input { display: flex; flex-direction: column; gap: 16px; }
.form100-section {
  background: #fff; border: 1px solid var(--gray-100, #eef1f5); border-radius: 16px;
  padding: 18px 20px; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}
.form100-section__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.form100-section__head i { color: var(--orange, var(--color-accent-text)); }
.form100-section__head h3 { font-size: 1rem; font-weight: 800; color: var(--navy, var(--navy-dark)); margin: 0; }
.form100-grid { display: grid; gap: 12px 16px; }
.form100-grid--1 { grid-template-columns: 1fr; }
.form100-grid--2 { grid-template-columns: 1fr 1fr; }
.form100-field { display: flex; flex-direction: column; gap: 5px; }
.form100-field--full { grid-column: 1 / -1; }
.form100-field__label { font-size: 0.78rem; font-weight: 700; color: var(--gray-600, #475569); }
.form100-req { color: var(--color-error-text); font-weight: 800; }
.form100-input {
  width: 100%; padding: 9px 12px; border-radius: 10px; font-size: 0.9rem;
  border: 1px solid var(--gray-200, #d9dee7); background: #fbfcfe; color: var(--navy, var(--navy-dark));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form100-input:focus { outline: none; border-color: var(--orange, var(--color-primary)); box-shadow: 0 0 0 3px rgba(226, 104, 60, 0.14); background: #fff; }
.form100-input.is-invalid { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.form100-field__error { font-size: 0.72rem; color: var(--color-error-text); min-height: 0.9em; }

.form100-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.form100-seg__btn {
  padding: 7px 12px; border-radius: 9px; font-size: 0.82rem; font-weight: 700; cursor: pointer;
  border: 1px solid var(--gray-200, #d9dee7); background: #fff; color: var(--gray-600, #475569);
}
.form100-seg__btn.is-active { background: var(--navy, var(--navy-dark)); color: #fff; border-color: var(--navy, var(--navy-dark)); }

.form100-missing {
  border: 1px solid #f6d6a8; background: #fff9ef; border-radius: 14px; padding: 12px 16px;
  font-size: 0.82rem; color: var(--color-warning-text);
}
.form100-missing--ok { border-color: #bfe6cd; background: #eef9f2; color: var(--color-success-text); font-weight: 700; }
.form100-missing__title { font-weight: 800; margin-bottom: 6px; }
.form100-missing ul { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.form100-missing li button {
  border: 1px dashed var(--color-primary); background: #fff; color: var(--color-warning-text); border-radius: 999px;
  padding: 3px 10px; font-size: 0.74rem; font-weight: 700; cursor: pointer;
}

.form100-ws__preview { position: sticky; top: 12px; }
.form100-preview-frame {
  background: var(--gray-100, #eef1f5); border-radius: 16px; padding: 14px;
  max-height: calc(100vh - 40px); overflow: auto;
}

/* Missing-required highlight inside the official preview */
.patent-official-cell.is-missing { background: #fff4f4 !important; box-shadow: inset 0 0 0 2px #f2b8b8; }
.patent-official-cell.is-missing .patent-official-cell__label::after { content: " • required"; color: var(--color-error-text); font-weight: 700; }

.form100-ws__actionbar {
  position: sticky; bottom: 0; z-index: 20; margin-top: 16px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(6px);
  border: 1px solid var(--gray-100, #eef1f5); border-radius: 16px; padding: 12px 16px;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
}

/* Final review modal */
.form100-review { display: flex; flex-direction: column; gap: 14px; }
.form100-review__banner { background: #eef9f2; color: var(--color-success-text); border-radius: 12px; padding: 10px 14px; font-weight: 700; font-size: 0.86rem; }
.form100-review__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.form100-review__row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; padding: 4px 0; border-bottom: 1px dashed var(--gray-100, #eef1f5); }
.form100-review__row span { color: var(--gray-500, #64748b); }
.form100-review__row strong { color: var(--navy, var(--navy-dark)); text-align: right; }
.form100-review__previewwrap { max-height: 50vh; overflow: auto; background: var(--gray-100, #eef1f5); border-radius: 12px; padding: 10px; }
.form100-review__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

@media (max-width: 960px) {
  .form100-ws__tabs { display: flex; }
  .form100-ws__layout { grid-template-columns: 1fr; }
  .form100-ws__layout[data-active-pane="input"] #form100-preview-pane { display: none; }
  .form100-ws__layout[data-active-pane="preview"] #form100-input-pane { display: none; }
  .form100-ws__preview { position: static; }
  .form100-grid--2 { grid-template-columns: 1fr; }
  .form100-review__grid { grid-template-columns: 1fr; }
}

/* Browsers strip background-color from print/PDF output by default -- this
   is how the paper forms' checked marks and section title bars are drawn, so
   without this they print as blank/unselected even when correctly marked on
   screen. Applies to every @media print block in this stylesheet. */
@media print {
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact; }
}

/* Print-to-PDF: show only the official form preview */
@media print {
  body.form100-printing * { visibility: hidden !important; }
  body.form100-printing #form100-preview,
  body.form100-printing #form100-preview * { visibility: visible !important; }
  body.form100-printing #form100-preview {
    position: absolute; left: 0; top: 0; width: 100%;
    max-height: none; overflow: visible; padding: 0; background: #fff;
  }
  body.form100-printing .form100-preview-frame { background: #fff; padding: 0; }
  @page { size: A4; margin: 12mm; }
}

/* Print-to-PDF: evaluator's "Download Forms" on a submitted case prints the
   official paper packet in an isolated popup window (see
   printEvaluatorCasePacket) rather than hiding/repositioning it in place --
   this page's grid-sidebar layout broke the hide-and-absolutely-position
   trick used for Form 100 above. These rules keep sections from splitting
   awkwardly across a page break in that popup, which shares this stylesheet. */
@media print {
  .psu-form-paper,
  .patent-paper--official,
  .patent-supplemental-official-block,
  .psu-disclosure-section,
  .patent-official-row {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Each form now renders inside a [data-print-form] wrapper (so a single
     form can be printed on its own) -- break before each one after the
     first, whether the whole packet or just one form is being printed. */
  .psu-form-stack > [data-print-form] + [data-print-form],
  .patent-paper-wrap--official {
    break-before: page;
    page-break-before: always;
  }
  @page { size: A4; margin: 12mm; }
}

/* ============================================================
   DOCUMENT "EXPLAIN THIS" — trigger + popover
   ============================================================ */
.doc-explain-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0; padding: 0;
  border-radius: 50%; border: 1px solid var(--orange, var(--color-primary));
  background: #fff; color: var(--orange, var(--color-accent-text));
  font-size: 0.62rem; font-weight: 800; cursor: pointer; line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.doc-explain-btn:hover { background: var(--orange, var(--color-primary)); color: var(--color-on-primary); }
.doc-explain-btn:focus-visible { outline: 2px solid var(--orange, var(--color-focus)); outline-offset: 2px; }
.doc-explain-btn:active { transform: scale(0.92); }

.doc-explain-popover {
  position: fixed; z-index: 4000; width: min(340px, calc(100vw - 24px));
  background: #fff; border: 1px solid var(--gray-200, #d9dee7); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
  animation: docExplainIn 0.12s ease-out;
}
@keyframes docExplainIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.doc-explain__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--gray-100, #eef1f5);
}
.doc-explain__title { font-weight: 800; color: var(--navy, var(--navy-dark)); font-size: 0.92rem; flex: 1; min-width: 0; }
.doc-explain__badge { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; padding: 3px 7px; border-radius: 999px; }
.doc-explain__badge.is-required { background: #fdeaea; color: var(--color-error-text); }
.doc-explain__badge.is-optional { background: #eaf1fb; color: var(--color-info-text); }
.doc-explain__close {
  border: none; background: transparent; color: var(--gray-400, #94a3b8);
  cursor: pointer; font-size: 0.95rem; padding: 2px 4px; line-height: 1; border-radius: 6px;
}
.doc-explain__close:hover { color: var(--navy, var(--navy-dark)); background: var(--gray-100, #eef1f5); }
.doc-explain__scroll { padding: 12px 14px; max-height: min(60vh, 440px); overflow-y: auto; }
.doc-explain__block { margin-bottom: 12px; }
.doc-explain__block:last-of-type { margin-bottom: 8px; }
.doc-explain__label {
  display: flex; align-items: center; gap: 7px; margin-bottom: 3px;
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gray-500, #64748b);
}
.doc-explain__label i { color: var(--orange, var(--color-accent-text)); }
.doc-explain__body { font-size: 0.83rem; color: var(--navy, var(--navy-dark)); line-height: 1.5; }
.doc-explain__list { margin: 2px 0 0; padding-left: 18px; }
.doc-explain__list li { margin-bottom: 2px; }
.doc-explain__consequence {
  margin-top: 6px; padding: 8px 10px; border-radius: 8px;
  font-size: 0.78rem; font-weight: 600; line-height: 1.45;
}
.doc-explain__consequence.is-required { background: #fdeaea; color: var(--color-error-text); }
.doc-explain__consequence.is-optional { background: #eef6ef; color: var(--color-success-text); }

/* ============================================================
   OFFICE ACTION RESPONSE DOCUMENT UPLOAD
   ============================================================ */
.oa-doc-statusrow { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; flex-wrap: wrap; }
.oa-doc-state { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; }
.oa-doc-state.is-uploaded { background: #e8f6ee; color: var(--color-success-text); }
.oa-doc-state.is-waiting { background: #fdf3e3; color: var(--color-warning-text); }

.oa-doc-files { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.oa-doc-file {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--gray-200, #d9dee7); border-radius: 10px; padding: 8px 12px;
}
.oa-doc-file.is-current { border-color: rgba(34, 197, 94, 0.35); background: rgba(34, 197, 94, 0.05); }
.oa-doc-file.is-old { opacity: 0.75; }
.oa-doc-file i { color: var(--navy, var(--navy-dark)); }
.oa-doc-file__name { flex: 1; min-width: 140px; font-size: 0.82rem; font-weight: 600; color: var(--navy, var(--navy-dark)); word-break: break-word; }
.oa-doc-file__meta { font-size: 0.72rem; color: var(--gray-500, #64748b); white-space: nowrap; }

.oa-doc-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.oa-doc-status { font-size: 0.78rem; }
.oa-upl-uploading { display: inline-flex; align-items: center; gap: 6px; color: var(--color-warning-text); font-weight: 700; }
.oa-upl-failed { display: inline-flex; align-items: center; gap: 6px; color: var(--color-error-text); font-weight: 700; }

.oa-submit-progress { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.85rem; }
.oa-submit-ready {
  margin-top: 12px; padding: 14px 16px; border-radius: 12px;
  background: #eef9f2; border: 1px solid #bfe6cd;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.oa-submit-ready p { margin: 0; color: var(--color-success-text); font-weight: 700; font-size: 0.9rem; }
.oa-submit-ready i { margin-right: 6px; }

/* ============================================================
   BOOT SPLASH — shown instantly, removed once the SPA renders
   ============================================================ */
#app-splash {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #ffffff 0%, #fff4ee 100%);
  transition: opacity 0.35s ease;
}
#app-splash.is-hidden { opacity: 0; pointer-events: none; }
.app-splash__box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.app-splash__logo {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff; color: #fff; font-size: 1.7rem;
  box-shadow: 0 10px 25px rgba(22, 40, 79, 0.12);
  border: 1px solid rgba(22, 40, 79, 0.08);
  overflow: hidden;
  padding: 4px;
}
.app-splash__logo img { width: 100%; height: 100%; object-fit: contain; }
.app-splash__spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(226, 104, 60, 0.25);
  border-top-color: var(--orange, var(--color-primary));
  animation: appSplashSpin 0.8s linear infinite;
}
@keyframes appSplashSpin { to { transform: rotate(360deg); } }
.app-splash__text {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--navy, var(--navy-dark));
  text-align: center;
  max-width: 380px;
  letter-spacing: 0.03em;
  line-height: 1.35;
}
.app-splash__sub { font-size: 0.82rem; color: var(--gray-500, #64748b); text-align: center; }
@media (prefers-reduced-motion: reduce) { .app-splash__spinner { animation-duration: 2s; } }

/* ===== PWA CHROME =====
   Connectivity indicator, install affordance and update prompt. All three are
   injected by app.js (initPwa) and sit above the app in their own layer; none
   of them alter the existing layout. */

/* Standalone (installed) mode has no browser chrome, so the fixed top nav must
   clear the device status bar itself. viewport-fit=cover is set in index.html. */
@media all and (display-mode: standalone) {
  #public-nav { padding-top: env(safe-area-inset-top); }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

.tcb-net-status {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translate(-50%, 16px);
  z-index: 100000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.tcb-net-status.show { opacity: 1; transform: translate(-50%, 0); }
.tcb-net-status.is-offline { background: var(--danger-tint, #fdeaea); color: var(--color-error-text); }
.tcb-net-status.is-online { background: var(--success-tint, #e8f7ee); color: var(--color-success-text); }

.tcb-install-bar {
  position: fixed;
  right: calc(18px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 100000;
  display: none;
  align-items: stretch;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(22, 40, 79, 0.24);
}
.tcb-install-bar.show { display: flex; }
.tcb-install-bar button {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--color-on-primary);
  background: var(--brand-action, var(--color-primary));
  min-height: 44px;
}
.tcb-install-action { display: inline-flex; align-items: center; gap: 9px; padding: 0 18px; font-size: 0.88rem; }
.tcb-install-action:hover { background: var(--brand-strong, var(--color-primary-dark)); }
.tcb-install-dismiss {
  width: 44px;
  font-size: 1.2rem;
  line-height: 1;
  background: var(--brand-strong, var(--color-primary-dark));
}
.tcb-install-dismiss:hover { background: var(--color-primary-dark); }

.tcb-update-banner {
  position: fixed;
  left: 50%;
  top: calc(16px + env(safe-area-inset-top));
  transform: translate(-50%, -14px);
  z-index: 100001;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(94vw, 520px);
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--navy, var(--navy));
  color: #fff;
  font-size: 0.86rem;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.28);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.tcb-update-banner.show { opacity: 1; transform: translate(-50%, 0); }
.tcb-update-text { flex: 1; }
.tcb-update-banner button {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
}
.tcb-update-banner .tcb-update-refresh { background: #fff; color: var(--navy, var(--navy)); border-color: #fff; }

@media (max-width: 560px) {
  .tcb-install-bar { left: calc(14px + env(safe-area-inset-left)); right: calc(14px + env(safe-area-inset-right)); }
  .tcb-install-action { flex: 1; justify-content: center; }
  .tcb-update-banner { flex-wrap: wrap; }
  .tcb-update-text { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tcb-net-status, .tcb-update-banner { transition: none; }
}

/* ============================================================
   MOBILE DRAWERS + APPLICANT BOTTOM NAVIGATION
   Phase 3 / blocker tier of the mobile UX pass.

   Scope discipline: every rule below is either inside a
   max-width media query or gated on a body class that only the
   portal sets, so the desktop layout is untouched.
   ============================================================ */

/* ---- Shared drawer scrim ---- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 940; /* under .sidebar (950), over page content */
  animation: drawerFade 0.18s ease;
}
.drawer-backdrop[hidden] { display: none; }
@keyframes drawerFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Scroll lock: the page behind an open drawer must not move. */
body.drawer-open {
  overflow: hidden;
  touch-action: none;
}

@media (max-width: 768px) {
  /* ---- Public nav drawer ----
     Previously a bare display:none/flex toggle. It is now a real panel:
     fixed, own scroll, capped width so it never swallows the whole screen
     on a large phone, and it sits above the scrim. */
  .nav-links.open {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    /* NOT `bottom: 0`. #public-nav carries backdrop-filter, which makes it the
       containing block for its position:fixed descendants -- `bottom` would
       resolve against the 72px header, collapsing the drawer to a strip. An
       explicit viewport height sidesteps the containing block entirely. */
    height: 100vh;
    height: 100dvh;
    width: min(86vw, 380px);
    max-width: 380px;
    padding: calc(16px + env(safe-area-inset-top)) 16px
             calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    box-shadow: -18px 0 44px rgba(15, 23, 42, 0.18);
    border-bottom: none;
    border-left: 1px solid rgba(255, 112, 67, 0.14);
    z-index: 960;
    gap: 2px;
    animation: drawerSlideIn 0.22s ease;
  }
  @keyframes drawerSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
  .nav-links.open > li { width: 100%; }
  /* Matches bare <a> children too -- the Help menu's FAQ / IP Guidelines /
     Contact Us links carry no .dropdown-item class. */
  .nav-links.open .nav-link,
  .nav-links.open .dropdown-content a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px; /* touch target */
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 1rem;
  }

  /* The Services / Help menus are hover-driven on desktop, which makes their
     routes unreachable by touch. Inside the drawer they become tap-to-expand
     accordion groups: flattened into the flow, collapsed by default so the
     top-level destinations and Login stay above the fold. */
  .nav-links.open .dropdown-content,
  .nav-links.open .sub-dropdown-content {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    min-width: 0;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .nav-links.open .nav-item-dropdown.is-expanded > .dropdown-content,
  .nav-links.open .nav-item-sub-dropdown.is-expanded > .sub-dropdown-content {
    display: block;
  }
  .nav-links.open .sub-dropdown-content {
    padding-left: 14px;
    border-left: 2px solid rgba(255, 112, 67, 0.16);
    margin-left: 14px;
  }
  .nav-links.open .dropdown-header {
    padding: 14px 14px 6px;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-400, #94a3b8);
  }
  /* Chevrons become the expand/collapse affordance: pushed to the trailing
     edge and rotated a quarter turn when the group is open. */
  .nav-links.open .nav-link .fa-chevron-down,
  .nav-links.open .sub-trigger .fa-chevron-right {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0.55;
    transition: transform 0.18s ease;
  }
  .nav-links.open .nav-item-dropdown.is-expanded > .nav-link .fa-chevron-down {
    transform: rotate(180deg);
  }
  .nav-links.open .nav-item-sub-dropdown.is-expanded > .sub-trigger .fa-chevron-right {
    transform: rotate(90deg);
  }

  .nav-links.open .btn-signup,
  .nav-links.open .btn-login {
    justify-content: center;
    margin-top: 8px;
  }

  /* ---- Dashboard sidebar drawer ---- */
  .sidebar.mobile-open {
    width: min(84vw, 320px);
    box-shadow: 18px 0 44px rgba(15, 23, 42, 0.18);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 960;
  }
  .sidebar.mobile-open .sidebar-nav a {
    min-height: 48px;
  }

  .mobile-menu-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---- Applicant bottom navigation ----
   Replaces the horizontally-scrolling #dashboard-top-nav strip on phones.
   Hidden by default; shown only for applicants (body.has-bottom-nav) below
   900px. Desktop and the evaluator/admin sidebar layout are unaffected. */
.bottom-nav { display: none; }

@media (max-width: 900px) {
  body.has-bottom-nav .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 930;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 112, 67, 0.16);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav-item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px; /* >= 44px touch target */
    padding: 8px 4px;
    text-decoration: none;
    color: var(--gray-500, #64748b);
    font-weight: 600;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav-item i { font-size: 1.15rem; }
  .bottom-nav-label {
    font-size: 0.72rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
  }
  .bottom-nav-item.active { color: var(--orange, var(--color-accent-text)); }
  .bottom-nav-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--orange, var(--color-primary));
  }
  .bottom-nav-item:focus-visible {
    outline: 2px solid var(--orange, var(--color-focus));
    outline-offset: -3px;
    border-radius: 8px;
  }
  .bottom-nav-badge {
    position: absolute;
    top: 5px;
    left: calc(50% + 7px);
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-error-text);
    color: #fff;
    font-size: 0.63rem;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
  }
  .bottom-nav-badge[hidden] { display: none; }

  /* Content must clear the bar -- otherwise the last card or the primary
     submit button of a form sits underneath it. */
  body.has-bottom-nav #main-content {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
  /* The bottom nav now carries primary navigation, so the top strip that used
     to scroll sideways is redundant on phones. */
  body.has-bottom-nav #dashboard-top-nav { display: none !important; }
  /* The assistant button sat behind the bar (only a sliver showed over the
     "Me" tab). Lift it above the bar, and let content clear both. */
  body.has-bottom-nav .floating-speed-dial {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.has-bottom-nav #main-content {
    padding-bottom: calc(148px + env(safe-area-inset-bottom)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-backdrop,
  .nav-links.open { animation: none; }
}

/* ============================================================
   APPLICANT MOBILE: APPLICATION LIST
   The case list is built with inline styles in app.js, so the
   overrides here need !important to reach the same properties.
   ============================================================ */

@media (max-width: 640px) {
  /* Status filter tabs: 7 statuses in a nowrap flex row measured 892px inside
     a 358px column. Contained horizontal scroll is the right pattern for a
     filter strip -- the page itself no longer scrolls sideways. */
  .status-hub-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .status-hub-container::-webkit-scrollbar { display: none; }
  .status-hub-bar {
    gap: 14px !important;
    padding-bottom: 2px;
  }
  .status-hub-bar > * { flex: none; }

  /* Case card header is a two-group flex row that cannot fit a phone, so the
     card's overflow:hidden was cutting titles off mid-word. Let it wrap. */
  .case-card-header {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px !important;
    align-items: flex-start !important;
  }
  .case-card-header > div { min-width: 0; }
  /* Status + chevron group drops to its own full-width line, left aligned. */
  .case-card-header > div:last-child {
    width: 100%;
    justify-content: space-between;
    gap: 12px !important;
  }
  .case-card-header > div:last-child > div { text-align: left !important; }
  /* Long titles wrap instead of being clipped by the card. */
  .case-card-header h3 {
    font-size: 1rem !important;
    overflow-wrap: anywhere;
  }
  .case-card-header h3 + * { flex: none; }
  .case-detail-panel { padding: 16px !important; }
}

/* ============================================================
   APPLICANT MOBILE: FORM CONTROLS, TOUCH TARGETS, TEXT FLOOR
   ============================================================ */

@media (max-width: 640px) {
  /* The filter strip must keep its natural width so the container scrolls it,
     rather than being squeezed and spilling its own content. */
  .status-hub-bar { width: max-content; }

  /* iOS Safari auto-zooms the page whenever a focused control's text is under
     16px. Every applicant input measured 15.2px, so tapping any field zoomed
     the layout and the user had to pinch back out. Checkboxes and radios are
     excluded -- they render from font-size and would become oversized. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }
  /* Comfortable field height without disturbing native toggles. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select {
    min-height: 44px;
  }
  /* A checkbox/radio's own box stays native, but its label row becomes the
     touch target. */
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Buttons measured as low as 18px tall. Anything the user taps gets a
     comfortable target; icon-only controls get a square one. */
  #main-content .btn,
  #main-content button:not(.btn-text) {
    min-height: 44px;
  }
  #main-content .btn.btn-sm {
    min-height: 40px;
  }

  /* Supporting text bottomed out at 10.4px. 12px is the floor for anything
     carrying meaning; badges and labels stay visually secondary via weight
     and colour rather than by shrinking further. */
  #main-content .ownership-label,
  #main-content .badge,
  #main-content .ann-badge,
  #main-content .stat-label,
  #main-content small {
    font-size: 0.75rem !important;
  }

  /* Long conversation titles were clipped mid-word by overflow:hidden. */
  .chat-thread-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Remaining sub-12px labels and undersized tap targets found by the applicant
   mobile audit. Kept narrow so desktop density is unchanged. */
@media (max-width: 640px) {
  /* "Explain This" document guide: 24px wide is well under a fingertip, and
     it is the only route to the document help text (Phase 8). */
  #main-content .application-info-guide {
    min-width: 44px;
    min-height: 44px;
  }
  /* Text buttons were excluded from the button floor above; they still need a
     tap area even though they carry no visible chrome. */
  #main-content .btn-text {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  #main-content .form100-ws__kicker,
  #main-content .form100-progress__label,
  #main-content .chat-case-kicker,
  #main-content .field-label,
  #main-content label {
    font-size: 0.75rem;
  }
  /* form100 tab buttons carried 11.84px labels. */
  #main-content .form100-tab {
    font-size: 0.8rem;
    min-height: 44px;
  }
}

/* Two stat cards side by side stop fitting below ~400px: the icon, padding and
   label have a combined min-content width that clips the card. Small phones
   get one column. The 640px rule above keeps two columns for larger phones. */
@media (max-width: 400px) {
  .dashboard-stats-grid {
    grid-template-columns: 1fr !important;
  }
  .dashboard-stats-grid > .stat-card { min-width: 0; }
}

/* ============================================================
   STAGE 2 -- APPLICANT OFFICE ACTION JOURNEY (MOBILE)
   Case detail, Office Action tasks, document upload, dialogs.
   ============================================================ */

/* Grid children default to min-width:auto, so the case-detail column refused to
   shrink and pushed 385px of content through a 358px track -- the same class of
   bug as #main-content in Stage 1, one level down. */
.detail-layout > *,
.submission-detail-main,
.detail-panel {
  min-width: 0;
}

@media (max-width: 640px) {
  /* Four step chips across a phone squeezed each track to ~60px while the chip
     needed 110-143px, so every label was clipped. Two rows of two fit at 360px
     and stay legible; the strip keeps its role as a compact progress cue. */
  .submitted-form-step-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .patent-step-chip {
    min-width: 0;
    padding: 10px 12px;
    gap: 8px;
    font-size: 0.8rem;
  }
  .patent-step-chip > * { min-width: 0; }

  /* Office Action task cards: heads are two-part flex rows (field + state
     chip) that must wrap rather than crush the state indicator. */
  .oa-task-head,
  .oa-record-head,
  .oa-sticky-bar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .oa-task-head > strong { min-width: 0; overflow-wrap: anywhere; }

  /* Uploaded filenames are long and unbreakable ("Revised-Technical-Drawing-
     Sheet-2-Corrected-...pdf"); let them wrap so the name, its Current/Previous
     state and the download control all stay reachable. */
  .oa-doc-file { align-items: flex-start; }
  .oa-doc-file__name {
    min-width: 0;
    flex: 1 1 100%;
    overflow-wrap: anywhere;
  }
  .oa-doc-file__meta {
    font-size: 0.75rem;
    white-space: normal; /* was nowrap -- forced the row wider than the card */
  }
  .oa-doc-file .btn { min-height: 44px; }

  /* The sticky "N tasks left / Review Office Action" bar must clear the fixed
     topbar -- at top:0 it parks underneath it and is never seen. */
  .oa-sticky-bar {
    position: sticky;
    top: calc(var(--topbar-h) + 4px);
    z-index: 3;
  }
  .oa-submit-ready,
  .oa-submit-block { font-size: 0.85rem; }
}

/* ---- Mobile dialogs: bottom sheets ----
   .modal-card was a centred 600px box with the whole card scrolling, so on a
   phone the header scrolled away and the confirm button could sit below the
   fold with no visible anchor. On mobile it becomes a bottom sheet with a
   pinned header and an internally scrolling body. */
@media (max-width: 640px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal-card,
  .modal-card.xl,
  .modal-card.form-document-modal,
  .modal-card.marketplace-detail-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: sheetUp 0.22s ease;
  }
  @keyframes sheetUp {
    from { transform: translateY(6%); opacity: 0.6; }
    to { transform: translateY(0); opacity: 1; }
  }
  .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    padding: 16px;
    flex: none;
  }
  .modal-header h3 { font-size: 1.05rem; min-width: 0; overflow-wrap: anywhere; }
  .modal-close {
    min-width: 44px;
    min-height: 44px;
    flex: none;
  }
  .modal-body {
    padding: 16px calc(16px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
  }
  /* The form-document modal fixes a 68vh preview row; inside a sheet it must
     flex instead so the header and actions stay on screen. */
  .form-document-preview {
    grid-template-rows: auto minmax(220px, 52vh) auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-card { animation: none; }
}

@media (max-width: 640px) {
  /* Step labels ("Applicant Details", "Technical Data") were clipped inside
     their chip; let them wrap onto a second line. */
  .patent-step-chip__label {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.76rem;
  }
  /* The IPOPHL form facsimile has a genuine minimum width (~335px) -- it is a
     scale drawing of an official sheet, so it stays in a contained scroller
     rather than being reflowed. Trimming the preview's own padding from 18px
     to 8px per side is enough for it to fit outright on a 360px phone. */
  .submitted-paper-preview {
    padding: 8px;
  }
}

/* ============================================================
   APPLICANT & STAFF MOBILE HEADER CLEANUP
   - Notification bell moved to the far right edge
   - Profile avatar removed entirely on mobile (lives under "Me" in bottom nav)
   - Small org logo on top-left preserved
   - Desktop header untouched (profile icon remains visible on desktop)
   ============================================================ */

@media (max-width: 900px) {
  #dashboard-topbar .topbar-container,
  body.top-nav-layout .topbar-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    column-gap: 10px;
  }

  #dashboard-topbar .topbar-brand,
  body.top-nav-layout .topbar-brand {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
  }

  /* Bell sits on the far right edge */
  #dashboard-topbar .topbar-right,
  body.top-nav-layout .topbar-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    border-left: none !important;
    padding-left: 0 !important;
    gap: 0 !important;
  }

  /* Profile avatar removed from header on mobile (accessible via "Me" in bottom nav) */
  #dashboard-topbar #profileDropdownWrap,
  body.top-nav-layout #profileDropdownWrap,
  .topbar-user-wrap {
    display: none !important;
  }

  body.top-nav-layout #dashboard-topbar {
    padding: 0 12px;
    padding-top: env(safe-area-inset-top);
  }

  /* The logo is a fixed square that must never stretch, shrink or vanish. */
  body.top-nav-layout .topbar-brand .brand-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
  }
  body.top-nav-layout .topbar-brand .brand-icon img.brand-logo-img {
    object-fit: contain; /* aspect ratio preserved, never stretched */
  }

  /* --- Touch targets: 44px box for bell, visually centered glyph inside --- */
  #dashboard-topbar .notif-bell-wrap,
  body.top-nav-layout .notif-bell-wrap {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
  }
  #dashboard-topbar .notif-bell-wrap:focus-visible,
  body.top-nav-layout .notif-bell-wrap:focus-visible {
    outline: 2px solid var(--orange, var(--color-focus));
    outline-offset: 2px;
  }
  #dashboard-topbar .notif-bell-wrap:active,
  body.top-nav-layout .notif-bell-wrap:active {
    background: rgba(255, 112, 67, 0.12);
  }

  /* Badge stays tethered to the bell and inside its box. */
  #dashboard-topbar .notif-badge,
  body.top-nav-layout .notif-badge {
    top: 3px;
    right: 1px;
    font-size: 0.6rem;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    max-width: 30px;
    overflow: hidden;
  }
  /* Nothing between the badge and the viewport may clip it. */
  #dashboard-topbar,
  .topbar-container,
  .topbar-right { overflow: visible !important; }

  /* Mobile notification panel: full-width card under topbar, never sliced or clipped */
  .notif-dropdown,
  body.top-nav-layout .notif-dropdown {
    position: fixed !important;
    top: calc(var(--topbar-h, 60px) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100vh - var(--topbar-h, 60px) - 24px) !important;
    max-height: calc(100dvh - var(--topbar-h, 60px) - 24px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 10000 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22) !important;
  }
}

/* Very small phones (320px): trim the logo and gaps so the cluster still fits
   with room to spare rather than relying on overflow being hidden. */
@media (max-width: 360px) {
  body.top-nav-layout #dashboard-topbar { padding: 0 8px; }
  body.top-nav-layout .topbar-container { column-gap: 6px; }
  body.top-nav-layout .topbar-brand .brand-icon { width: 36px; height: 36px; }
  body.top-nav-layout .topbar-right { padding-left: 0; gap: 0; margin-left: auto; }
}

/* ============================================================
   APP-WIDE BADGE / PILL / CHIP WRAPPING & OVERLAP PREVENTION
   - Badges size to content with white-space: nowrap and flex-shrink: 0
   - Prevents mid-word hyphenation/breaking ("evaluat / ed")
   - Prevents squashed overlap against card text at 375px & 320px
   ============================================================ */
.badge,
[class*="badge-"],
.ann-badge,
.audit-role-badge,
.audit-action-badge,
.interest-badge,
.kb-pdf-badge,
.sidebar-nav-badge,
.bottom-nav-badge,
.chat-button-badge,
.status-pill,
.status-chip,
.empty-status-pill,
.record-certified-pill,
.conversation-status-pill,
.copyright-stage-pill,
.filter-chip,
.oa-cat-chip,
.assistant-chip,
.mp-chip,
.kb-chip,
.proposal-tag,
.doc-checklist__tag,
.applicant-chip-metric {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  word-break: keep-all !important;
}

/* ============================================================
   320px SAFETY NET
   At 320px six applicant layouts overflowed their track by
   9-42px. Every one is the same defect the portal has had
   throughout: a grid/flex child keeping its default
   min-width:auto and refusing to shrink to its container.
   Fixed by allowing the shrink, not by hiding the overflow.
   ============================================================ */
@media (max-width: 400px) {
  .dashboard-section,
  .filing-hub-grid,
  .patent-gform-shell,
  .patent-gform-layout,
  .profile-layout,
  .marketplace-layout,
  .quick-actions-grid,
  .detail-layout {
    min-width: 0;
  }
  .dashboard-section > *,
  .filing-hub-grid > *,
  .patent-gform-shell > *,
  .patent-gform-layout > *,
  .profile-layout > *,
  .marketplace-layout > *,
  .quick-actions-grid > * {
    min-width: 0;
  }
  /* Multi-column tracks have no room left at this width. */
  .filing-hub-grid,
  .patent-gform-layout,
  .profile-layout,
  .marketplace-layout {
    grid-template-columns: 1fr !important;
  }
  /* Reclaim 12px of horizontal room for content. */
  #main-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Office Action upload/replace is the primary control of the response
   workflow, but it is a .btn-sm and so landed on the 40px small-button floor.
   Measured at 163x40 / 169x40 on 360-430px. Raised to 44px for this control
   only -- the generic .btn-sm floor is left alone. */
@media (max-width: 640px) {
  /* Needs the #main-content prefix to match the specificity of the earlier
     `#main-content .btn.btn-sm { min-height: 40px }` floor and win on order. */
  #main-content .oa-doc-actions .btn {
    min-height: 44px;
  }
  .oa-doc-actions .btn[disabled] {
    opacity: 0.65;
    cursor: progress;
  }
  /* Failure text must be readable and wrap rather than stretch the row. */
  .oa-doc-status {
    flex: 1 1 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* ============================================================
   APPLICANT MESSAGES: CONVERSATION LIST
   .chat-thread-list is a flex column with a max-height, and the
   rows are flex children. With the default flex-shrink:1 they
   were compressed to fit -- measured 46px on a phone against a
   164px natural height -- so every row's content overflowed its
   box and printed on top of the row below. overflow:hidden on
   the list meant the overflow could not even be scrolled to.
   ============================================================ */

/* A conversation row is sized by its content, never squeezed to fit. */
.chat-thread-list > .chat-thread-item {
  flex: 0 0 auto;
}
/* The list scrolls instead of clipping, so every conversation is reachable. */
.chat-thread-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* "Conversations" stays put while the rows scroll under it. */
.chat-thread-list-header {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}

@media (max-width: 900px) {
  /* 340px of a phone screen showed barely two full-height rows. A
     proportional cap plus tighter rows shows about four. */
  .chat-thread-list {
    max-height: 60vh;
  }
  .chat-thread-item {
    padding: 12px 14px;
  }
  .chat-thread-item .chat-thread-title {
    margin-top: 4px;
  }
}

/* The status filter strip was given its contained-scroll treatment only below
   640px, so on tablet widths (768px) its 892px of chips still spilled a 728px
   container. The strip needs the same handling anywhere it cannot fit. */
@media (max-width: 900px) {
  .status-hub-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .status-hub-container::-webkit-scrollbar { display: none; }
  .status-hub-bar { width: max-content; }
}

/* Case Documents rows are inline-styled flex rows (hydrateCaseDocumentsPanel).
   The Download control is a flex sibling of the filename block, so a long
   filename squeezed it until its label wrapped mid-word ("Downlo ad") on a
   phone. Keep the action intrinsic and let the filename take the slack. */
@media (max-width: 640px) {
  #caseDocumentsPanel > div {
    align-items: flex-start !important;
  }
  #caseDocumentsPanel > div > div {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #caseDocumentsPanel button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Applicant dashboard "all caught up" state — shown by
   renderActionRequiredBanner() when no evaluator request is open. Deliberately
   compact so an empty Action Required area does not dominate the dashboard. */
.oa-allclear {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid #bfe6cd;
  border-radius: 12px;
  background: #f2faf5;
  color: var(--navy, var(--navy));
  max-width: 480px;
}
.oa-allclear i {
  color: var(--color-success-text);
  font-size: 1.1rem;
  margin-top: 2px;
  flex: 0 0 auto;
}
.oa-allclear strong { font-weight: 800; font-size: 0.95rem; }
.oa-allclear p {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--gray-600, #475569);
}
.oa-allclear > div { min-width: 0; }

@media (max-width: 640px) {
  .oa-allclear { padding: 12px 14px; }
  .oa-allclear p { overflow-wrap: anywhere; }
}

/* ============================================================
   FILING WIZARD — MOBILE
   The generic wizard (trademark, and the shared shell) had no mobile rules:
   .wizard-body carried 36px side padding and .wizard-footer was a nowrap
   space-between row, which pushed "Submit Application" to right=413 on a
   390px viewport — the applicant could not reach Submit at all.
   ============================================================ */
@media (max-width: 640px) {
  .wizard-body {
    padding: 18px 14px;
  }
  .wizard-body > * { min-width: 0; }

  .wizard-footer {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
  }
  /* Both controls stay on screen; each keeps a full touch target. */
  .wizard-footer .btn {
    flex: 1 1 auto;
    min-height: 44px;
    justify-content: center;
  }

  /* Patent/copyright editor sections: trim padding so their content fits. */
  .patent-editor-section {
    padding: 14px 12px;
    min-width: 0;
  }
  .patent-editor-section > * { min-width: 0; }

  /* File-choose controls sit on the small-button floor; a primary filing
     action deserves a full target. */
  #main-content .wizard-body .btn,
  #main-content .patent-editor-section .btn,
  #main-content .patent-gform-shell .btn {
    min-height: 44px;
  }
}

/* The wizard body and the patent/copyright editor sections contain grids
   declared INLINE by the renderers, e.g.
     style="display:grid; grid-template-columns: 1fr 280px; gap:24px"
   A hard 280px sidebar column cannot fit beside content on a phone (measured
   505px inside 338px). Collapsing direct grid children to a single column is
   safe: grid-template-columns is inert on non-grid elements, so this only
   affects the inline grids it is meant to fix. */
@media (max-width: 640px) {
  .wizard-body > div,
  .patent-editor-section > div,
  .patent-gform-shell > div {
    grid-template-columns: 1fr !important;
  }
}

/* Patent/copyright editor sections nest inline-styled flex cards that keep the
   flex-item default min-width:auto, so a 280px card refuses to shrink into a
   254px track. Allowing them to shrink (and wrap) contains the section. */
@media (max-width: 640px) {
  .patent-editor-section div { min-width: 0; }
  .patent-editor-section div[style*="display:flex"],
  .patent-editor-section div[style*="display: flex"] { flex-wrap: wrap; }
}

/* =============== EVALUATOR: STAGE RAIL & CONSEQUENCE DISCLOSURE ===============
   The backend enforces no state machine (cases/services.py update_status accepts
   any transition), so this rail is a reading aid: it shows where a case sits and
   what usually comes next, never what is permitted. */
.stage-rail-panel {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.stage-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.stage-rail-head h3 {
  font-size: 1rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stage-rail-count {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.stage-rail-status {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-500);
}
.stage-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.stage-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  background: var(--gray-50, #f8fafc);
}
.stage-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 800;
  background: var(--gray-200);
  color: var(--gray-600);
}
.stage-step-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Done and current are distinguished by weight, border and an icon -- not by
   colour alone, so the sequence survives a monochrome or colour-blind read. */
.stage-step.done .stage-step-dot {
  background: var(--success, var(--color-success-text));
  color: #fff;
}
.stage-step.done .stage-step-label { color: var(--gray-700); }
.stage-step.current {
  border-color: var(--brand-action);
  border-width: 2px;
  background: var(--white);
}
.stage-step.current .stage-step-dot {
  background: var(--brand-action);
  color: var(--color-on-primary);
}
.stage-step.current .stage-step-label {
  color: var(--navy);
  font-weight: 800;
}
.stage-rail-next {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--gray-700);
  line-height: 1.5;
}
.stage-rail-deadline {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gray-600);
}
.stage-rail-deadline.overdue,
.stage-rail-deadline.today { color: var(--color-error-text); }
.stage-rail-deadline.soon { color: var(--color-warning-text); }

.consequence-list { margin: 12px 0; }
.consequence-list ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.consequence-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--gray-700);
}
.consequence-list li i {
  margin-top: 3px;
  font-size: 0.7rem;
  color: var(--color-accent-text);
}

@media (max-width: 700px) {
  .stage-rail { flex-direction: column; }
  .stage-step { flex: 1 1 auto; }
  .stage-step-label { white-space: normal; }
}

/* ---- Evaluator dashboard queue: urgency-led rows (Stage 2B) ---- */
.exam-queue-table td { vertical-align: top; }
.queue-priority { margin-top: 5px; }
.queue-type { margin-top: 5px; }
.queue-sub {
  margin-top: 3px;
  font-size: 0.76rem;
  color: var(--gray-500);
}
.queue-stage-step {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.queue-stage-label {
  margin-top: 2px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
}
.queue-next-action {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gray-700);
}
.exam-mycases-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.exam-mycases-link h3 { margin: 0; }
.exam-activity-case-line {
  margin: 2px 0 1px;
  font-size: 0.8rem;
}
.exam-activity-case {
  color: var(--color-accent-text);
  font-weight: 700;
  text-decoration: none;
}
.exam-activity-case:hover { text-decoration: underline; }

/* Below 1150px the examination queue stops being a table. As a table its action
   column sat at x=775..871 inside a 676px scroller, so "Open" and "Take" -- the
   only reason the row exists -- were invisible until the user scrolled sideways
   inside it. As cards, every row shows its action without any scrolling. */
@media (max-width: 1150px) {
  .exam-queue-panel .table-responsive,
  .reviewer-cases-table .table-responsive { overflow-x: visible; }
  /* .table-container .data-table pins min-width:640px at (0,2,0); a plain
     .exam-queue-table rule loses to it, which kept the cards 640px wide inside
     a 368px column and pushed every View button off screen. Match the
     specificity instead of layering another override. */
  .table-container .exam-queue-table,
  .table-container .reviewer-case-data-table { min-width: 0; }
  .exam-queue-table,
  .exam-queue-table tbody,
  .exam-queue-table tr,
  .exam-queue-table td,
  .reviewer-case-data-table,
  .reviewer-case-data-table tbody,
  .reviewer-case-data-table tr,
  .reviewer-case-data-table td { display: block; width: auto; }
  .exam-queue-table thead,
  .reviewer-case-data-table thead { display: none; }
  .exam-queue-table tr,
  .reviewer-case-data-table tr {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--white);
  }
  /* Urgency leads the card and keeps its own emphasis. */
  .exam-queue-table tr.deadline-row-overdue,
  .reviewer-case-data-table tr.deadline-row-overdue { border-left: 4px solid var(--color-error); }
  .exam-queue-table tr.deadline-row-today,
  .reviewer-case-data-table tr.deadline-row-today { border-left: 4px solid var(--color-error); }
  .exam-queue-table tr.deadline-row-soon,
  .reviewer-case-data-table tr.deadline-row-soon { border-left: 4px solid var(--color-warning); }
  .exam-queue-table td,
  .reviewer-case-data-table td {
    border: none;
    padding: 5px 0;
  }
  .exam-queue-table td[data-label]::before,
  .reviewer-case-data-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 3px;
  }
  /* The urgency cell already reads as a label; no duplicate caption. */
  .exam-queue-table td[data-label="Urgency"]::before,
  .reviewer-case-data-table td[data-label="Urgency"]::before { content: none; }
  .exam-queue-table td[data-label="Open"],
  .reviewer-case-data-table td[data-label="Open"],
  .reviewer-case-data-table td[data-label="Actions"] { padding-top: 12px; }
  .exam-queue-table .exam-quick-actions,
  .reviewer-case-data-table .action-btns { flex-wrap: wrap; gap: 8px; }
  .exam-queue-table .exam-quick-actions .btn,
  .reviewer-case-data-table .action-btns .btn {
    flex: 1 1 auto;
    min-height: 44px;
  }
  .exam-queue-table td[colspan],
  .reviewer-case-data-table td[colspan] { text-align: center; }
}

/* =============== EVALUATOR 2D: TOUCH TARGETS & LOGIN =============== */
/* The card action buttons measured 40px, not the 44px their own rule asked for:
   `#main-content .btn.btn-sm { min-height: 40px }` is (1,2,0) and beat the
   plain-class rule at (0,3,0). Match the ID specificity rather than add
   another losing override. In card mode these ARE the primary action. */
@media (max-width: 1150px) {
  #main-content .exam-queue-table .exam-quick-actions .btn.btn-sm,
  #main-content .reviewer-case-data-table .action-btns .btn.btn-sm {
    min-height: 44px;
  }
}

/* Evaluator login: the submit button was 39px, its password toggle 32px, and
   the "remember me" checkbox a 13px hit target -- all below the 44px floor on
   the one screen every evaluator must use before anything else. */
#evaluator-login .btn-block,
#login .btn-block,
#admin-login .btn-block {
  min-height: 44px;
}
.password-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.form-check input[type="checkbox"],
.remember-me input[type="checkbox"],
.login-card input[type="checkbox"] {
  width: 20px;
  height: 20px;
}
/* Enlarging the box alone still leaves a small target; the label carries the
   rest of the 44px so the whole row is tappable. */
.form-check label,
.remember-me label,
.login-card label:has(input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}


/* Case-detail actions measured 40px because `#main-content .btn.btn-sm` sets a
   40px floor at (1,2,0). On the evaluator's own pages these small buttons ARE
   the primary controls -- Download, Update Status, Submit Evaluation, Add
   Deadline -- so they get the full 44px target. Scoped by role so the applicant
   and admin portals keep the layout they were tuned for. */
body.role-reviewer #main-content .btn.btn-sm {
  min-height: 44px;
}

/* Login submit sat at 39px and the "remember me" box at 20px. */
#page-login .btn-block,
.login-card .btn-block,
.auth-card .btn-block {
  min-height: 44px;
}
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}


/* Requested-document rows: the status badge + Download column is flex-shrink:0,
   which at 360px crushed the document NAME column to 42px and clipped every
   title ("Government ID" needed 74px). Below 480 the row stacks so the name
   gets the full width. These rows are inline-styled, so the overrides need
   !important to reach them -- the alternative is rewriting the markup. */
@media (max-width: 480px) {
  .req-doc-row { flex-wrap: wrap !important; }
  .req-doc-row > div[style*="flex:1"] { flex: 1 1 100% !important; }
  .req-doc-meta {
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
    margin-top: 6px;
  }
}

/* =============== APPLICANT ACTION REQUIRED: ITEM-LEVEL INSTRUCTIONS ===============
   The banner previously showed only category chips, so the evaluator's actual
   request text was two clicks away. These styles carry the outstanding items
   and the loading/error states that replaced the false "all caught up". */
.oa-req-list-wrap { margin-top: 10px; }
.oa-req-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;  gap: 8px;
}
.oa-req-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--gray-200);
  min-width: 0;
}
.oa-req-item > i {
  margin-top: 3px;
  font-size: 0.8rem;
  color: var(--color-accent-text);
  flex: 0 0 auto;
}
.oa-req-item > div { min-width: 0; }
.oa-req-item strong {
  display: block;
  font-size: 0.85rem;
  color: var(--navy);
  /* Long field names must wrap rather than push the card wide. */
  overflow-wrap: anywhere;
}
.oa-req-item p {
  margin: 2px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--gray-600);
  overflow-wrap: anywhere;
}
.oa-req-more { margin-top: 8px; }
.oa-req-more summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent-text);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.oa-req-more .oa-req-list { margin-top: 8px; }

.oa-checking i { color: var(--gray-400); }
.oa-load-error {
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.06);
}
.oa-load-error i { color: var(--color-error-text); }
.oa-load-error p {
  margin: 2px 0 8px;
  font-size: 0.85rem;
  color: var(--gray-600);
}
.oa-load-error .btn { min-height: 44px; }

/* The Action Required CTA is the whole point of the banner; it measured 39px. */
.oa-banner .btn { min-height: 44px; }
@media (max-width: 480px) {
  .oa-req-item { padding: 10px; }
  .oa-banner .btn { width: 100%; }
}


/* Shared label class rendered at 11.2px; 12px is the legibility floor. */
.ownership-label { font-size: 0.75rem; }
.oa-load-error--inline { margin-bottom: 12px; }


/* =============== ELEVATION PASS (§21/§22) =====================================
   Depth comes from border + surface + radius + a restrained shadow. Applied to
   named container classes only -- never to buttons, cells, icons or inline
   elements, so nothing "floats" that should not. */
.detail-panel,
.table-container,
.payment-panel-card,
.oa-req-item,
.stage-rail-panel {
  box-shadow: var(--shadow-sm);
}
.exam-pending-card,
.oa-banner,
.payment-record-block,
.exam-queue-panel {
  box-shadow: var(--shadow-md);
}
/* Hover lift only on surfaces that are genuinely clickable. */
.exam-pending-card {
  transition: box-shadow var(--transition), transform var(--transition);
}
.exam-pending-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}
.payment-record-block {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 10px;
  background: var(--white);
}
.oa-cat-chip.oa-cat-payment {
  background: rgba(22, 101, 52, 0.1);
  color: var(--color-success-text);
}
.oa-banner--payment { border-left-width: 4px; }

/* §23: shadows must never be the only signal, and motion is opt-out. */
@media (prefers-reduced-motion: reduce) {
  .exam-pending-card { transition: none; }
  .exam-pending-card:hover { transform: none; }
}

/* =============== ELEVATION NORMALISATION (system-wide) =======================
   Audit finding: the UI was not flat for lack of shadows -- 180 box-shadow
   declarations already existed, but only 17 used a token. The remaining 157
   were ad-hoc, so the SAME class rendered different depths on different pages
   (.table-container measured 0 1px 2px on admin vs 0 10px 24px on the evaluator
   list) and one admin dashboard mixed 0 18px 36px @8% with 0 8px 30px @3% --
   the latter effectively invisible. That incoherence is what reads as "flat".

   This block does not invent a scale. It maps the surfaces that were measured
   as inconsistent or shadowless onto the existing --shadow-* tokens, so all
   three roles share one elevation language:

     Level 1  --shadow-sm   table containers, analytics cards, control bars
     Level 2  --shadow-md   content panels, stat cards, case/action cards
     Level 3  --shadow-lg   dropdowns, popovers
     Level 4  --shadow-xl   modals

   Nested children are deliberately NOT elevated (see the shadow-stacking rule
   at the end); depth belongs to the outer surface only. */

/* ---- Level 1: quiet containers ---- */
.table-container,
body.role-reviewer .table-container.reviewer-cases-table,
.analytics-card,
.status-hub-container,
.user-controls-bar {
  box-shadow: var(--shadow-sm);
}
/* These two measured NO shadow at all in the browser -- the only genuinely
   flat surfaces the audit found. They already carry a border and radius, so
   they need separation, not decoration. */
.analytics-card,
.status-hub-container {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}

/* ---- Level 2: content surfaces ---- */
.detail-panel,
.dashboard-panel,
.stat-card,
.case-card,
.action-card,
.payment-panel-card,
.oa-banner {
  box-shadow: var(--shadow-md);
}

/* ---- Level 3 / 4: things that float above the page ---- */
.dropdown-content,
.sub-dropdown-content {
  box-shadow: var(--shadow-lg);
}
#modalOverlay .modal-card {
  box-shadow: var(--shadow-xl);
}

/* ---- Interactive lift: only on surfaces that are themselves clickable ----
   Focus indicators are untouched; a shadow never replaces an outline. */
@media (hover: hover) {
  .case-card:hover,
  .action-card:hover,
  .exam-pending-card:hover {
    box-shadow: var(--shadow-lg);
    transition: box-shadow 0.18s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .case-card,
  .action-card,
  .exam-pending-card { transition: none; }
}

/* ---- Shadow-stacking guard ----
   A panel inside an already-elevated surface must not add its own depth, or
   the hierarchy turns to mush. Headers/sections keep borders instead. */
.detail-panel .detail-panel,
.case-card .case-card-header,
.oa-banner .oa-req-item,
.payment-panel-card .payment-record-block {
  box-shadow: none;
}

/* =============== FLOATING PUBLIC UTILITIES =============== */
/* Contact + office location. Fixed, grouped, above page content but below the
   modal layer. Safe-area insets keep them clear of iOS home indicators and of
   the applicant bottom navigation. */
.floating-utils {
  position: fixed;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.floating-utils[hidden] { display: none; }
.floating-util {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.floating-util--contact { background: linear-gradient(135deg, var(--brand-action), var(--brand-strong)); }
.floating-util--location { background: linear-gradient(135deg, var(--color-error), #9f1239); }
@media (hover: hover) {
  .floating-util:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-2px);
  }
}
/* Focus stays an outline; the shadow never doubles as the focus indicator. */
.floating-util:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .floating-util { transition: none; }
  .floating-util:hover { transform: none; }
}
/* The applicant bottom nav owns the lower edge on phones; lift clear of it. */
@media (max-width: 900px) {
  body.top-nav-layout .floating-utils {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
  .floating-utils { right: calc(14px + env(safe-area-inset-right, 0px)); }
  .floating-util { width: 52px; height: 52px; font-size: 1.2rem; }
}

/* ---- Contact inquiry form ---- */
.contact-bubble-lead {
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.5;
}
.contact-bubble-error {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--color-error-text);
  font-size: 0.85rem;
}

/* ---- Office location panel ---- */
.office-location { display: grid; gap: 16px; }
.office-location__map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}
.office-location__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.office-location__body address {
  font-style: normal;
  margin: 4px 0 14px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--gray-700);
  overflow-wrap: anywhere;
}
.office-location__coords {
  margin: 4px 0 16px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.office-location__cta { min-height: 44px; }
@media (max-width: 480px) {
  .office-location__cta { width: 100%; }
  .office-location__map { aspect-ratio: 4 / 3; }
}

/* =============== ASSISTANT (grounded knowledge search) =============== */
.floating-util--ask { background: linear-gradient(135deg, var(--color-info), var(--navy-dark)); }

.assistant-panel {
  position: fixed;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 901;
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 160px));
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.assistant-panel[hidden] { display: none; }
.assistant-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50, #f8fafc);
}
.assistant-head strong { display: block; color: var(--navy); font-size: 0.95rem; }
.assistant-head span { font-size: 0.78rem; color: var(--gray-500); }
.assistant-close {
  border: none;
  background: transparent;
  color: var(--gray-500);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
}
.assistant-close:hover { background: var(--gray-100); color: var(--navy); }

.assistant-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.assistant-welcome p { margin: 0 0 10px; font-size: 0.85rem; line-height: 1.55; color: var(--gray-600); }
.assistant-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.assistant-chip {
  border: 1px solid var(--gray-200);
  background: var(--white);
  border-radius: 999px;
  padding: 9px 13px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  min-height: 44px;
  box-shadow: var(--shadow-sm);
}
.assistant-chip:hover { border-color: var(--brand-action); color: var(--color-accent-text); }

.assistant-turn { max-width: 92%; }
.assistant-turn p {
  margin: 0 0 6px;
  font-size: 0.86rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.assistant-turn--user {
  align-self: flex-end;
  background: var(--brand-action);
  color: var(--color-on-primary);
  padding: 9px 12px;
  border-radius: 14px 14px 4px 14px;
}
.assistant-turn--user p { margin: 0; color: var(--color-on-primary); }
.assistant-turn--bot {
  align-self: flex-start;
  background: var(--gray-50, #f8fafc);
  border: 1px solid var(--gray-200);
  padding: 11px 13px;
  border-radius: 14px 14px 14px 4px;
  color: var(--gray-700);
}
/* The citation is the point of the feature: it must always be legible. */
.assistant-source {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--gray-200);
  font-size: 0.75rem;
  color: var(--gray-500);
}
.assistant-source strong { color: var(--navy); }
.assistant-contact { margin-top: 10px; min-height: 44px; }
.assistant-feedback {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--gray-500);
}
.assistant-feedback button {
  border: 1px solid var(--gray-200);
  background: var(--white);
  border-radius: var(--radius-sm);
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  color: var(--gray-600);
}
.assistant-feedback button:hover { border-color: var(--brand-action); color: var(--color-accent-text); }
.assistant-feedback__thanks { font-style: italic; }

.assistant-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--gray-200);
  background: var(--white);
}
.assistant-input input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  /* 16px prevents iOS zooming the page when the field takes focus. */
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}
.assistant-input .btn { min-width: 44px; min-height: 44px; }

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

/* Phones: full-width sheet that clears the applicant bottom navigation. */
@media (max-width: 640px) {
  .assistant-panel {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    max-height: min(60vh, calc(100vh - 220px));
  }
}

/* =====================================================================
 * DOCUMENT REQUIREMENT UPLOAD CARDS
 * ---------------------------------------------------------------------
 * Replaces the inline-styled uploader rows. Every state is carried by an
 * icon and a text label as well as colour (WCAG 1.4.1), all controls
 * clear 44px (2.5.8), and the drop zone is reachable and operable from
 * the keyboard because dragging is not an accessible interaction.
 *
 * Elevation stays inside the established scale: --shadow-sm at rest,
 * --shadow-md only while a card is being dragged onto. Cards do not
 * stack shadows with the panel that contains them.
 * ===================================================================== */

.doc-checklist {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.doc-checklist__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.doc-checklist__head h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}
.doc-checklist__count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-500);
}
.doc-checklist__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--gray-100);
  overflow: hidden;
  margin: 12px 0 14px;
}
.doc-checklist__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--green);
  transition: width var(--transition);
}
.doc-checklist__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 6px;
}
.doc-checklist__item {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--gray-600);
}
.doc-checklist__item:hover { background: var(--gray-50); border-color: var(--line); }
.doc-checklist__item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.doc-checklist__item i { color: var(--gray-300); flex-shrink: 0; }
.doc-checklist__item.is-done i { color: var(--green); }
.doc-checklist__name {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
}
.doc-checklist__tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-400);
  white-space: nowrap;
}
.doc-checklist__item.is-done .doc-checklist__tag { color: var(--green); }

.doc-req-grid {
  display: grid;
  gap: 14px;
}

.doc-req-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.doc-req-card.is-required { border-left-color: var(--warning); }
.doc-req-card.is-optional { border-left-color: var(--gray-300); }
.doc-req-card.is-saved,
.doc-req-card.is-attached { border-left-color: var(--green); }
.doc-req-card.is-failed { border-left-color: var(--danger); }
.doc-req-card.is-flagged {
  box-shadow: 0 0 0 3px var(--brand-tint), var(--shadow-md);
  border-color: var(--brand);
}

.doc-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.doc-card__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.doc-card__flag {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.doc-card__flag.is-required { background: var(--warning-tint); color: var(--color-warning-text); }
.doc-card__flag.is-optional { background: var(--gray-100); color: var(--gray-600); }

.doc-card__block { margin-top: 12px; }
.doc-card__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 3px;
}
.doc-card__block p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--gray-600);
}
.doc-card__note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--gray-500);
}
.doc-card__details {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--gray-500);
}

.doc-card__statusrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}
.doc-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
}
.doc-state--empty { color: var(--gray-500); }
.doc-state--uploading { color: var(--info); }
.doc-state--saved,
.doc-state--attached { color: var(--green); }
.doc-state--failed { color: var(--danger); }
.doc-card__formats {
  font-size: 0.74rem;
  color: var(--gray-400);
}

.doc-card__files { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.doc-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--success-tint);
  border: 1px solid rgba(22, 163, 74, 0.24);
  border-radius: var(--radius-sm);
}
.doc-file-row i { color: var(--green); flex-shrink: 0; }
.doc-file-row__name {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  word-break: break-word;
}
.doc-file-row__meta { font-size: 0.74rem; color: var(--gray-500); white-space: nowrap; }

.doc-card__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.doc-progress-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--gray-100);
  overflow: hidden;
}
.doc-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--info);
  transition: width 0.2s linear;
}
/* Indeterminate: the browser could not measure the body, so the bar must not
   imply a percentage it does not know. */
.doc-progress-fill.is-indeterminate {
  width: 40%;
  animation: docProgressSlide 1.1s ease-in-out infinite;
}
@keyframes docProgressSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.doc-progress-pct {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--info);
  min-width: 4ch;
  text-align: right;
}

.doc-card__failure {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--danger-tint);
  border: 1px solid rgba(220, 38, 38, 0.22);
  border-radius: var(--radius-sm);
}
.doc-card__failure p {
  margin: 0 0 10px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--color-error-text);
}

.doc-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.doc-card__actions .btn { min-height: 44px; }

.doc-dropzone {
  margin-top: 12px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 18px 16px;
  text-align: center;
  background: var(--gray-50);
  border: 1.5px dashed var(--gray-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.doc-dropzone:hover { background: var(--brand-tint); border-color: var(--brand); }
.doc-dropzone:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.doc-dropzone.is-dragover {
  background: var(--brand-tint);
  border-color: var(--brand);
  border-style: solid;
  box-shadow: var(--shadow-md);
}
.doc-dropzone__icon { font-size: 1.35rem; color: var(--gray-400); }
.doc-dropzone.is-dragover .doc-dropzone__icon { color: var(--color-accent-text); }
.doc-dropzone__lead { font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.doc-dropzone__lead strong { color: var(--color-accent-text); text-decoration: underline; }
.doc-dropzone__hint { font-size: 0.74rem; color: var(--gray-500); }

/* Small screens: the drop zone loses its purpose (no drag on touch), so it
   reads as a plain tap target and gives back the vertical space. */
@media (max-width: 640px) {
  .doc-req-card { padding: 16px; }
  .doc-dropzone { min-height: 72px; padding: 14px 12px; }
  .doc-dropzone__lead { font-size: 0.82rem; }
  .doc-card__statusrow { gap: 6px; }
  .doc-checklist { padding: 14px 16px; }
  .doc-checklist__list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .doc-progress-fill,
  .doc-checklist__fill { transition: none; }
  .doc-progress-fill.is-indeterminate { animation: none; width: 100%; opacity: 0.5; }
}

/* Format/size hint on the Office Action response uploader. Wraps to its own
   line so it never squeezes the button below 44px on a narrow screen. */
.oa-doc-hint {
  flex-basis: 100%;
  font-size: 0.72rem;
  color: var(--gray-500);
}
/* The hidden file input behind each card's drop zone / Replace button. */
.doc-card__input { display: none; }
/* =====================================================================
 * "ASK ABOUT THIS DOCUMENT" / "WHAT DOES THIS REQUEST MEAN?"
 * Contextual entry points into the one existing assistant.
 * ===================================================================== */
.doc-ask-ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-accent-text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.doc-ask-ai:hover { background: var(--brand-tint); border-color: var(--brand); }
.doc-ask-ai:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* The evaluator's own words, quoted inside the assistant. Visually distinct
   from anything the assistant says so the two can never be confused. */
.assistant-quote {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--warning-tint);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
}
.assistant-quote p {
  margin: 4px 0 8px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--gray-800);
  font-weight: 600;
}
.assistant-quote small {
  display: block;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--gray-600);
}

.assistant-cta { margin-top: 10px; }

/* Bytes transferred, under the progress bar. */
.doc-progress-bytes {
  margin: 4px 0 0;
  font-size: 0.74rem;
  color: var(--gray-500);
  text-align: right;
}

@media (max-width: 640px) {
  .doc-ask-ai { width: 100%; justify-content: center; }
  .doc-progress-bytes { text-align: left; }
}

/* Match quality + related questions in the assistant answer.
   Wording is "match", never "verified": the band describes how well the
   question matched a document, not whether a human checked the answer. */
.assistant-match {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.assistant-match--high { background: var(--success-tint); color: var(--color-success-text); }
.assistant-match--medium { background: var(--warning-tint); color: var(--color-warning-text); }

.assistant-related {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.assistant-related .ownership-label { flex-basis: 100%; margin-bottom: 2px; }

/* =====================================================================
   AUTH SPLIT LAYOUT  (applicant / evaluator / admin login)
   Left: institutional brand panel. Right: the existing .login-card.
   Every decorative layer is static and pointer-events:none and sits below
   the card -- the previous animated circles covered the Sign In button.
   ===================================================================== */
.auth-split {
  --auth-orange: var(--color-primary);
  --auth-orange-deep: var(--color-primary-dark);
  --auth-amber: var(--color-tertiary);
  --auth-gold: var(--color-tertiary);
  --auth-cream: #fffaf6;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  padding: 0;
  border-top: 0;
  background: var(--auth-cream);
  gap: 0;
  position: relative;
  overflow: hidden;
}

/* ---------- Left: brand panel ---------- */
/* One SVG artwork sits behind BOTH columns, because the orange/cream boundary
   is a sweeping curve rather than a straight column edge. */
.auth-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
/* Campus photo, bottom-left of the orange field, as in the reference.
   The asset carries its own alpha fade on the top and right edges, so no CSS
   mask is needed and there is no hard rectangular seam. Safe to reference by
   url() now that the file exists -- ManifestStaticFilesStorage rewrites it
   during collectstatic and only fails on a MISSING file. Override --auth-photo
   to swap in a different campus image. */
.auth-brand__photo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 42%;
  z-index: 0;
  pointer-events: none;
  background-image: var(--auth-photo, url("../images/psu_building.4d0b55c5e739.png"));
  /* `contain`, not `cover`: cover scaled to the box height and cropped roughly
     40% of the facade off the right edge, leaving "PALAWAN S..." cut mid-word. */
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
  /* The asset carries an orange/yellow duotone. Greyscale + luminosity blend
     re-tints it into the brown brand field so the white text above it keeps
     AA contrast (sampled from the rendered page, not assumed). */
  filter: grayscale(1) brightness(0.55);
  mix-blend-mode: luminosity;
  opacity: 0.35;
}
.auth-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  background: transparent;
}
.auth-brand__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 460px;
  color: #fff;
}
.auth-brand__seal {
  width: clamp(190px, 27vw, 330px);
  height: clamp(190px, 27vw, 330px);
  margin: 0 auto 30px;
  display: block;
  /* Same treatment as the hero badges: the seal asset has an opaque square
     backdrop that reads as a hard rectangle against the gradient. A square box
     plus border-radius handles any uploaded aspect ratio, which clip-path on an
     auto-height image would not. */
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  filter: drop-shadow(0 14px 30px rgba(120, 45, 0, 0.3));
}
.auth-brand__title {
  font-size: clamp(1.9rem, 3.5vw, 3.1rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 10px rgba(140, 60, 0, 0.22);
}
.auth-brand__rule {
  display: block;
  width: 300px;
  max-width: 76%;
  height: 3px;
  margin: 20px auto;
  border-radius: 3px;
  background: var(--auth-gold);
}
.auth-brand__portal {
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
}
.auth-brand__tagline {
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
  font-weight: 600;
  color: #fff;
  margin: 0;
  letter-spacing: 0.02em;
}

/* ---------- Right: form panel ---------- */
.auth-panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  overflow-y: auto;
  background: transparent;
}
/* Specificity must beat `body.standalone-login-mode .login-card`, which pins
   max-width to 430px and would otherwise keep the card far narrower than the
   reference. */
body.standalone-login-mode .auth-split .login-card,
.auth-split .login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  padding: clamp(38px, 4vw, 62px) clamp(28px, 3.4vw, 54px);
  border-radius: 24px;
  border: 1px solid rgba(240, 200, 160, 0.5);
  box-shadow: 0 26px 60px rgba(180, 95, 30, 0.16);
}

/* Card header: seal, title, subtitle, accent rule. */
.brand-icon.auth-logo {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: transparent;
  color: var(--color-accent-text);
  font-size: 2.2rem;
  margin: 0 auto 14px;
}
.brand-icon.auth-logo img.brand-logo-img {
  background: transparent;
  padding: 0;
  border-radius: 50%;
}
.auth-split .login-header .auth-logo {
  display: none !important;
}
.auth-split .login-header {
  margin-bottom: 26px;
}
.auth-split .login-header h2 {
  font-size: clamp(1.75rem, 2.8vw, 2.45rem);
  font-weight: 800;
  color: var(--color-secondary-dark);
  margin-bottom: 8px;
}
.auth-split .login-header p {
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 330px;
  margin: 0 auto;
}
.auth-title-rule {
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 4px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, var(--auth-orange), var(--auth-amber));
}

/* The wizard carries more fields than the login form. */
body.standalone-login-mode .auth-split .login-card.signup-card-wizard,
.auth-split .login-card.signup-card-wizard {
  max-width: 600px;
}

/* Fields: warm ivory fills, matching the design. */
.auth-split .form-group label {
  color: #374151;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 8px;
}
.auth-split .input-icon input,
.auth-split .input-icon select {
  background: #fcfbfa;
  border: 1.5px solid #e5ded7;
  border-radius: 10px;
  padding: 15px 14px 15px 46px;
  font-size: 0.95rem;
  color: #1f2937;
}
.auth-split .input-icon input::placeholder {
  color: #9ca3af;
}
.auth-split .input-icon input:focus {
  background: #fff;
  border-color: var(--auth-orange);
  box-shadow: 0 0 0 3px rgba(255, 112, 67, 0.2);
  outline: none;
}
.auth-split .input-icon i {
  color: #9a8b7c;
  left: 16px;
}
.auth-split .input-icon.password-field input {
  padding-right: 48px;
}
.auth-split .password-toggle {
  color: #9a8b7c;
  background: transparent;
}
.auth-split .form-options {
  margin: 18px 0 22px;
}
.auth-split .checkbox-label {
  color: #4b5563;
  font-weight: 500;
}
.auth-split .forgot-link {
  color: var(--color-accent-text);
  font-weight: 700;
}
.auth-split .forgot-link:hover {
  color: var(--color-accent-text);
  text-decoration: underline;
}

/* Primary action: the gradient Sign In button. */
.auth-split .btn-primary {
  background: var(--gradient-primary);
  border: 1px solid rgba(255, 127, 80, 0.25);
  border-radius: 11px;
  padding: 16px 20px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-on-primary);
  box-shadow: 0 4px 14px rgba(255, 112, 67, 0.2);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.auth-split .btn-primary:hover:not(:disabled) {
  filter: brightness(0.95);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(192, 86, 33, 0.32);
}
.auth-split .btn-primary:active:not(:disabled) {
  transform: translateY(0);
}
.auth-split .btn-primary:focus-visible,
.auth-split .forgot-link:focus-visible,
.auth-split .login-legal a:focus-visible,
.auth-split .login-footer a:focus-visible {
  outline: 3px solid var(--auth-orange-deep);
  outline-offset: 2px;
}

/* Secondary action (Resend OTP). The shared .btn-outline-navy is navy on a
   warm cream card, which reads as off-brand here, so it is re-tinted to the
   auth palette for this page only. */
.auth-split .btn-outline-navy {
  background: #fff;
  color: var(--color-accent-text);
  border: 1.5px solid #f3d4b8;
  border-radius: 11px;
  padding: 15px 20px;
  font-weight: 700;
}
.auth-split .btn-outline-navy:hover:not(:disabled) {
  background: #fff6ec;
  border-color: var(--auth-orange);
  color: var(--color-accent-text);
}
.auth-split .btn-outline-navy:focus-visible {
  outline: 3px solid var(--auth-orange-deep);
  outline-offset: 2px;
}
/* The OTP step's helper note, matched to the same warm palette. */
.auth-split .login-otp-copy {
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.55;
  text-align: center;
}
.auth-split .login-otp-demo-note {
  background: #fff6ec;
  border: 1px solid #f4e2cb;
  border-radius: 10px;
  color: var(--color-accent-text);
}

/* Footers. */
.auth-split .login-footer {
  margin-top: 22px;
  text-align: center;
  font-size: 0.92rem;
  color: #4b5563;
}
.auth-split .login-footer a {
  color: var(--color-accent-text);
  font-weight: 700;
}
.login-legal {
  margin-top: 14px;
  text-align: center;
  font-size: 0.85rem;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.login-legal a {
  color: var(--color-secondary-dark);
  font-weight: 600;
  text-decoration: none;
}
.login-legal a:hover {
  color: var(--color-accent-text);
  text-decoration: underline;
}

/* The standalone-login shell centres and pads its child, which squashed the
   brand panel into a band floating in the middle of the viewport. The split
   layout must instead fill the shell edge to edge. Specificity has to match
   `body.standalone-login-mode .login-wrapper` to win. */
body.standalone-login-mode .login-wrapper.auth-split {
  padding: 0;
  overflow: hidden;
  align-items: stretch;
  justify-items: stretch;
  justify-content: stretch;
  height: 100vh;
  height: 100dvh;
}
/* The reference design is full-bleed: no site nav over the split. Only the
   three login portals get standalone-login-mode, so sign-up, forgot-password
   and reset-password keep the public nav and their existing layout. */
body.standalone-login-mode #public-nav {
  display: none !important;
}
/* ...which would strand anyone who lands here directly, so the brand panel
   carries its own way back. */
.auth-brand__home {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  /* A white glass pill lightened the field under its own white label (median
     4.5:1, highlights 2.2:1, measured from pixels). A dark brand pill keeps
     the label AA over any part of the artwork. */
  background: rgba(14, 20, 30, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
  transition: all 0.18s ease;
}
.auth-brand__home:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.auth-brand__home:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ---------- Responsive: collapse to a single column ---------- */
@media (max-width: 980px) {
  .auth-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  /* The backdrop is a single artwork whose curve is drawn for a side-by-side
     split. Once the columns stack it no longer lines up and the heading ends
     up half on orange and half on cream, so it is dropped and each band paints
     its own background instead. */
  .auth-backdrop,
  .auth-brand__photo {
    display: none;
  }
  .auth-brand {
    padding: 30px 24px 26px;
    background:
      radial-gradient(120% 90% at 12% 8%, rgba(255, 112, 67, 0.22) 0%, rgba(255, 112, 67, 0) 55%),
      linear-gradient(150deg, var(--color-secondary-dark) 0%, var(--color-secondary) 100%);
  }
  .auth-panel {
    background: linear-gradient(180deg, #fffdf9 0%, var(--auth-cream) 100%);
  }
  .auth-brand__seal {
    width: clamp(96px, 22vw, 130px);
    margin-bottom: 14px;
  }
  .auth-brand__rule {
    margin: 12px auto;
  }
  .auth-brand::after {
    display: none;
  }
  .auth-brand__home {
    top: 14px;
    left: 14px;
    padding: 7px 12px;
    font-size: 0.78rem;
  }
  /* Mobile: the two bands stack and THE PAGE scrolls.
     Previously the grid kept its viewport height with a `1fr` form row and
     `overflow-y: auto` on the panel, so the form became a nested scroll
     container: measured at 360x740 the brand band took 414px, leaving the
     panel 326px of box for 686px of fields. The first field (First Name) sat
     above that inner scroll position and read as "cut off" -- the page itself
     could not be scrolled to reveal it.
     Sizing both rows to content and letting the document scroll fixes it at
     the layout level, with no device-specific offsets. */
  .login-wrapper.auth-split,
  body.standalone-login-mode .login-wrapper.auth-split {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
    align-items: start;
  }
  .auth-split {
    grid-template-rows: auto auto;
  }
  .auth-panel {
    overflow: visible;
  }
}
@media (max-width: 560px) {
  .auth-panel {
    padding: 26px 16px 34px;
  }
  .auth-split .login-card {
    box-shadow: 0 14px 34px rgba(180, 95, 30, 0.12);
  }
  /* The brand band is identity, not content: at 414px it was consuming 56% of
     a 740px screen and pushing the whole form off the first viewport. Trimmed
     so the first field is visible on load without scrolling. */
  .auth-brand {
    padding: 20px 18px 18px;
  }
  .auth-brand__seal {
    width: clamp(76px, 19vw, 104px);
    height: clamp(76px, 19vw, 104px);
    margin-bottom: 10px;
  }
  .auth-brand__title {
    font-size: clamp(1.3rem, 5.6vw, 1.7rem);
  }
  .auth-brand__rule {
    width: 200px;
    margin: 10px auto;
  }
  .auth-brand__portal {
    font-size: 1rem;
    margin-bottom: 6px;
  }
  .auth-brand__tagline {
    font-size: 0.85rem;
  }
  /* The card header repeats a brand mark that already sits ~100px above it in
     the orange band, and on a 568px-tall phone that duplicate cost 112px --
     enough to push the first field below the fold. Measured at 320x568:
     brand 246 + card padding 38 + icon 112 + title 45 + subtitle 46 = First
     Name at 610px. Dropping the duplicate and tightening the padding brings it
     back onto the first screen. The seal, wordmark and colours are untouched. */
  .auth-split .login-header .auth-logo {
    display: none;
  }
  .auth-split .login-card {
    padding-top: 24px;
  }
  .auth-split .login-header {
    margin-bottom: 16px;
  }
}
/* ---------- Portals (applicant / evaluator / admin): campus photo backdrop ----------
   All three login portals use high-resolution university campus photos as full-bleed
   backdrops:
     - Applicant portal: Building-psu-1536x864.jpg
     - Evaluator & Admin portals: psu_admin_building.jpg
   A dark scrim sits between the photo and content so the white PSU institutional branding
   remains readable with strong contrast over the campus view, while the crisp white login
   card has elevated depth and separation. */
#page-login[data-login-portal="applicant"] .auth-split,
#page-login:not([data-login-portal]) .auth-split,
#page-signup .auth-split {
  background-color: var(--navy-dark);
  background-image: url("../images/Building-psu-1536x864.ab37d081d652.jpg");
  background-size: cover;
  background-position: center 32%;
  background-repeat: no-repeat;
}
#page-login[data-login-portal="reviewer"] .auth-split,
#page-login[data-login-portal="superadmin"] .auth-split {
  background-color: var(--navy-dark);
  background-image: url("../images/psu_admin_building.ff1ecd004eb0.jpg");
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
}
#page-login .auth-split::before,
#page-signup .auth-split::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(14, 20, 30, 0.82) 0%,
    rgba(14, 20, 30, 0.60) 50%,
    rgba(14, 20, 30, 0.40) 100%
  );
}
#page-login .auth-backdrop,
#page-login .auth-brand__photo,
#page-signup .auth-backdrop,
#page-signup .auth-brand__photo {
  display: none;
}
/* Staff portals (evaluator/admin) have no public landing to go back to. */
#page-login[data-login-portal="reviewer"] .auth-brand__home,
#page-login[data-login-portal="superadmin"] .auth-brand__home,
body.portal-login-mode #page-login .auth-brand__home {
  display: none !important;
}
#page-login .auth-split .login-card,
#page-signup .auth-split .login-card {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
}
@media (max-width: 980px) {
  /* Stacked bands: the photo spans both, so neither band paints its own
     orange/cream fill, and the scrim runs top to bottom instead. */
  #page-login .auth-brand,
  #page-login .auth-panel,
  #page-signup .auth-brand,
  #page-signup .auth-panel {
    background: transparent;
  }
  #page-login .auth-split::before,
  #page-signup .auth-split::before {
    background: linear-gradient(
      180deg,
      rgba(14, 20, 30, 0.82) 0%,
      rgba(14, 20, 30, 0.60) 45%,
      rgba(14, 20, 30, 0.48) 100%
    );
  }
}

/* Users who ask for reduced motion get no transform easing here. */
@media (prefers-reduced-motion: reduce) {
  .auth-split .btn-primary {
    transition: none;
  }
  .auth-split .btn-primary:hover:not(:disabled) {
    transform: none;
  }
}

/* =====================================================================
   SIGN-IN LOADING FEEDBACK
   1) .btn-spinner  - in-flight feedback on any busy submit button
   2) #auth-transition - full-screen hand-off shown for every entity
      (applicant / evaluator / admin) between a successful sign-in and the
      dashboard redirect, which is otherwise a frozen form.
   ===================================================================== */

/* ---------- 1. Busy buttons ---------- */
.btn-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.55em;
  vertical-align: -0.125em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tcbBtnSpin 0.7s linear infinite;
}
@keyframes tcbBtnSpin {
  to { transform: rotate(360deg); }
}
button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.92;
}

/* ---------- 2. Sign-in transition ---------- */
.auth-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
}
.auth-transition[hidden] {
  display: none;
}
/* Deliberately NOT transitioned. This opens immediately before a full-page
   redirect, so a fade would still be part-way through when the browser starts
   unloading -- measured at opacity 0 at the moment of hand-off. Instant is the
   correct behaviour for a hand-off curtain. */
.auth-transition.is-open {
  opacity: 1;
  pointer-events: auto;
}
.auth-transition__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  max-width: 420px;
}
/* Ring that sweeps around the institution mark. */
.auth-transition__ring {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
}
.auth-transition__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid #e2e8f0;
}
.auth-transition__ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #ff7043;
  border-right-color: rgba(255, 112, 67, 0.65);
  animation: tcbAuthSpin 0.95s cubic-bezier(0.6, 0.15, 0.35, 0.85) infinite;
}
@keyframes tcbAuthSpin {
  to { transform: rotate(360deg); }
}
.auth-transition__logo {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #ffffff;
  color: var(--color-secondary);
  font-size: 2.1rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  border: 1px solid #f1f5f9;
}
.auth-transition__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
}
.auth-transition__title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.01em;
  text-shadow: none;
}
.auth-transition__sub {
  margin-top: 8px;
  font-size: 0.98rem;
  font-weight: 600;
  color: #64748b;
}
/* Indeterminate progress: the wait length is unknown, so it must not pretend
   to represent completion. */
.auth-transition__bar {
  margin-top: 26px;
  width: 220px;
  max-width: 70vw;
  height: 5px;
  border-radius: 99px;
  background: #e2e8f0;
  overflow: hidden;
}
.auth-transition__bar span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff7043, #e05a2b);
  animation: tcbAuthBar 1.25s ease-in-out infinite;
}
@keyframes tcbAuthBar {
  0%   { transform: translateX(-115%); }
  100% { transform: translateX(275%); }
}

@media (max-width: 560px) {
  .auth-transition__ring { width: 108px; height: 108px; }
  .auth-transition__logo { width: 74px; height: 74px; font-size: 1.7rem; }
  .auth-transition__title { font-size: 1.2rem; }
}

/* Motion-sensitive users still get the state change, just without the motion. */
@media (prefers-reduced-motion: reduce) {
  .btn-spinner,
  .auth-transition__ring::after,
  .auth-transition__bar span {
    animation: none;
  }
  .auth-transition__ring::after {
    border-top-color: #ff7043;
    border-right-color: rgba(255, 112, 67, 0.5);
  }
  .auth-transition__bar span {
    width: 100%;
  }
}

/* ===== PAYMENT RECEIPT UPLOAD ===== */
/* Sized for a phone first: the applicant photographing a receipt is the common
   case, and the desktop layout is the same thing with more room. */

.receipt-upload { display: flex; flex-direction: column; gap: 14px; }

.receipt-upload__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 14px 16px;
  background: #f4f6fa;
  border-left: 3px solid var(--navy, var(--navy-dark));
  border-radius: 0 8px 8px 0;
}
.receipt-upload__fee { font-weight: 700; font-size: 1rem; }
.receipt-upload__amount { font-weight: 700; font-size: 1.15rem; color: var(--navy, var(--color-secondary-dark)); }
.receipt-upload__note { flex-basis: 100%; margin: 4px 0 0; font-size: .9rem; color: #55617a; }

.receipt-upload__lead { margin: 0; font-size: .95rem; color: #3c4a5c; }

.receipt-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Comfortably above the 44px touch-target minimum. */
  min-height: 132px;
  padding: 22px 16px;
  border: 2px dashed #b9c2d1;
  border-radius: 12px;
  background: #fbfcfe;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.receipt-dropzone i { font-size: 1.7rem; color: #7a869c; }
.receipt-dropzone strong { font-size: 1rem; }
.receipt-dropzone span { font-size: .86rem; color: #6d7891; }
.receipt-dropzone:hover,
.receipt-dropzone.is-dragover { border-color: var(--navy, var(--navy-dark)); background: #f2f6fc; }
/* Visible keyboard focus -- the dropzone is the primary control, so it must
   never be reachable without being visible. */
.receipt-dropzone:focus-visible {
  outline: 3px solid var(--navy, var(--navy-dark));
  outline-offset: 2px;
}

.receipt-upload__limits { margin: 0; font-size: .82rem; color: #6d7891; }

/* The real input stays in the accessibility tree but out of the way: the
   dropzone above is what people interact with. display:none would remove it
   from assistive technology entirely. */
.receipt-file-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.receipt-selected {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #dde2ea;
  border-radius: 10px;
  background: #fff;
}
.receipt-selected__preview {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #dde2ea;
  flex-shrink: 0;
}
.receipt-selected__icon { font-size: 1.9rem; color: #7a869c; flex-shrink: 0; width: 56px; text-align: center; }
.receipt-selected__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.receipt-selected__meta strong {
  font-size: .94rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.receipt-selected__meta span { font-size: .82rem; color: #6d7891; }

/* Errors carry an icon as well as colour, so the message is not conveyed by
   colour alone. */
.receipt-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fdeceb;
  border-left: 3px solid var(--color-error);
  color: var(--color-error-text);
  font-size: .9rem;
}
.receipt-error::before { content: "\f06a"; font-family: "Font Awesome 6 Free"; font-weight: 900; }

.receipt-progress { display: flex; flex-direction: column; gap: 6px; }
.receipt-progress__bar {
  height: 10px;
  border-radius: 999px;
  background: #e6eaf1;
  overflow: hidden;
}
.receipt-progress__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--navy, var(--navy-dark));
  transition: width .2s ease;
}
/* Shown when the browser cannot measure the body length: motion without a
   number, rather than a percentage that would be a guess. */
.receipt-progress__fill.is-indeterminate {
  width: 40%;
  animation: receiptIndeterminate 1.1s ease-in-out infinite;
}
@keyframes receiptIndeterminate {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}
.receipt-progress p { margin: 0; font-size: .86rem; color: #3c4a5c; }

.receipt-upload__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.oa-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .receipt-progress__fill { transition: none; animation: none; }
  .receipt-dropzone { transition: none; }
}

/* 320-390px: stack the buttons so neither is clipped and both stay full-width
   touch targets. No horizontal scrolling at any width. */
@media (max-width: 420px) {
  .receipt-upload__actions,
  .oa-banner-actions { flex-direction: column-reverse; }
  .receipt-upload__actions .btn,
  .oa-banner-actions .btn { width: 100%; }
  .receipt-selected { flex-wrap: wrap; }
  .receipt-selected .btn { width: 100%; }
  .receipt-dropzone { min-height: 112px; }
}

/* ============================================================
   EVALUATOR - APPLICATION DOCUMENTS
   ============================================================
   The evaluator's document list previously showed a generated storage
   filename as the primary text, so identifying an Abstract from a Valid ID
   meant opening each file. These cards lead with WHAT the document is; the
   filename stays available but recedes to secondary information.

   Uses the existing tokens (--shadow, --radius, --gray-*, --navy) so the panel
   matches the rest of the case view rather than introducing a second visual
   language. */

.doc-group__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin: 18px 0 8px;
}
.doc-group__title:first-of-type { margin-top: 4px; }

.doc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.doc-card:hover { box-shadow: var(--shadow); border-color: var(--gray-300); }

/* min-width:0 lets a long filename ellipsize instead of forcing the row wider
   than the panel, which is what caused horizontal overflow on narrow screens. */
.doc-card__body { min-width: 0; flex: 1 1 auto; }

.doc-card__type {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}

.doc-card__file {
  margin: 3px 0 0;
  font-size: 0.78rem;
  color: var(--gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-card__meta {
  margin: 2px 0 0;
  font-size: 0.72rem;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}
.doc-card__meta:empty { display: none; }

.doc-card__action {
  flex: 0 0 auto;
  min-height: 44px;      /* touch target floor */
  min-width: 44px;
  white-space: nowrap;
}

/* Keyboard users must be able to see where they are. */
.doc-card__action:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

/* Narrow screens: stack so neither the label nor the button is squeezed, and
   let the button span the row so it stays comfortably tappable. */
@media (max-width: 480px) {
  .doc-card {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .doc-card__action { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .doc-card { transition: none; }
}

/* ============================================================
   APPLICANT AUTH - MOBILE TOUCH TARGETS
   ============================================================
   Measured on the login and signup pages at 320-430px: the consent checkbox
   was 16x16, "Remember me" was 20x20, and the footer/forgot links were 18-22px
   tall. All are below the 44px minimum, and all of them are things a person
   taps one-handed on a phone.

   The boxes themselves stay visually small -- a 44px checkbox glyph looks
   wrong. What grows is the TAPPABLE AREA: the label wraps the box, so tapping
   the words toggles it, and the label is what gets the height. For the links a
   transparent ::after expands the hit area without moving any text, so the
   layout is unchanged and only the target grows. */

.auth-consent,
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-height: 44px;          /* the label is the touch target */
  padding: 4px 0;
}
.auth-consent { align-items: flex-start; }
.auth-consent .auth-checkbox { margin-top: 11px; }

.auth-checkbox,
.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--navy);
  cursor: pointer;
}

/* Links inside the auth cards: keep the text where it is, grow the hit area.
   auth-brand__home is excluded here -- it's already position:absolute (its
   own rule above, pinning it to the top-left corner of the brand panel), and
   overriding that to position:relative dropped it into normal document flow,
   where the brand panel's vertical centering shoved it down into the middle
   of the panel instead of the top-left corner. absolute is itself a valid
   positioning context for its ::after hit-area below, so nothing is lost. */
.login-footer a,
.forgot-link {
  position: relative;
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}
.login-footer a::after,
.forgot-link::after,
.auth-brand__home::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;              /* >= 44px tall, invisible, does not shift layout */
  min-width: 44px;
}

/* Keyboard users need to see the target they cannot feel. */
.auth-consent:focus-within,
.checkbox-label:focus-within {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (max-width: 480px) {
  /* One-handed reach: full-width primary actions, comfortable field height. */
  .login-card .btn-block { min-height: 48px; }
  .login-card input[type="text"],
  .login-card input[type="email"],
  .login-card input[type="password"] { min-height: 46px; font-size: 16px; }
  /* 16px is deliberate: iOS Safari zooms the viewport when a focused input has
     a smaller font size, which is the "page jumps when I tap the field" bug. */
}

/* The legal row under the auth cards ("Terms & Conditions | Privacy Policy").
   These are standalone links on their own line, so the hit area can grow
   without touching anything else. */
.login-legal a {
  position: relative;
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}
.login-legal a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  min-width: 44px;
}

/* NOT given the same treatment: the "Terms & Conditions" link inside the signup
   consent sentence ("I agree to the Terms & Conditions"). It is inline within a
   block of text, which WCAG 2.5.8 exempts, and a 44px overlay there would sit
   on top of the surrounding label text and swallow taps meant to toggle the
   consent checkbox -- breaking the target this stylesheet just fixed. Its own
   line-height is what constrains it, which is exactly the exempted case. */

/* =====================================================================
 * LEGAL PAGES  (Terms & Conditions, Data Privacy)
 * ---------------------------------------------------------------------
 * These render WITHOUT #public-nav, so the document is the only thing on
 * the page. The old markup carried `padding-top: 100px !important` inline
 * to clear the landing navbar; with no navbar there is nothing to clear,
 * and that reservation is replaced by the bar below.
 *
 * The back control is a real <button>, not a styled link: it performs an
 * action (history navigation) rather than addressing a resource, so it is
 * reachable by keyboard and announced correctly.
 * ===================================================================== */
.legal-page {
  padding-top: 24px;
}
.legal-page__bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  margin-bottom: 8px;
  /* Opaque: the document scrolls underneath this bar. */
  background: var(--white, #fff);
  border-bottom: 1px solid var(--gray-100, #eee);
}
.legal-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 44px clears the WCAG 2.5.8 minimum with room to spare -- this is the
     only way off the page, so it must not be fiddly on a phone. */
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid var(--gray-200, #e5e7eb);
  border-radius: 999px;
  background: var(--white, #fff);
  color: var(--navy, var(--navy-dark));
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.legal-page__back:hover {
  background: var(--gray-50, #f9fafb);
  border-color: var(--navy, var(--navy-dark));
}
.legal-page__back:focus-visible {
  outline: 3px solid var(--brand-action, var(--color-info));
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .legal-page {
    padding-top: 12px;
  }
  .legal-page__bar {
    padding: 10px 0;
  }
  /* The document body is authored with inline desktop padding; on a phone the
     container's own gutter is the only margin that should apply. */
  .legal-page__back {
    padding: 10px 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .legal-page__back { transition: none; }
}

/* =====================================================================
 * LEGAL DOCUMENT  (Data Privacy Policy)
 * ---------------------------------------------------------------------
 * A long statutory document, so it is set for READING: a measured line
 * length, generous line-height, and a heading hierarchy that survives
 * being skimmed. Semantic <article>/<nav>/<section> with real <h1>/<h2>
 * carries the structure to screen readers and to the browser's own
 * outline, rather than styled <div>s.
 * ===================================================================== */
.legal-doc {
  max-width: 820px;
  margin: 0 auto;
  padding: 8px 0 72px;
  /* ~70 characters at this size: past roughly 80 the eye loses the start
     of the next line, which matters most in dense legal prose. */
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--gray-700, #374151);
}
.legal-doc__head {
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--gray-100, #f3f4f6);
}
.legal-doc h1 {
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 900;
  color: var(--navy, var(--navy-dark));
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.legal-doc__lead {
  font-size: 1rem;
  color: var(--gray-600, #4b5563);
  margin: 0 0 16px;
}
.legal-doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray-400, #9ca3af);
}
.legal-doc__toc {
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-100, #f3f4f6);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 36px;
}
.legal-doc__toc h2 {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400, #9ca3af);
  margin: 0 0 12px;
}
.legal-doc__toc ol {
  margin: 0;
  padding-left: 1.1rem;
  columns: 2;
  column-gap: 28px;
}
.legal-doc__toc li {
  margin-bottom: 6px;
  /* Keeps a wrapped entry from splitting across the two columns. */
  break-inside: avoid;
}
.legal-doc__toc a {
  color: var(--navy, var(--navy-dark));
  font-weight: 600;
  font-size: 0.86rem;
}
.legal-doc__section {
  /* scroll-margin so a heading jumped to from the contents is not hidden
     behind the sticky Back bar. */
  scroll-margin-top: 84px;
  margin-bottom: 34px;
}
.legal-doc__section h2 {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--navy, var(--navy-dark));
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
  text-wrap: balance;
}
.legal-doc__section p { margin: 0 0 14px; }
.legal-doc__section ul {
  margin: 0 0 14px;
  padding-left: 1.3rem;
}
.legal-doc__section li { margin-bottom: 8px; }
.legal-doc__section strong { color: var(--navy, var(--navy-dark)); }
/* Placeholders awaiting an institutional decision are marked visually so a
   reviewer cannot miss one before publication. */
.legal-doc__section em {
  background: rgba(245, 158, 11, 0.12);
  padding: 1px 5px;
  border-radius: 4px;
  font-style: normal;
  font-weight: 600;
  color: var(--color-warning-text);
}
.legal-doc__note {
  margin-top: 40px;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
  color: var(--color-warning-text);
}
.legal-doc__note p { margin: 0; }
.legal-doc__note em {
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 640px) {
  .legal-doc {
    font-size: 0.92rem;
    line-height: 1.75;
    padding-bottom: 48px;
  }
  /* One column: two columns of wrapped links at 320px is unreadable. */
  .legal-doc__toc {
    padding: 16px 18px;
  }
  .legal-doc__toc ol {
    columns: 1;
  }
  .legal-doc__section {
    scroll-margin-top: 72px;
  }
}

/* ---------------------------------------------------------------------------
 * CASE FILTER TOOLBAR  (Cases / My Cases)
 *
 * The search box, the Active/Archived tabs and the IP-type buttons were three
 * separate divs carrying their own inline padding -- 14px/4px, 0/10px and
 * 0/14px -- with gaps of 10px and 6px. Nothing lined up: the rows sat at
 * different left offsets from their own shadows, the vertical rhythm changed
 * between them, and the controls were different heights because only some
 * inherited the reviewer min-height.
 *
 * One class now sets the horizontal inset and the gap for all three, so the
 * rows share an edge and a rhythm, and every control in them resolves to the
 * same height regardless of whether it is a button, a select or an input.
 * ------------------------------------------------------------------------- */
.case-filter-row {
  display: flex;
  align-items: center;      /* controls of different heights share a centre line */
  gap: 8px;
  flex-wrap: wrap;          /* wraps instead of overflowing on narrow screens */
  padding: 0 24px 10px;
}
.case-filter-row--search { padding-top: 14px; }
.case-filter-row--last { padding-bottom: 14px; }

/* One height for every control in the toolbar. Without this the select and the
 * search input sat a few pixels taller than the pill buttons beside them. */
.case-filter-row .filter-btn,
.case-filter-row .filter-select,
.case-filter-search input {
  min-height: 36px;
}

.case-filter-search {
  max-width: 360px;
  width: 100%;              /* full width under ~400px rather than a stub box */
  margin: 0;
}

/* Narrow screens: the inset shrinks with the card's own padding so the rows
 * keep their shared edge instead of drifting apart. */
@media (max-width: 640px) {
  .case-filter-row { padding-left: 16px; padding-right: 16px; gap: 6px; }
  .case-filter-search { max-width: none; }
}

/* ---------------------------------------------------------------------------
 * AUTH PAGES ON A PHONE  (<= 767px)
 *
 * The stacked mobile layout already exists further up, and measurement in
 * Chromium at 320/360/375/390/400/412 confirms what it already gets right:
 * no horizontal overflow at any width, the document (not a nested box) is what
 * scrolls on signup, and the desktop two-column split is unaffected.
 *
 * What measurement DID find is touch-target size. "Back to Home" rendered
 * 36px tall and "Forgot Password?" similar -- both below the ~44px that Apple
 * and Google both recommend, and both are controls a thumb has to hit on the
 * first try. Everything here enlarges the hit area without moving the visual
 * design: padding grows, the text does not.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Pill back-button: same look, thumb-sized box. */
  .auth-brand__home {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
  }

  /* "Forgot Password?" and the signup link are plain anchors, so their hit
   * area was only as tall as the text. inline-flex + min-height gives them a
   * real box while leaving the baseline where it was. */
  .auth-split .forgot-link,
  .auth-split .login-footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* The remember-me row: keep the checkbox and the link on one line where it
   * fits, and let it wrap rather than overflow when it does not. The checkbox
   * itself gets a real tap area. */
  .auth-split .form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }
  .auth-split .form-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
  }
  .auth-split .form-options input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  /* Fields and the primary action at comfortable mobile heights. 16px on the
   * inputs is deliberate: iOS Safari zooms the page when a focused input has
   * a smaller computed font size, which is itself a cause of "the keyboard
   * covered the field". */
  .auth-split .input-icon input,
  .auth-split .input-icon select {
    min-height: 52px;
    font-size: 16px;
  }
  .auth-split .btn-primary {
    min-height: 54px;
    font-size: 1rem;
  }

  /* The show/hide control must stay easy to hit inside the field. */
  .auth-split .password-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Room beneath the last control so the final button is never flush against
   * the bottom edge once the page is scrolled down. */
  .auth-panel {
    padding-bottom: max(34px, env(safe-area-inset-bottom, 0px));
  }
}

/* ---------------------------------------------------------------------------
 * AUTH PAGES: LET THE PHONE SCROLL  (<= 767px)
 *
 * The desktop auth pages are a deliberate full-bleed split screen, pinned to
 * the viewport so the orange band and the form each own half of it. Four
 * nested elements carry that lock:
 *
 *     body.standalone-login-mode            height:100dvh; overflow:hidden
 *     body.standalone-login-mode #app       height:100dvh; overflow:hidden
 *     #page-login.active / #page-signup.active  height:100dvh; overflow:hidden
 *     .login-wrapper                        height:100dvh; overflow-y:hidden
 *
 * On a phone that is a clip, not a layout. Measured at 320x568: the signup
 * document is 1271px tall, window.scrollTo(0, 1271) moved scrollY to 0 -- the
 * page could not scroll at all -- and the Sign Up button sat at y=1038 inside
 * a 568px viewport, permanently unreachable. Larger phones hid the bug only
 * because the content happened to fit; it returns on any short screen, which
 * includes every phone once the keyboard opens and halves the viewport.
 *
 * Releasing the height and the clip lets the document scroll normally. The
 * horizontal clip is kept, because sideways scrolling on a phone is a defect
 * in its own right. Desktop is untouched: everything here is inside the
 * media query.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body.standalone-login-mode,
  body.standalone-login-mode #app,
  body.standalone-login-mode #page-login.active,
  body.standalone-login-mode #page-signup.active,
  body.standalone-login-mode #page-forgot-password.active,
  body.standalone-login-mode #page-reset-password.active {
    height: auto;
    min-height: 100vh;    /* fallback for browsers without dvh */
    min-height: 100dvh;   /* excludes the browser chrome that vh includes */
    overflow-x: hidden;
    overflow-y: visible;  /* the DOCUMENT scrolls, not a nested box */
  }

  body.standalone-login-mode .login-wrapper {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: start;   /* content grows downward instead of centring and clipping */
    padding: 0;           /* the stacked bands supply their own insets */
    overflow-x: hidden;
    overflow-y: visible;
  }

  /* The card is nearly full width with a comfortable gutter, per the brief. */
  body.standalone-login-mode .login-card,
  .auth-split .login-card {
    max-width: none;
    width: auto;
    margin: 0;
  }
}

/* ---------------------------------------------------------------------------
 * AVATARS
 *
 * One component for every place a person is shown: message bubbles,
 * conversation headers, profile pages, the account menu.
 *
 * The initials layer sits UNDER the photo rather than replacing it, so a photo
 * that fails to load reveals initials instead of a broken-image icon -- the
 * img removes itself on error (see renderAvatar) and the layer beneath is
 * already painted. No flash, no empty box.
 *
 * aspect-ratio + object-fit keep a non-square upload from distorting: the
 * image is cropped to the circle, never squashed.
 * ------------------------------------------------------------------------- */
.tcb-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gray-200, #e2e8f0);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}
.tcb-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crop, never distort */
  border-radius: 50%;
  /* Above the initials. Both elements are positioned, so without this they
     sit at the same stacking level and DOM order decides -- and the initials
     come later in the markup, which painted "AU"/"EU" straight over the
     photo. */
  z-index: 1;
}
.tcb-avatar__initials {
  position: relative;
  z-index: 0;
}

/* The initials are a PLACEHOLDER, not a watermark. They fill the circle while
   the authenticated fetch is in flight and stand in permanently when there is
   no photo -- but the moment a real image is painted they must be gone, not
   merely covered. Relying on the photo to hide them fails for anything with
   transparency, where the letters show through the gaps. */
.tcb-avatar.has-photo .tcb-avatar__initials {
  display: none;
}
.tcb-avatar.is-fallback {
  background: var(--navy, var(--navy));
}

/* Screen-reader-only label. Every avatar carries the person's name in text,
 * so a photo is never the only way someone is identified. */
.tcb-avatar .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- chat integration ---- */
.chat-message {
  align-items: flex-end;
  gap: 8px;
}
/* Own messages sit on the right, so the avatar follows the bubble. */
.chat-message.mine {
  flex-direction: row-reverse;
}
.chat-avatar {
  margin-bottom: 2px;
}
/* Grouped messages keep the bubbles aligned with the first one in the run
 * instead of sliding under the avatar column. */
.chat-avatar-spacer {
  flex: 0 0 auto;
  width: 34px;
}
.chat-sender-role {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 100px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy, var(--navy));
  background: rgba(139, 69, 19, 0.1);
}

@media (max-width: 640px) {
  .chat-avatar-spacer { width: 28px; }
  .chat-message { gap: 6px; }
}

/* ---------------------------------------------------------------------------
 * PROFILE PAGE  (applicant, evaluator, administrator)
 *
 * One layout for all three roles. What differs is which fields the backend
 * says are editable, not the styling, so there is no per-role CSS here.
 * ------------------------------------------------------------------------- */
.profile-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 28px;
  align-items: start;
}
.profile-card {
  background: var(--surface, #fff);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 14px;
  padding: 28px 22px;
  text-align: center;
}
.profile-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy, var(--navy));
  margin: 16px 0 4px;
  overflow-wrap: anywhere;   /* a long name wraps instead of widening the card */
}
.profile-role {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0;
}
.profile-title {
  font-size: 0.9rem;
  color: var(--gray-500, #64748b);
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}

/* ---- avatar + its controls ---- */
.profile-avatar-block { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.profile-avatar-lg { font-size: 2.4rem; box-shadow: 0 6px 18px rgba(139, 69, 19, 0.16); }
.profile-avatar-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.profile-avatar-hint { font-size: 0.74rem; color: var(--gray-400, #637896); margin: 0; }
.profile-avatar-status { min-height: 20px; font-size: 0.78rem; }
.profile-busy { color: var(--gray-500, #64748b); }
.profile-avatar-remove { color: var(--red, var(--color-error-text)); }

/* The file input is visually hidden but still focusable and still the thing a
 * screen reader announces -- display:none would remove it from the tab order
 * and leave the label pointing at nothing. */
.sr-only-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* The label acts as the button, so it must show the same focus ring the input
 * receives -- otherwise keyboard users get no indication at all. */
.sr-only-input:focus-visible + label {
  outline: 2px solid var(--brand, #e66b3f);
  outline-offset: 2px;
}
label.btn.is-disabled { opacity: 0.55; pointer-events: none; }

/* ---- panels ---- */
.profile-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.profile-protected { margin-top: 20px; }
.profile-protected .detail-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; }
.profile-protected .value { overflow-wrap: anywhere; text-align: right; }
.profile-form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.profile-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  overflow-wrap: anywhere;   /* a long server message must not overflow */
}
.profile-alert--error { background: rgba(185, 28, 28, 0.08); color: var(--red, var(--color-error-text)); }
.profile-alert--ok { background: rgba(16, 122, 87, 0.1); color: var(--color-success-text); }

/* A disabled input still has to be readable -- these fields show current
 * values outside edit mode, so the browser's default grey-out is too faint. */
.profile-main-col input:disabled,
.profile-main-col textarea:disabled {
  background: var(--gray-50, #f8fafc);
  color: var(--navy, var(--navy));
  -webkit-text-fill-color: var(--navy, var(--navy));
  opacity: 1;
}
.profile-main-col textarea { width: 100%; resize: vertical; }

@media (max-width: 900px) {
  .profile-layout { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .profile-card { padding: 22px 16px; }
  .profile-avatar-actions .btn { flex: 1 1 auto; }
  .profile-protected .detail-row { flex-direction: column; gap: 2px; }
  .profile-protected .value { text-align: left; }
}

/* ===== MESSAGE SENDER IDENTITY ===== */
/* The avatar becomes a button, so the button must add nothing visual: no
   padding, border or background, or every message row would shift. */
.chat-identity-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  border-radius: 50%;
  flex: 0 0 auto;
}

.chat-identity-btn:focus-visible {
  outline: 2px solid var(--gold, var(--color-warning));
  outline-offset: 2px;
}

.chat-identity-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 8px 4px 4px;
}

.chat-identity-name {
  margin: 8px 0 0;
  font-size: 1.15rem;
}

.chat-identity-role {
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-accent-text);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.chat-identity-note {
  margin: 4px 0 0;
  font-size: .85rem;
  color: var(--gray-500, #6b7280);
  max-width: 34ch;
}

.chat-identity-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

/* The shell avatars sit inside slots that already size themselves, so the
   avatar fills its slot rather than imposing its own box. */
.user-avatar .tcb-avatar--chrome {
  width: 100% !important;
  height: 100% !important;
}

/* ---------- Announcement Table Header Hierarchy ----------
   Target desktop hierarchy: All Announcements on the left with its
   Category filter directly underneath it; Add New Announcement button
   aligned to the far right. Stacks cleanly on smaller viewports. */
.announcement-table-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.announcement-table-header__left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.announcement-table-header__left h3 {
  margin: 0;
}
.announcement-table-header__left .filter-select {
  min-width: 180px;
  max-width: 260px;
}
.announcement-table-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: auto;
}
@media (max-width: 640px) {
  .announcement-table-header {
    flex-direction: column;
    align-items: stretch;
  }
  .announcement-table-header__left .filter-select {
    max-width: 100%;
    width: 100%;
  }
  .announcement-table-header__actions {
    margin-left: 0;
    width: 100%;
  }
  .announcement-table-header__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   PREMIUM LANDING PAGE POLISH (TARGET 9.5+/10)
   ============================================================ */

/* 1. IP Services Balanced Grid (Fix 4+1 Asymmetry) */
#ip-services-landing-section .container {
  max-width: 1320px;
}

@media (min-width: 1024px) {
  .ip-services-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: 32px !important;
  }
  .ip-service-card {
    padding: 20px 14px !important;
  }
  .ip-service-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.15rem !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }
  .ip-service-title {
    font-size: 1.02rem !important;
    min-height: 2.7em !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }
  .ip-service-desc {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .ip-service-reqs {
    margin-top: auto !important;
    margin-bottom: 14px !important;
    padding-top: 10px !important;
  }
  .ip-service-req-label {
    font-size: 0.68rem !important;
    margin-bottom: 4px !important;
  }
  .ip-service-req-items {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
  }
  .ip-service-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .ip-service-actions .btn-apply {
    flex: 1 !important;
    padding: 7px 10px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
  }
  .ip-service-actions .link-guide {
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 1023px) and (min-width: 641px) {
  .ip-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
    margin-top: 28px !important;
  }
  .ip-service-card:nth-child(5) {
    grid-column: 1 / -1 !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  .ip-services-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 24px !important;
  }
  .ip-service-card:nth-child(5) {
    grid-column: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
  }
}

.ip-service-card {
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.ip-service-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px -4px rgba(139, 69, 19, 0.12) !important;
  border-color: rgba(180, 67, 26, 0.4) !important;
}

/* 2. IP Protection Journey (Connected Workflow Pipeline) */
.ip-journey-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-top: 40px !important;
}

.ip-journey-card {
  border-radius: 16px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
  padding: 24px 20px !important;
  position: relative;
  background: #ffffff !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.ip-journey-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 28px -4px rgba(139, 69, 19, 0.1) !important;
  border-color: rgba(180, 67, 26, 0.4) !important;
}

/* Horizontal Pipeline Arrow Connectors (Desktop >= 993px) */
@media (min-width: 993px) {
  .ip-journey-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 36px;
    right: -13px;
    width: 26px;
    height: 2px;
    background: linear-gradient(90deg, var(--navy), var(--brand-action));
    z-index: 2;
  }
  .ip-journey-card:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 33px;
    right: -15px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--brand-action);
    border-right: 2px solid var(--brand-action);
    transform: rotate(45deg);
    z-index: 3;
  }
}

/* Tablet Layout (2x2 Grid) */
@media (max-width: 992px) and (min-width: 641px) {
  .ip-journey-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

/* Mobile Vertical Connected Timeline (<= 640px) */
@media (max-width: 640px) {
  .ip-journey-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    position: relative !important;
    padding-left: 24px !important;
    margin-left: 12px !important;
    border-left: 2px dashed rgba(180, 67, 26, 0.35) !important;
  }
  .ip-journey-card::before {
    content: '';
    position: absolute;
    left: -31px;
    top: 26px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--brand-action);
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px var(--brand-action);
  }
}

/* 4. News & Announcements Card Baseline Alignment */
.announcement-card {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border-radius: 16px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
  background: #ffffff !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.announcement-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 36px -4px rgba(139, 69, 19, 0.12) !important;
  border-color: rgba(180, 67, 26, 0.4) !important;
}

.ann-image-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--gray-100);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.ann-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.announcement-card:hover .ann-image-wrap img {
  transform: scale(1.03);
}

/* Fallback header banner when no photo is provided */
.ann-image-fallback {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-dark) 60%, var(--navy-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ann-image-fallback::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top right, rgba(180, 67, 26, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.ann-fallback-bg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffffff;
  z-index: 1;
}

.ann-fallback-icon {
  font-size: 2.2rem;
  color: var(--color-accent-text);
  opacity: 0.9;
}

.ann-fallback-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.75);
}

.ann-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.ann-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.8em !important;
  margin-bottom: 8px !important;
}

.ann-content {
  flex: 1 1 auto !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

.ann-unit {
  margin-top: auto !important;
  margin-bottom: 14px !important;
  padding-top: 12px !important;
  border-top: 1px dashed var(--gray-200) !important;
}

.ann-filter-pill {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ann-filter-pill:hover:not(.active) {
  background: rgba(180, 67, 26, 0.08) !important;
  border-color: rgba(180, 67, 26, 0.3) !important;
  color: var(--color-accent-text) !important;
}

/* 5. Marketplace Empty State Architecture */
.marketplace-empty-card {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  background: linear-gradient(180deg, #ffffff 0%, var(--gray-50) 100%);
  border-radius: 18px;
  border: 1px dashed rgba(139, 69, 19, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

.marketplace-empty-card .empty-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(139, 69, 19, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--navy);
  font-size: 1.6rem;
  border: 1px solid rgba(139, 69, 19, 0.1);
}

.marketplace-empty-card .empty-status-pill {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(180, 67, 26, 0.08);
  color: var(--color-accent-text);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.marketplace-empty-card .empty-title {
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.marketplace-empty-card .empty-desc {
  color: var(--gray-600);
  font-size: 0.92rem;
  max-width: 480px;
  line-height: 1.6;
  margin: 0 auto 18px;
}

/* 6. Hero Corner Emblem Balance */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-corner-logo {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.hero-corner-logo:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(139, 69, 19, 0.18) !important;
}

/* 7. Navigation Hover & Active Underline Indicator */
.nav-link {
  position: relative !important;
  transition: color 0.18s ease, background-color 0.18s ease !important;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--brand-action);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

/* 8. Consolidated Mobile Floating Speed-Dial FAB */
.floating-speed-dial {
  position: fixed;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

@media (max-width: 640px) {
  .floating-speed-dial {
    right: calc(12px + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.speed-dial-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 4px;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.speed-dial-menu[hidden] {
  display: none !important;
}

.speed-dial-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  color: var(--navy);
  border: 1px solid rgba(139, 69, 19, 0.12);
  border-radius: 50px;
  padding: 8px 16px 8px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  min-height: 48px;
}

.speed-dial-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 69, 19, 0.15);
  background: var(--gray-50);
}

.speed-dial-item i {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.95rem;
}

.speed-dial-item--contact i { background: var(--brand-action); }
.speed-dial-item--location i { background: var(--color-error); }
.speed-dial-item--ask i { background: var(--navy); }

.floating-fab-main {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  border: 2px solid #ffffff;
  box-shadow: 0 6px 18px rgba(192, 86, 33, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
  min-width: 48px;
  min-height: 48px;
}

.floating-fab-main:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 22px rgba(192, 86, 33, 0.32);
}

.floating-fab-main .fab-icon-close { display: none; }
.floating-fab-main.active .fab-icon-default { display: none; }
.floating-fab-main.active .fab-icon-close { display: block; }
.floating-fab-main.active {
  background: var(--navy);
  box-shadow: 0 8px 24px rgba(139, 69, 19, 0.35);
}

.floating-fab-main .fab-text-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .floating-fab-main {
    width: auto;
    border-radius: 50px;
    padding: 0 20px;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 700;
  }
  .floating-fab-main .fab-text-desktop {
    display: inline;
  }
}

/* ============================================================
   ADMIN IP RECORDS REGISTRY & DOSSIER MODERNIZATION
   ============================================================ */

/* 1. KPI Summary Cards */
.admin-records-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.admin-records-kpi-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.03);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-records-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -2px rgba(15, 23, 42, 0.06);
}

.admin-records-kpi-card .kpi-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.admin-records-kpi-card .kpi-icon-wrap.primary {
  background: rgba(139, 69, 19, 0.1);
  color: var(--navy);
}

.admin-records-kpi-card .kpi-icon-wrap.blue {
  background: rgba(37, 99, 235, 0.1);
  color: var(--color-info-text);
}

.admin-records-kpi-card .kpi-icon-wrap.amber {
  background: rgba(217, 119, 6, 0.1);
  color: var(--color-warning-text);
}

.admin-records-kpi-card .kpi-icon-wrap.green {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success-text);
}

.admin-records-kpi-card .kpi-icon-wrap.terracotta {
  background: rgba(180, 67, 26, 0.1);
  color: var(--color-accent-text);
}

.admin-records-kpi-card .kpi-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  font-family: "Inter", "Manrope", system-ui, sans-serif;
}

.admin-records-kpi-card .kpi-label {
  font-size: 0.78rem;
  color: var(--gray-500);
  font-weight: 600;
  margin-top: 3px;
}

/* 2. Toolbar (Search & Filters) */
.admin-records-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: #ffffff;
  border-bottom: 1px solid var(--gray-200);
  flex-wrap: wrap;
}

.admin-records-search-wrap {
  position: relative;
  flex: 1 1 320px;
  max-width: 480px;
}

.admin-records-search-wrap .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: 0.85rem;
}

.admin-records-search-input {
  width: 100%;
  padding: 9px 36px 9px 36px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  font-size: 0.85rem;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: var(--gray-50);
}

.admin-records-search-input:focus {
  background: #ffffff;
  border-color: var(--navy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
}

.admin-records-search-wrap .btn-clear-search {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  padding: 4px;
  font-size: 0.8rem;
}

.admin-records-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-records-meta-bar {
  padding: 10px 20px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.8rem;
  color: var(--gray-500);
}

/* 3. Modern Table Details */
.btn-copy-ref {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.78rem;
  transition: color 0.15s ease, background 0.15s ease;
}

.btn-copy-ref:hover {
  color: var(--navy);
  background: var(--gray-200);
}

.record-ref-id {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.record-ref-meta {
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 5px;
}

.record-certified-pill {
  color: var(--color-success-text);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.record-asset-title {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.35;
}

.record-desc-preview {
  font-size: 0.78rem;
  color: var(--gray-500);
  line-height: 1.4;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.record-creator-name {
  font-weight: 600;
  color: var(--navy);
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.record-dept-text {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 4. Dossier Modal Styling */
.ip-dossier-wrapper {
  padding: 4px;
}

.ip-dossier-header-banner {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-dark) 100%);
  border-radius: 14px;
  padding: 22px 24px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.ip-dossier-header-banner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 260px;
  background: radial-gradient(circle at center, rgba(180, 67, 26, 0.3) 0%, transparent 70%);
  pointer-events: none;
}

.dossier-cert-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-warning-text);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 8px;
  backdrop-filter: blur(4px);
}

.dossier-title {
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 10px;
}

.dossier-ref-code {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  padding: 4px 10px;
  border-radius: 6px;
}

.dossier-ref-code .btn-copy-ref {
  color: rgba(255, 255, 255, 0.7);
}

.dossier-ref-code .btn-copy-ref:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
}

.dossier-seal-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dossier-seal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.ip-dossier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dossier-section-panel {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 16px 18px;
}

.dossier-section-panel.full-width {
  grid-column: 1 / -1;
}

.dossier-section-title {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--navy);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 768px) {
  .ip-dossier-grid {
    grid-template-columns: 1fr;
  }
  .ip-dossier-header-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .dossier-seal-wrap {
    display: none;
  }
  .admin-records-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  /* In the column layout, flex: 1 1 320px became a 320px HEIGHT, leaving
     the search icon floating in an empty band above the filters. */
  .admin-records-search-wrap {
    max-width: 100%;
    flex: 0 0 auto;
  }
  /* A phone-wide input rule resets padding to 14px, which put the typed
     text under the magnifier icon. Keep the room the icon needs. */
  .admin-records-search-input {
    padding-left: 40px !important;
  }
}

/* Reduced Motion Compliance */
@media (prefers-reduced-motion: reduce) {
  .hero-corner-logo,
  .ip-service-card,
  .ip-journey-card,
  .announcement-card,
  .ann-image-wrap img,
  .speed-dial-item,
  .floating-fab-main,
  .nav-link::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* Contact page on a 320px screen.
 *
 * Measured, not guessed: at 320px the page scrolled sideways by 28px, and the
 * element forcing it was #page-contact itself at 348px wide -- it is a flex
 * item, so its automatic minimum size is its min-content width, and it grew
 * past its parent rather than clipping.
 *
 * That min-content width comes from .contact-info-card: renderContactUs()
 * gives it an inline padding:40px, and inside sits a 56px icon column, a 20px
 * gap and "ipo@psu.palawan.edu.ph" -- one token with nowhere to break. 40 + 40
 * + 56 + 20 + the email's ~168px is the 324px the card would not go below.
 *
 * Trimming the padding at this width recovers 32px and allowing the address to
 * break covers the rest. !important is needed only because the padding is an
 * inline style written by the renderer; nothing above 360px is affected, so
 * the design at every other width is untouched.
 */
@media (max-width: 360px) {
  .contact-info-card {
    padding: 24px !important;
  }
  .contact-info-card p,
  .contact-info-card h3 {
    overflow-wrap: anywhere;
  }
}

/* =============== EXAMINATION & CERTIFICATION WAYFINDING ===============
 *
 * renderCaseWayfinding() in static/js/app.js emits .case-wayfinding-tracker
 * and seven classes beneath it, and none of them had a single rule in this
 * file. With no styles the dots, labels and meta text render as loose block
 * and inline elements, so the applicant's progress tracker came out as a bare
 * vertical list: a stray check mark or digit on its own line, then the step
 * name, then the description -- four times over.
 *
 * The step states the renderer assigns are: completed, active, alert,
 * upcoming. Each gets its own dot treatment; the rail between the dots is a
 * pseudo-element so it never needs extra markup.
 */
.case-wayfinding-tracker {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 20px;
}

.wayfinding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.wayfinding-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}

.wayfinding-title i {
  color: var(--color-accent-text);
}

/* One column per step. 5 stages: Pending, Under Review, Evaluated, On Going, Certified */
.wayfinding-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.wayfinding-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The connecting rail, drawn from each step toward the next and suppressed on
   the last one, so no extra element is needed and it disappears by itself
   when the row wraps to a single column. */
.wayfinding-step::after {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: var(--line);
}

.wayfinding-step:last-child::after {
  display: none;
}

.wayfinding-step.completed::after {
  background: var(--success, #16a34a);
}

.wayfinding-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
  background: #f1f5f9;
  color: #475569;
  border: 2px solid #e2e8f0;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.wayfinding-step.completed .wayfinding-dot {
  background: var(--success, #16a34a);
  border-color: var(--success, #16a34a);
  color: #fff;
}

.wayfinding-step.completed .wayfinding-label {
  color: var(--navy);
  font-weight: 700;
}

.wayfinding-step.active .wayfinding-dot {
  background: #ea580c;
  border-color: #ea580c;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.18);
}

.wayfinding-step.alert .wayfinding-dot {
  background: var(--warning, #dc2626);
  border-color: var(--warning, #dc2626);
  color: #fff;
}

.wayfinding-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}

.wayfinding-step.active .wayfinding-label {
  color: #9a3412;
  font-weight: 700;
}

.wayfinding-step.upcoming .wayfinding-dot {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

.wayfinding-step.upcoming .wayfinding-label {
  color: #334155;
  font-weight: 600;
}

.wayfinding-sub {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
  margin-top: 3px;
}

/* Below this the four-across rail stops being readable, so the tracker
   becomes a left-aligned vertical list with the rail running down it. */
@media (max-width: 560px) {
  .wayfinding-steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .wayfinding-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
    padding: 0;
  }
  .wayfinding-step::after {
    top: 34px;
    bottom: -18px;
    left: 15px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .wayfinding-dot {
    margin-bottom: 0;
  }
}

/* =============== LANDING PAGE 9.5+ RESPONSIVE & ACCESSIBILITY POLISH =============== */

/* 1. Public Nav & Mobile Drawer Hardening */
#public-nav {
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

@media (max-width: 900px) {
  .nav-links {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 0 0 20px 20px !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12) !important;
    border: 1px solid rgba(255, 112, 67, 0.14) !important;
    border-top: none !important;
    padding: 18px 20px 24px !important;
    gap: 4px !important;
  }
  .nav-links .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
  }
  .nav-links .btn-signup {
    background: rgba(139, 69, 19, 0.06) !important;
    color: var(--navy) !important;
    border: 1.5px solid var(--navy) !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 12px !important;
    border-radius: var(--radius-sm) !important;
  }
  .nav-links .btn-login {
    background: linear-gradient(135deg, var(--brand-action), var(--brand-strong)) !important;
    color: var(--color-on-primary) !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 6px !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 8px 18px rgba(255, 112, 67, 0.25) !important;
  }
}

/* 2. Hero Section 375px / 768px / 1440px Fluid Polish */
.hero {
  position: relative;
  overflow: hidden;
  background: transparent;
}

@media (min-width: 1280px) {
  .hero {
    padding: 136px 32px 80px !important;
  }
  .hero-title {
    font-size: 4.25rem !important;
  }
}

@media (max-width: 900px) and (min-width: 641px) {
  .hero {
    padding: 120px 24px 60px !important;
  }
  .hero-title {
    font-size: 3.1rem !important;
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 100px 16px 44px !important;
    min-height: auto !important;
  }
  .hero-corner-logo {
    width: 44px !important;
    height: 44px !important;
    top: calc(var(--topbar-h, 64px) + 12px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
  }
  .hero-corner-logo.left {
    left: 14px !important;
  }
  .hero-corner-logo.right {
    right: 14px !important;
  }
  .hero-badge {
    font-size: 0.72rem !important;
    padding: 6px 14px !important;
    margin-bottom: 18px !important;
    letter-spacing: 0.05em !important;
  }
  .hero-title {
    font-size: clamp(2.1rem, 7.5vw, 2.7rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 16px !important;
  }
  .hero-tagline {
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
    padding: 0 4px;
  }
  .hero-subtext {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    margin: 0 auto 24px !important;
    padding: 0 4px;
  }
  .hero-cta {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .hero-cta .btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
  }
}

/* 3. IP Journey Mobile Stepper Hardening (375px Zero-Overflow) */
@media (max-width: 640px) {
  .ip-journey-grid {
    padding-left: 20px !important;
    margin-left: 6px !important;
    gap: 18px !important;
    border-left: 2px dashed rgba(180, 67, 26, 0.3) !important;
  }
  .ip-journey-card {
    padding: 18px 16px !important;
    border-radius: 14px !important;
  }
  .ip-journey-card::before {
    left: -27px !important;
    top: 22px !important;
    width: 12px !important;
    height: 12px !important;
  }
}

/* 4. Announcement Filter Pills Native Touch Scroll on Mobile */
@media (max-width: 640px) {
  .announcement-filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
    margin-right: -16px !important;
    padding-right: 16px !important;
    scrollbar-width: none !important;
  }
  .announcement-filter-bar::-webkit-scrollbar {
    display: none !important;
  }
  .ann-filter-pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}

/* 6. Landing Footer Polish */
.landing-footer {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border-top: 1px solid var(--line);
}
.landing-footer a {
  color: var(--text-secondary);
}
.landing-footer a:hover {
  color: var(--color-accent-text);
}
.landing-footer .footer-desc {
  color: var(--text-muted);
}

/* =============== CHUNK 3: AUTH MODALS & OTP KEYPAD ENHANCEMENTS =============== */

/* 1. Password Visibility Toggle 40px Tap Target */
.password-toggle {
  position: absolute;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  z-index: 2;
}
.password-toggle:hover {
  color: var(--navy) !important;
  background: rgba(15, 23, 42, 0.07) !important;
}
.password-toggle:focus-visible {
  outline: 2px solid var(--info) !important;
  outline-offset: 1px !important;
}
.input-icon.password-field input {
  padding-right: 48px !important;
}

/* 2. Responsive OTP Input Boxes (375px Fluid Zero-Overflow) */
.otp-inputs {
  display: flex !important;
  justify-content: center !important;
  gap: clamp(5px, 2vw, 10px) !important;
  margin-bottom: 24px !important;
  width: 100% !important;
}

.otp-box {
  width: clamp(38px, 11vw, 50px) !important;
  height: clamp(48px, 13vw, 58px) !important;
  text-align: center !important;
  font-size: clamp(1.15rem, 3.5vw, 1.5rem) !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  border: 2px solid var(--gray-200) !important;
  border-radius: 10px !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: var(--gray-50) !important;
  font-family: inherit !important;
}

.otp-box:focus {
  border-color: var(--brand-action) !important;
  box-shadow: 0 0 0 3px rgba(255, 112, 67, 0.25) !important;
  background: #ffffff !important;
}

.otp-box.input-error {
  border-color: var(--danger) !important;
  background: var(--danger-light) !important;
}

/* 3. Single 6-digit Login OTP PIN Field */
#loginOtpCode {
  letter-spacing: 0.3em !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  font-family: 'Courier New', monospace !important;
}

/* 4. Resend OTP Links & Countdown Accessibility */
#signupOtpResendLink,
.resend-countdown-active {
  color: var(--color-accent-text) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
#signupOtpResendLink:hover {
  text-decoration: underline !important;
}

/* 5. Mobile Auth Card Padding & Spacing (375px) */
@media (max-width: 480px) {
  .auth-panel {
    padding: 20px 12px 28px !important;
  }
  .auth-split .login-card,
  body.standalone-login-mode .auth-split .login-card {
    padding: 28px 16px 32px !important;
    border-radius: 18px !important;
    max-width: 100% !important;
  }
  .auth-split .login-header {
    margin-bottom: 20px !important;
  }
  .auth-split .login-header h2 {
    font-size: 1.7rem !important;
  }
  .auth-split .login-header p {
    font-size: 0.88rem !important;
    max-width: 100% !important;
  }
  .auth-split .form-group {
    margin-bottom: 16px !important;
  }
  .auth-split .input-icon input {
    padding: 13px 12px 13px 42px !important;
    font-size: 0.92rem !important;
  }
  .auth-split .btn-primary,
  .auth-split .btn-outline-navy {
    padding: 14px 16px !important;
    font-size: 0.95rem !important;
  }
  .login-legal {
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
  }
}

/* =============== CHUNK 4: APPLICANT DASHBOARD LAYOUT & METRIC CARDS =============== */

/* 1. Welcome Header Banner */
.applicant-welcome-banner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #ffffff;
  border-radius: 18px;
  padding: 28px 32px;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px -5px rgba(139, 69, 19, 0.18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.applicant-welcome-banner::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 112, 67, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.applicant-welcome-info h1 {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}
.applicant-welcome-info p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 580px;
}
.applicant-welcome-metrics {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.applicant-chip-metric {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.2s ease;
}
.applicant-chip-metric.highlight {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.6);
  color: #fef3c7;
}
.applicant-chip-metric:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

/* 2. Portfolio Metric KPI Cards */
.applicant-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.applicant-kpi-card {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.applicant-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -4px rgba(139, 69, 19, 0.1);
  border-color: var(--line-strong);
}
.applicant-kpi-card.kpi-action-urgent {
  border-color: rgba(217, 119, 6, 0.45);
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
}
.applicant-kpi-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.applicant-kpi-num {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.applicant-kpi-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 3px;
}

/* 3. Secondary Action Card Styling */
.action-card.action-card-secondary {
  background: #ffffff !important;
  border: 1.5px solid var(--gray-200) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}
.action-card.action-card-secondary:hover {
  border-color: var(--navy) !important;
  background: #ffffff !important;
  box-shadow: 0 14px 28px -4px rgba(139, 69, 19, 0.12) !important;
  transform: translateY(-3px) !important;
}
.action-card.action-card-secondary .action-card-content h3 {
  color: var(--navy) !important;
}
.action-card.action-card-secondary .action-card-content p {
  color: var(--text-secondary) !important;
}
.action-card.action-card-secondary .action-card-arrow {
  color: var(--text-muted) !important;
}
.action-card.action-card-secondary:hover .action-card-arrow {
  color: var(--navy) !important;
  transform: translateX(4px) !important;
}

/* 4. Bulletin Item Feed Clean Polish */
.bulletin-item {
  border: 1.5px solid transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.bulletin-item:hover {
  border-color: rgba(226, 232, 240, 0.9) !important;
  background: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px -4px rgba(139, 69, 19, 0.08) !important;
}

/* 5. Mobile Dashboard Polish (375px) */
@media (max-width: 640px) {
  .applicant-welcome-banner {
    padding: 20px 16px !important;
    gap: 16px !important;
  }
  .applicant-welcome-info h1 {
    font-size: 1.3rem !important;
  }
  .applicant-welcome-metrics {
    gap: 6px !important;
    width: 100% !important;
  }
  .applicant-chip-metric {
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
  }
  .applicant-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .applicant-kpi-card {
    padding: 14px 12px !important;
    gap: 10px !important;
  }
  .applicant-kpi-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
  }
  .applicant-kpi-num {
    font-size: 1.35rem !important;
  }
  .applicant-kpi-label {
    font-size: 0.74rem !important;
  }
}
@media (max-width: 360px) {
  .applicant-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =============== CHUNK 5: FILING WIZARD, RESPONSIVE STEPPER & DROPZONE =============== */

/* 1. Filing Hub & Category Cards */
.filing-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
@media (min-width: 1280px) {
  .filing-hub-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}
.filing-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1.5px solid var(--gray-200);
  padding: 26px 20px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.filing-card:hover {
  transform: translateY(-5px);
  border-color: var(--brand-action);
  box-shadow: 0 16px 32px -6px rgba(139, 69, 19, 0.12);
}
.filing-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--gray-50);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 18px;
  transition: all 0.2s ease;
}
.filing-card:hover .filing-card-icon {
  background: var(--brand-tint);
  color: var(--color-accent-text);
}

/* 2. Responsive Wizard Stepper */
.wizard-container {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.wizard-progress {
  display: flex;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  padding: 0;
  margin: 0;
}

.wizard-step {
  flex: 1;
  padding: 16px 12px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wizard-step.active {
  color: var(--navy);
  background: #ffffff;
  border-bottom: 3px solid var(--brand-action);
}

.wizard-step.completed {
  color: var(--success);
  background: rgba(4, 120, 87, 0.03);
}

.wizard-step .step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wizard-step.active .step-num {
  background: var(--brand-action);
  color: var(--color-on-primary);
  box-shadow: 0 0 0 3px rgba(255, 112, 67, 0.2);
}

.wizard-step.completed .step-num {
  background: var(--success);
  color: #ffffff;
}

/* Mobile Stepper (375px Fluid Horizontal Rail) */
@media (max-width: 640px) {
  .wizard-progress {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .wizard-progress::-webkit-scrollbar {
    display: none !important;
  }
  .wizard-step {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    border-bottom: none !important;
  }
  .wizard-step.active {
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  }
  .wizard-step .step-num {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.72rem !important;
  }
  .wizard-step .step-text {
    font-size: 0.75rem !important;
  }
  .wizard-body {
    padding: 18px 14px !important;
  }
  .wizard-footer {
    padding: 14px 16px !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .wizard-footer > div {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }
  .wizard-footer .btn {
    flex: 1 !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
  }
}

/* 3. Document Dropzone & Upload Feedback */
.upload-area {
  border: 2px dashed var(--gray-300);
  border-radius: 14px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--gray-50);
}
.upload-area:hover,
.upload-area:focus-visible {
  border-color: var(--brand-action);
  background: var(--brand-tint);
  outline: none;
}
.upload-area i {
  font-size: 2.2rem;
  color: var(--color-accent-text);
  margin-bottom: 8px;
}
.upload-area h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.upload-area p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

/* Document requirement card & file list rows */
.doc-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  margin-top: 8px;
  gap: 12px;
}
.doc-file-row__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-file-row__meta {
  font-size: 0.74rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* =============== CHUNK 6: MY APPLICATIONS STATUS HUB & MOBILE CARD TRANSFORMATION =============== */

/* 1. Status Hub Container & Scrollable Tab Strip */
.status-hub-container {
  background: #ffffff !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  margin: 0 0 20px 0 !important;
  padding: 4px 8px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.status-hub-container::-webkit-scrollbar {
  display: none !important;
}
.status-hub-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  width: max-content !important;
  padding: 4px 2px !important;
}
.status-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: var(--muted, #475569) !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  position: relative !important;
  min-height: 42px !important;
}
.status-tab:hover {
  color: var(--navy) !important;
  background: rgba(139, 69, 19, 0.05) !important;
}
.status-tab.active {
  color: var(--navy) !important;
  background: rgba(139, 69, 19, 0.08) !important;
  font-weight: 800 !important;
}
.status-tab.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 12px !important;
  right: 12px !important;
  height: 3px !important;
  background: var(--gold-accessible, var(--color-warning)) !important;
  border-radius: 3px 3px 0 0 !important;
}
.tab-count {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  background: var(--gray-100, #f1f5f9) !important;
  color: var(--navy) !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  margin-left: 2px !important;
}
.status-tab.active .tab-count {
  background: var(--gold-light) !important;
  color: var(--color-accent-text) !important;
  font-weight: 800 !important;
}

/* 2. User Controls Bar (Search, Period, IP Type Filter) */
.user-controls-bar {
  background: #ffffff !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
}
.user-controls-bar input,
.user-controls-bar select {
  font-size: 0.875rem !important;
  color: var(--navy) !important;
  border: 1.5px solid var(--gray-200) !important;
  border-radius: 10px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.user-controls-bar input:focus,
.user-controls-bar select:focus {
  border-color: var(--navy) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.12) !important;
}

/* 3. Applicant Case Card & Desktop Styling */
.applicant-case-card {
  border: 1px solid var(--gray-200) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.applicant-case-card:hover {
  box-shadow: 0 6px 16px -2px rgba(15, 23, 42, 0.08) !important;
}
.applicant-case-ref-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  font-size: 0.8125rem !important;
  color: var(--muted, #475569) !important;
  margin-top: 4px !important;
}
.applicant-case-ref {
  font-family: var(--font-mono, ui-monospace, monospace) !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  letter-spacing: 0.02em !important;
}

/* 4. Empty State Polish */
.applicant-empty-state {
  animation: fadeIn 0.3s ease-out;
}
.applicant-empty-state h3 {
  letter-spacing: -0.01em;
}

/* 5. Mobile Card Transformation (Screens <= 768px down to 375px) */
@media (max-width: 768px) {
  .user-controls-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 14px 16px !important;
  }
  .user-controls-bar .user-controls-filters {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .user-controls-bar .search-box {
    max-width: 100% !important;
    width: 100% !important;
  }
  .user-controls-bar .user-controls-dates,
  .user-controls-bar .user-controls-types,
  .user-controls-bar select {
    width: 100% !important;
  }
  #customDateRange {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Transform table/card header to full stacked card format */
  .applicant-case-card .case-card-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 16px !important;
  }
  .applicant-case-card .case-card-header-main {
    width: 100% !important;
  }
  .applicant-case-card .case-card-header-actions {
    width: 100% !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--gray-100) !important;
  }
  .applicant-case-card .case-card-view-btn {
    flex: 1 1 auto !important;
    justify-content: center !important;
    height: 42px !important;
    font-size: 0.88rem !important;
  }
  .applicant-case-card .chevron-icon {
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--gray-100, #f1f5f9) !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  /* Stack expanded details cleanly */
  .applicant-case-card .case-detail-panel {
    padding: 16px !important;
  }
  .applicant-case-card .case-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .applicant-case-card .case-meta-sidebar {
    padding: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .applicant-case-ref-row .ref-separator {
    display: none !important;
  }
  .applicant-case-ref-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .applicant-case-card .case-type-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.85rem !important;
  }
  .applicant-case-card .case-card-header h3 {
    font-size: 0.95rem !important;
  }
}

/* =============== CHUNK 7: APPLICATION DETAIL DOSSIER & MODAL/TOAST SYSTEM =============== */

/* 1. Dossier Header Polish */
.submission-detail-header {
  background: #ffffff !important;
  border: 1px solid var(--gray-200) !important;
  border-left: 3px solid var(--navy) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
}
.submission-detail-header h1 {
  font-size: clamp(1.2rem, 3.2vw, 1.65rem) !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  line-height: 1.25 !important;
}
.submission-detail-meta {
  color: var(--muted, #475569) !important;
}

/* 2. Wayfinding Tracker Mobile Polish */
@media (max-width: 640px) {
  .case-wayfinding-tracker {
    padding: 14px 16px !important;
  }
  .wayfinding-step::after {
    display: none !important;
  }
  .wayfinding-steps {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
    gap: 12px 10px !important;
  }
  .wayfinding-step {
    /* Stay stacked inside the two-column cards; the <=560px row layout is
       for a full-width list and overflows a half-width card. */
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0 !important;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 8px !important;
    background: var(--gray-50, #f8fafc) !important;
    border-radius: 10px !important;
    border: 1px solid var(--gray-200) !important;
  }
  .wayfinding-dot {
    margin-bottom: 6px !important;
  }
}

/* 3. Document Attachment Rows & Panels */
.doc-card {
  border-radius: 12px !important;
  border: 1px solid var(--gray-200) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.2s ease !important;
}
.doc-card:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  border-color: var(--gray-300) !important;
}
.doc-card__type {
  color: var(--navy) !important;
  font-weight: 700 !important;
}
.doc-card__meta {
  color: var(--muted, #475569) !important;
}
.doc-card__action {
  min-height: 44px !important;
  min-width: 44px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

/* 4. Activity Timeline Hardening */
.timeline::before {
  background: var(--gray-300, #cbd5e1) !important;
  width: 2px !important;
}
.timeline-item .time {
  font-size: 0.78rem !important;
  color: var(--muted, #475569) !important;
  font-weight: 600 !important;
}
.timeline-item .event {
  font-size: 0.88rem !important;
  color: var(--navy) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* 5. Global Modal Overlay & Dialog Polish */
.modal-overlay {
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.modal-card {
  border-radius: 18px !important;
  border: 1px solid var(--gray-200) !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
}
.modal-header {
  border-bottom: 1px solid var(--gray-200) !important;
  padding: 18px 24px !important;
}
.modal-header h3 {
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
}
.modal-close {
  background: var(--gray-100, #f1f5f9) !important;
  color: var(--navy) !important;
  font-size: 0.95rem !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.modal-close:hover {
  background: var(--gray-200, #e2e8f0) !important;
  color: var(--navy-dark, #0f172a) !important;
}
.modal-close:focus-visible {
  outline: 2px solid var(--navy) !important;
  outline-offset: 2px !important;
}

/* 6. Global Toast Notification System */
.toast {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  background: var(--navy-dark, #0f172a) !important;
  color: #ffffff !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.35) !important;
  z-index: 9999 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.toast.toast-success {
  border-left: 4px solid var(--success, var(--color-success)) !important;
}
.toast.toast-success .toast-icon {
  color: var(--color-success-text) !important;
}
.toast.toast-error {
  border-left: 4px solid var(--color-error) !important;
}
.toast.toast-error .toast-icon {
  color: #f87171 !important;
}
.toast.toast-warning {
  border-left: 4px solid var(--color-warning) !important;
}
.toast.toast-warning .toast-icon {
  color: var(--color-warning-text) !important;
}
.toast.toast-info {
  border-left: 4px solid var(--color-info) !important;
}
.toast.toast-info .toast-icon {
  color: var(--color-info-text) !important;
}
.toast-message {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 1.4 !important;
}

@media (max-width: 640px) {
  .toast {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
  }
}

/* =====================================================================
   APPLICANT PORTAL — INSTITUTIONAL REDESIGN (dashboard + top bar)
   Everything below is scoped to body.role-applicant, so the Admin,
   Evaluator and Superadmin workspaces cannot inherit any of it. The one
   unscoped pair keeps the shared top-bar brand identical for staff.
   Palette: academic navy + Palawan gold, WCAG AA text on every surface.
   ===================================================================== */

/* Shared top-bar brand: the institution line exists in the markup for every
   role, but only the applicant top-nav shows it. display: contents leaves the
   staff brand laid out exactly as before the lockup wrapper was added. */
.topbar-brand .brand-lockup { display: contents; }
.topbar-brand .brand-kicker { display: none; }

body.role-applicant {
  --ax-navy: var(--navy-dark);
  --ax-navy-surface: var(--navy-dark);
  --ax-navy-soft: var(--navy-dark);
  --ax-slate: #1E293B;
  --ax-gold: var(--color-primary);
  --ax-gold-bright: #ee826f;
  --ax-gold-tint: rgba(198, 77, 58, 0.1);
  --ax-canvas: #F8FAFC;
  --ax-surface: #FFFFFF;
  --ax-line: #E2E8F0;
  --ax-line-strong: #CBD5E1;
  --ax-ink: #0F172A;
  --ax-muted: #475569;
  --ax-success: var(--color-success);
  --ax-success-tint: #ECFDF5;
  --ax-info: #1D4ED8;
  --ax-info-tint: #EFF6FF;
  --ax-danger: #B91C1C;
  --ax-danger-tint: #FEF2F2;
  --ax-radius-lg: 20px;
  --ax-radius: 16px;
  --ax-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -14px rgba(15, 23, 42, 0.12);
  --ax-focus: 0 0 0 3px rgba(245, 158, 11, 0.45);
}

/* ---------- A. Top navigation ---------- */
body.role-applicant .topbar-brand .brand-lockup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: 1.15;
}
body.role-applicant .topbar-brand .brand-kicker {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ax-muted);
  white-space: nowrap;
}
body.role-applicant .topbar-brand .brand-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ax-navy);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
body.role-applicant #dashboard-top-nav .top-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  color: #334155;
  font-weight: 600;
  transition: color 0.18s ease, background-color 0.18s ease;
}
body.role-applicant #dashboard-top-nav .top-nav-link:hover {
  color: var(--ax-navy);
  background: rgba(11, 25, 44, 0.04);
}
body.role-applicant #dashboard-top-nav .top-nav-link.active {
  color: var(--ax-navy);
  font-weight: 700;
  background: rgba(11, 25, 44, 0.05);
}
body.role-applicant #dashboard-top-nav .top-nav-link.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--ax-gold);
}
body.role-applicant #dashboard-top-nav .top-nav-link:focus-visible {
  outline: none;
  box-shadow: var(--ax-focus);
}

/* Applicant Top-Nav Dropdowns */
.top-nav-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.top-nav-dropdown-trigger {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.top-nav-dropdown-wrap:hover .top-nav-dropdown-trigger,
.top-nav-dropdown-wrap.open .top-nav-dropdown-trigger {
  color: var(--ax-navy, #0f172a);
  background: rgba(11, 25, 44, 0.04);
}

.top-nav-dropdown-wrap:hover .nav-chevron,
.top-nav-dropdown-wrap.open .nav-chevron {
  transform: rotate(180deg);
}

.top-nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 310px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 2px 10px rgba(15, 23, 42, 0.04);
  border: 1px solid var(--gray-200, #e2e8f0);
  padding: 8px;
  z-index: 1050;
  animation: topNavFadeIn 0.18s ease-out forwards;
}

.top-nav-dropdown-wrap:hover .top-nav-dropdown-menu,
.top-nav-dropdown-wrap.open .top-nav-dropdown-menu {
  display: block;
}

@keyframes topNavFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.top-nav-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--gray-700, #334155);
  transition: all 0.15s ease;
}

.top-nav-dropdown-item:hover {
  background: var(--gray-50, #f8fafc);
  color: var(--navy, #0b192c);
  transform: translateX(2px);
}

.top-nav-dropdown-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(11, 25, 44, 0.04);
  color: var(--color-accent-text, #c2410c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all 0.15s ease;
}

.top-nav-dropdown-item:hover .top-nav-dropdown-icon {
  background: var(--navy, #0b192c);
  color: #ffffff;
}

.top-nav-dropdown-text {
  display: flex;
  flex-direction: column;
}

.top-nav-dropdown-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--navy, #0b192c);
  line-height: 1.25;
}

.top-nav-dropdown-desc {
  font-size: 0.74rem;
  color: var(--gray-500, #64748b);
  margin-top: 2px;
  line-height: 1.35;
}

.top-nav-dropdown-footer {
  border-top: 1px solid var(--gray-100, #f1f5f9);
  margin-top: 6px;
  padding-top: 6px;
}

.top-nav-dropdown-footer a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent-text, #c2410c);
  text-decoration: none !important;
  transition: background 0.15s ease;
}

.top-nav-dropdown-footer a:hover {
  background: rgba(255, 112, 67, 0.08);
}

/* IP Services Cards Hover Effects */
.ip-service-card {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
}

.ip-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
  border-color: rgba(255, 112, 67, 0.4) !important;
}
body.role-applicant .notif-bell-wrap {
  width: 44px;
  height: 44px;
  background: rgba(11, 25, 44, 0.04);
  border: 1px solid var(--ax-line);
  color: var(--ax-navy);
}
body.role-applicant .notif-bell-wrap:hover,
body.role-applicant .notif-bell-wrap.active {
  background: rgba(11, 25, 44, 0.08);
  color: var(--ax-navy);
}
body.role-applicant .notif-bell-wrap .notif-badge {
  background: var(--ax-danger);
  color: #ffffff;
  box-shadow: 0 0 0 2px #ffffff;
}
body.role-applicant .topbar-user {
  position: relative;
}
body.role-applicant .topbar-user .user-avatar {
  box-shadow: 0 0 0 2px var(--ax-line);
}

/* ---------- Page frame ---------- */
body.role-applicant .applicant-home {
  max-width: 1360px;
  margin-inline: auto;
}

/* ---------- B. Welcome hero ---------- */
body.role-applicant .applicant-welcome-banner {
  background: radial-gradient(circle at top right, var(--ax-navy-soft) 0%, var(--ax-navy) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--ax-radius-lg);
  padding: 32px 36px;
  margin-bottom: 24px;
  box-shadow: 0 18px 40px -20px rgba(11, 25, 44, 0.6);
  isolation: isolate;
}
/* Guilloche-style engraving, the security-print motif of certificates. */
body.role-applicant .applicant-welcome-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  background:
    repeating-radial-gradient(circle at 88% 12%, #ffffff 0 1px, transparent 1px 14px),
    repeating-radial-gradient(circle at 70% 120%, #ffffff 0 1px, transparent 1px 18px);
}
body.role-applicant .applicant-welcome-banner::after {
  z-index: -1;
  width: 260px;
  height: 260px;
  right: -60px;
  top: -80px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.16) 0%, transparent 70%);
}
body.role-applicant .applicant-welcome-info h1 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-transform: none;
}
body.role-applicant .applicant-welcome-info {
  flex: 1 1 420px;
  min-width: 0;
}
body.role-applicant .applicant-welcome-info p {
  max-width: 70ch;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.01em;
  font-size: 0.92rem;
}
body.role-applicant .applicant-chip-metric {
  min-height: 40px;
  padding: 8px 16px;
  gap: 8px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.role-applicant .applicant-chip-metric strong {
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
body.role-applicant .applicant-chip-metric i {
  color: var(--color-accent-text);
}
body.role-applicant button.applicant-chip-metric {
  cursor: pointer;
}
body.role-applicant .applicant-chip-metric.chip-certified i {
  color: #6EE7B7;
}
body.role-applicant .applicant-chip-metric.highlight {
  background: rgba(185, 28, 28, 0.35);
  border-color: rgba(248, 113, 113, 0.55);
}
body.role-applicant .applicant-chip-metric.highlight i {
  color: #FCA5A5;
}
body.role-applicant .applicant-chip-metric:focus-visible {
  outline: 2px solid var(--ax-gold-bright);
  outline-offset: 2px;
}

/* ---------- C. Quick actions + D. status dock ---------- */
body.role-applicant .dashboard-top-grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
  gap: 24px;
  margin-bottom: 40px;
}
body.role-applicant .dashboard-top-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  min-height: 0;
}
body.role-applicant .dashboard-top-left .quick-actions-grid {
  flex: 0 0 auto;
  grid-template-columns: 1fr;
  gap: 16px;
}
body.role-applicant .action-card {
  max-width: none;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 18px;
}
body.role-applicant .action-card:focus-visible {
  outline: none;
  box-shadow: var(--ax-focus);
}
body.role-applicant .action-card-arrow {
  transition: transform 0.2s ease, color 0.2s ease;
}
body.role-applicant .action-card-primary,
body.role-applicant .action-card-primary:hover {
  background: var(--gradient-primary);
}
body.role-applicant .action-card-primary {
  border: 1px solid var(--color-primary-dark);
  box-shadow: 0 10px 25px -5px rgba(169, 61, 44, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body.role-applicant .action-card-primary:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary-dark);
  box-shadow: 0 18px 34px -10px rgba(169, 61, 44, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
body.role-applicant .action-card-primary .action-card-icon,
body.role-applicant .action-card-primary:hover .action-card-icon {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  box-shadow: 0 0 18px -4px rgba(255, 255, 255, 0.18);
}
body.role-applicant .action-card-primary .action-card-content h3 {
  color: #ffffff;
}
body.role-applicant .action-card-primary .action-card-content p {
  color: rgba(255, 255, 255, 0.8);
}
body.role-applicant .action-card-primary .action-card-arrow {
  color: #ffffff;
}
body.role-applicant .action-card-primary:hover .action-card-arrow {
  color: #ffffff;
  transform: translateX(4px);
}
body.role-applicant .action-card.action-card-secondary {
  background: var(--ax-surface) !important;
  border: 1px solid var(--ax-line) !important;
  box-shadow: var(--ax-shadow-card) !important;
}
body.role-applicant .action-card.action-card-secondary:hover {
  border-color: var(--ax-line-strong) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.06) !important;
}
body.role-applicant .action-card.action-card-secondary .action-card-icon {
  background: rgba(11, 25, 44, 0.05);
  color: var(--ax-navy);
}
body.role-applicant .action-card.action-card-secondary .action-card-content h3 {
  color: var(--ax-navy) !important;
}
body.role-applicant .action-card.action-card-secondary .action-card-content p {
  color: var(--ax-muted) !important;
}
body.role-applicant .action-card.action-card-secondary .action-card-arrow,
body.role-applicant .action-card.action-card-secondary:hover .action-card-arrow {
  color: var(--ax-navy) !important;
}
/* Every state of the dock fills the same column as the cards above it. */
body.role-applicant .dashboard-top-left .oa-allclear,
body.role-applicant .dashboard-top-left .oa-banner {
  max-width: none;
  margin: 0;
}
body.role-applicant .dashboard-top-left .oa-allclear {
  min-height: 64px;
  padding: 16px 20px;
  gap: 14px;
  border-radius: 14px;
}
/* Only the caught-up state turns green; "checking" and "error" share the
   class and keep their own colours. */
body.role-applicant .oa-allclear:not(.oa-checking):not(.oa-load-error) {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: var(--color-success-text);
}
body.role-applicant .oa-allclear:not(.oa-checking):not(.oa-load-error) > i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: 50%;
  background: #DCFCE7;
  color: var(--color-success-text);
  font-size: 0.95rem;
}
body.role-applicant .oa-allclear:not(.oa-checking):not(.oa-load-error) strong {
  color: var(--color-success-text);
}
body.role-applicant .oa-allclear:not(.oa-checking):not(.oa-load-error) p {
  color: var(--color-success-text);
}
body.role-applicant .dashboard-top-left .oa-banner {
  border-radius: var(--ax-radius);
}

/* ---------- Action Center Compact Card (Option 1) ---------- */
body.role-applicant .action-center-card {
  background: var(--ax-surface, #ffffff);
  border: 1px solid var(--ax-line, #e2e8f0);
  border-radius: var(--ax-radius-lg, 16px);
  padding: 16px 18px;
  box-shadow: var(--ax-shadow-card, 0 4px 12px rgba(15, 23, 42, 0.05));
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 0;
  min-height: 0;
  box-sizing: border-box;
}

body.role-applicant .action-center-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ax-line, #e2e8f0);
}

body.role-applicant .action-center-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.role-applicant .action-center-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #fef3c7;
  color: #b45309;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

body.role-applicant .action-center-card.has-urgent .action-center-icon {
  background: #fee2e2;
  color: #b91c1c;
}

body.role-applicant .action-center-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ax-navy, #0f172a);
  line-height: 1.2;
}

body.role-applicant .action-center-subtitle {
  margin: 2px 0 0;
  font-size: 0.76rem;
  color: var(--ax-slate, #64748b);
  line-height: 1.3;
}

body.role-applicant .action-center-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

body.role-applicant .action-center-card.has-urgent .action-center-count-badge {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

body.role-applicant .action-center-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

body.role-applicant .action-center-list::-webkit-scrollbar {
  width: 5px;
}
body.role-applicant .action-center-list::-webkit-scrollbar-track {
  background: transparent;
}
body.role-applicant .action-center-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

body.role-applicant .action-center-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  transition: all 0.15s ease-in-out;
}

body.role-applicant .action-center-row:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}

body.role-applicant .action-center-row--overdue,
body.role-applicant .action-center-row--today {
  border-left-color: #ef4444;
  background: #fff5f5;
}
body.role-applicant .action-center-row--overdue:hover,
body.role-applicant .action-center-row--today:hover {
  background: #fffafa;
}

body.role-applicant .action-center-row--soon {
  border-left-color: #f97316;
}

body.role-applicant .action-center-row--later {
  border-left-color: #3b82f6;
}

body.role-applicant .action-center-row--payment {
  border-left-color: #8b5cf6;
}

body.role-applicant .action-center-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.role-applicant .action-center-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.role-applicant .action-center-ref {
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ax-navy, #0f172a);
  background: rgba(15, 23, 42, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

body.role-applicant .action-center-casetitle {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ax-navy, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

body.role-applicant .action-center-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
}

body.role-applicant .action-center-pill--overdue,
body.role-applicant .action-center-pill--today {
  background: #fee2e2;
  color: #991b1b;
}

body.role-applicant .action-center-pill--soon {
  background: #ffedd5;
  color: #9a3412;
}

body.role-applicant .action-center-pill--later {
  background: #eff6ff;
  color: #1e40af;
}

body.role-applicant .action-center-pill--payment {
  background: #f3e8ff;
  color: #6b21a8;
}

body.role-applicant .action-center-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: #64748b;
  flex-wrap: wrap;
}

body.role-applicant .action-center-action-text {
  color: var(--ax-navy, #0f172a);
  font-weight: 500;
}

body.role-applicant .action-center-action-text i {
  color: #d97706;
  margin-right: 3px;
}

body.role-applicant .action-center-row--overdue .action-center-action-text i,
body.role-applicant .action-center-row--today .action-center-action-text i {
  color: #dc2626;
}

body.role-applicant .action-center-meta-sep {
  color: #cbd5e1;
}

body.role-applicant .action-center-progress-text {
  color: #64748b;
}

body.role-applicant .action-center-evaluator {
  color: #64748b;
}

body.role-applicant .action-center-amount {
  color: var(--ax-navy, #0f172a);
  font-weight: 700;
}

body.role-applicant .action-center-row-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

body.role-applicant .action-center-btn {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body.role-applicant .action-center-btn-sub {
  padding: 6px 9px;
  font-size: 0.76rem;
}

@media (max-width: 600px) {
  body.role-applicant .action-center-row {
    flex-direction: column;
    align-items: flex-start;
  }
  body.role-applicant .action-center-row-action {
    width: 100%;
    margin-top: 4px;
  }
  body.role-applicant .action-center-btn {
    width: 100%;
    justify-content: center;
  }
  body.role-applicant .action-center-casetitle {
    max-width: 100%;
  }
}


/* ---------- E. Announcements bulletin ---------- */
body.role-applicant .applicant-bulletin {
  background: var(--ax-surface);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius-lg);
  padding: 24px;
  box-shadow: var(--ax-shadow-card);
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
body.role-applicant .applicant-bulletin-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
body.role-applicant .applicant-bulletin-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ax-navy);
}
body.role-applicant .applicant-bulletin-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-accent-text);
  font-size: 0.95rem;
}
body.role-applicant .applicant-bulletin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--ax-line);
  background: var(--ax-surface);
  color: var(--ax-navy);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
body.role-applicant .applicant-bulletin-toggle:hover {
  background: var(--ax-canvas);
  border-color: var(--ax-line-strong);
}
body.role-applicant .applicant-bulletin-toggle i {
  font-size: 0.75rem;
  transition: transform 0.18s ease;
}
body.role-applicant .applicant-bulletin-toggle:hover i {
  transform: translateX(3px);
}
body.role-applicant .applicant-bulletin-toggle:focus-visible,
body.role-applicant .bulletin-item:focus-visible {
  outline: none;
  box-shadow: var(--ax-focus);
}
body.role-applicant .applicant-bulletin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
/* An odd last item takes the full row instead of leaving a hole. */
body.role-applicant .applicant-bulletin-grid > .bulletin-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
body.role-applicant .bulletin-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 18px;
  background: var(--ax-canvas);
  border: 1px solid var(--ax-line);
  border-radius: 14px;
  cursor: pointer;
}
body.role-applicant .bulletin-item:hover {
  border-color: var(--ax-line-strong) !important;
}
body.role-applicant .bulletin-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
body.role-applicant .bulletin-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ax-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.role-applicant .bulletin-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ax-navy);
  text-transform: none;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.role-applicant .bulletin-snippet {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ax-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.role-applicant .bulletin-empty {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.9rem;
  color: var(--ax-muted);
}
body.role-applicant .applicant-bulletin .ann-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
body.role-applicant .applicant-bulletin .ann-badge.general { background: #EFF6FF; color: var(--color-info-text); }
body.role-applicant .applicant-bulletin .ann-badge.maintenance { background: #FEF3C7; color: var(--color-warning-text); }
body.role-applicant .applicant-bulletin .ann-badge.system { background: #F5F3FF; color: var(--color-info-text); }
body.role-applicant .applicant-bulletin .ann-badge.guideline { background: #ECFDF5; color: var(--color-success-text); }
body.role-applicant .applicant-bulletin .ann-badge.reminder { background: #FFF7ED; color: var(--color-secondary-dark); }

/* ---------- F. Portfolio metrics ---------- */
body.role-applicant .applicant-metrics-head {
  margin: 0 0 16px;
}
body.role-applicant .applicant-metrics-head h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ax-navy);
}
body.role-applicant .applicant-metrics-count {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--ax-line);
  background: #F1F5F9;
  color: var(--ax-muted);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.role-applicant .applicant-metrics-head p {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: var(--ax-muted);
}
body.role-applicant .applicant-kpi-grid {
  /* 4 core cards plus up to 2 conditional ones share one row on desktop,
     rather than wrapping into a half-empty second row. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
body.role-applicant .applicant-kpi-card {
  --kpi-accent: #64748B;
  --kpi-tint: #F1F5F9;
  --kpi-ink: #334155;
  min-height: 88px;
  padding: 18px 18px 18px 20px;
  gap: 14px;
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  background: var(--ax-surface);
  box-shadow: var(--ax-shadow-card);
}
body.role-applicant .applicant-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--kpi-accent);
}
body.role-applicant .applicant-kpi-card.kpi-tone-amber { --kpi-accent: var(--color-warning); --kpi-tint: #FFFBEB; --kpi-ink: var(--color-warning); }
body.role-applicant .applicant-kpi-card.kpi-tone-blue { --kpi-accent: #1D4ED8; --kpi-tint: #EFF6FF; --kpi-ink: #1D4ED8; }
body.role-applicant .applicant-kpi-card.kpi-tone-emerald { --kpi-accent: var(--color-success); --kpi-tint: #ECFDF5; --kpi-ink: var(--color-success); }
body.role-applicant .applicant-kpi-card.kpi-tone-red { --kpi-accent: #B91C1C; --kpi-tint: #FEF2F2; --kpi-ink: #B91C1C; }
body.role-applicant .applicant-kpi-card.kpi-tone-violet { --kpi-accent: var(--color-info); --kpi-tint: #F5F3FF; --kpi-ink: var(--color-info); }
body.role-applicant .applicant-kpi-card .applicant-kpi-icon {
  background: var(--kpi-tint);
  color: var(--kpi-ink);
}
body.role-applicant .applicant-kpi-body {
  min-width: 0;
}
body.role-applicant .applicant-kpi-num {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ax-navy);
  font-variant-numeric: tabular-nums;
}
body.role-applicant .applicant-kpi-card.kpi-tone-red .applicant-kpi-num {
  color: var(--ax-danger);
}
body.role-applicant .applicant-kpi-label {
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ax-muted);
}
body.role-applicant .applicant-kpi-card:hover {
  border-color: var(--ax-line-strong);
  box-shadow: 0 12px 24px -8px rgba(11, 25, 44, 0.14);
}
/* Filter feedback: the card that was pressed or focused glows. */
body.role-applicant .applicant-kpi-card:focus-visible,
body.role-applicant .applicant-kpi-card:active {
  outline: none;
  border-color: var(--kpi-accent);
  box-shadow: 0 0 0 3px var(--kpi-tint), 0 0 0 4px var(--kpi-accent);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  body.role-applicant .dashboard-top-grid {
    grid-template-columns: 1fr;
  }
  body.role-applicant .dashboard-top-left {
    height: auto;
  }
  body.role-applicant .action-center-card {
    flex: none;
  }
  body.role-applicant .action-center-list {
    max-height: 280px;
  }
  body.role-applicant .applicant-bulletin {
    height: auto;
  }
  /* Two cards side by side on tablets; auto-fit still stacks them on phones.
     !important because a shared 768px rule forces every quick-actions grid
     to one column. */
  body.role-applicant .dashboard-top-left .quick-actions-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
  }
  body.role-applicant .applicant-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  body.role-applicant .topbar-brand .brand-lockup {
    display: none;
  }
}
@media (max-width: 640px) {
  body.role-applicant .applicant-welcome-banner {
    padding: 24px 20px !important;
    border-radius: 18px;
  }
  body.role-applicant .applicant-welcome-info h1 {
    font-size: 1.4rem !important;
  }
  body.role-applicant .applicant-chip-metric {
    min-height: 40px;
    padding: 8px 12px !important;
    font-size: 0.78rem !important;
  }
  body.role-applicant .action-card {
    padding: 18px;
    min-height: 48px;
  }
  body.role-applicant .applicant-bulletin {
    padding: 18px;
  }
  body.role-applicant .applicant-bulletin-grid {
    grid-template-columns: 1fr;
  }
  /* Badge widths vary by category, so a side-by-side date wrapped on some
     cards and not others; stacking keeps every card identical. */
  body.role-applicant .bulletin-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  body.role-applicant .applicant-kpi-grid {
    gap: 12px !important;
  }
  body.role-applicant .applicant-kpi-num {
    font-size: 1.45rem !important;
  }
}

/* =====================================================================
   INNOVATION MARKETPLACE — TECHNOLOGY SHOWCASE (applicant + public page)
   Scoped to .mp-showcase inside the two containers renderMarketplace()
   fills. The :is() prefix outranks the older #marketplacePublicContent
   rules without touching the landing page's featured-marketplace cards.
   ===================================================================== */
:is(#main-content, #marketplacePublicContent) .mp-showcase {
  --mp-navy: #9A3412;
  --mp-navy-surface: #C2410C;
  --mp-navy-soft: #EA580C;
  --mp-gold: #F59E0B;
  --mp-gold-bright: #D97706;
  --mp-canvas: #F8FAFC;
  --mp-surface: #FFFFFF;
  --mp-line: #E2E8F0;
  --mp-line-strong: #CBD5E1;
  --mp-ink: #0F172A;
  --mp-muted: #475569;
  --mp-focus: 0 0 0 3px rgba(245, 158, 11, 0.45);
  max-width: 1360px;
  margin-inline: auto;
}

/* ---------- A. Showcase hero ---------- */
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  padding: 32px 36px;
  margin-bottom: 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background:
    radial-gradient(ellipse at 85% 20%, rgba(245, 158, 11, 0.35) 0%, transparent 60%),
    linear-gradient(135deg, #FFAA8B 0%, #FF7F50 45%, #E05A2B 100%);
  box-shadow: 0 18px 40px -20px rgba(224, 90, 43, 0.45);
  color: #ffffff;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.08;
  background:
    repeating-radial-gradient(circle at 88% 12%, #ffffff 0 1px, transparent 1px 14px),
    repeating-radial-gradient(circle at 70% 120%, #ffffff 0 1px, transparent 1px 18px);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-hero-copy {
  flex: 1 1 460px;
  min-width: 0;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-hero-sub {
  margin: 0;
  max-width: 68ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-hero-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-stat {
  display: flex;
  flex-direction: column;
  min-width: 128px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(192, 86, 33, 0.18);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-stat strong {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: #FEF3C7;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  font-variant-numeric: tabular-nums;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-stat span {
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

/* ---------- B. Search, filters, sectors ---------- */
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-search {
  position: relative;
  flex: 1 1 360px;
  min-width: 0;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-search > i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mp-muted);
  pointer-events: none;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-search input {
  width: 100%;
  height: 48px;
  padding: 0 48px 0 44px;
  border: 1px solid var(--mp-line-strong);
  border-radius: 12px;
  background: var(--mp-surface);
  color: var(--mp-ink);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-search input:focus {
  outline: none;
  border-color: var(--mp-navy);
  box-shadow: 0 0 0 3px rgba(11, 25, 44, 0.12);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mp-muted);
  cursor: pointer;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-search-clear:hover {
  background: #F1F5F9;
  color: var(--mp-navy);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-select {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 1 190px;
  min-width: 150px;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-select span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--mp-muted);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-select select {
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--mp-line-strong);
  border-radius: 12px;
  background: var(--mp-surface);
  color: var(--mp-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-select select:focus-visible {
  outline: none;
  border-color: var(--mp-navy);
  box-shadow: 0 0 0 3px rgba(11, 25, 44, 0.12);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-saved-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--mp-line-strong);
  border-radius: 12px;
  background: var(--mp-surface);
  color: var(--mp-navy);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-saved-toggle.active {
  background: var(--mp-navy);
  border-color: var(--mp-navy);
  color: #ffffff;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-chips {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-chip {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--mp-line-strong);
  border-radius: 999px;
  background: var(--mp-surface);
  color: var(--mp-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-chip:hover {
  border-color: var(--mp-navy);
  color: var(--mp-navy);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-chip.active {
  background: linear-gradient(135deg, #FF7F50 0%, #F59E0B 100%);
  border-color: #F59E0B;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(224, 90, 43, 0.28);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase :is(.mp-chip, .mp-saved-toggle, .mp-search-clear, .mp-brief-btn, .mp-bookmark):focus-visible {
  outline: none;
  box-shadow: var(--mp-focus);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-result-count {
  margin: 0 0 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mp-muted);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-result-count:empty {
  display: none;
}

/* ---------- C. Showcase grid + cards ---------- */
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--mp-line);
  border-radius: 18px;
  background: var(--mp-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -14px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card:not(.mp-card--skeleton):hover {
  transform: translateY(-3px);
  border-color: var(--mp-line-strong);
  box-shadow: 0 12px 24px -4px rgba(11, 25, 44, 0.08);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: #F1F5F9;
  border-bottom: 1px solid var(--mp-line);
  overflow: hidden;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-media--plain {
  /* No listing image: a slim identity band, not a 16:9 slab of empty navy. */
  aspect-ratio: auto;
  height: 96px;
  background:
    repeating-radial-gradient(circle at 90% 0%, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 12px),
    linear-gradient(135deg, var(--mp-navy-surface) 0%, var(--mp-navy) 100%);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-media--plain i {
  font-size: 2rem;
  color: var(--color-accent-text);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 20px;
  min-width: 0;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-badges,
.mp-dossier .mp-dossier-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-availability,
.mp-dossier .mp-availability {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #A7F3D0;
  background: #ECFDF5;
  color: var(--color-success-text);
  font-size: 0.72rem;
  font-weight: 700;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--mp-navy);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-code {
  margin: -4px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--mp-muted);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-snippet {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--mp-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-people {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--mp-line);
  min-width: 0;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(11, 25, 44, 0.06);
  color: var(--mp-navy);
  font-size: 0.75rem;
  font-weight: 800;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-inventor {
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mp-ink);
  overflow-wrap: anywhere;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-sector {
  margin-left: auto;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 6px;
  background: #F1F5F9;
  color: var(--mp-muted);
  font-size: 0.72rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-actions {
  display: flex;
  gap: 8px;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-brief-btn {
  flex: 1;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--mp-navy);
  border-radius: 12px;
  background: var(--mp-surface);
  color: var(--mp-navy);
  font-weight: 700;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card:hover .mp-brief-btn,
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-brief-btn:hover {
  background: var(--mp-navy);
  color: #ffffff;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-bookmark {
  flex: 0 0 44px;
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--mp-line-strong);
  border-radius: 12px;
  background: var(--mp-surface);
  color: var(--mp-navy);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-bookmark.saved {
  border-color: var(--mp-gold);
  background: rgba(245, 158, 11, 0.08);
  color: var(--color-accent-text);
}

/* Skeletons: shown only while the listings request is in flight. */
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card--skeleton {
  cursor: default;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-skel {
  border-radius: 8px;
  background: linear-gradient(90deg, #EEF2F6 25%, #F8FAFC 50%, #EEF2F6 75%);
  background-size: 200% 100%;
  animation: mpShimmer 1.3s ease-in-out infinite;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-skel--media { aspect-ratio: 16 / 9; border-radius: 0; }
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-skel--title { height: 22px; width: 85%; }
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-skel--line { height: 12px; }
@keyframes mpShimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#main-content, #marketplacePublicContent) .mp-showcase .mp-skel { animation: none; }
  :is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card { transition: none; }
}

/* ---------- E. Empty / error ---------- */
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 20px;
  text-align: center;
  border: 1px dashed var(--mp-line-strong);
  border-radius: 18px;
  background: var(--mp-surface);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-empty-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: rgba(11, 25, 44, 0.06);
  color: var(--mp-navy);
  font-size: 1.5rem;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-empty-icon--error {
  background: #FEF2F2;
  color: var(--color-error-text);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-empty h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--mp-navy);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-empty p {
  margin: 0 0 8px;
  max-width: 440px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--mp-muted);
}

/* ---------- D. Technology brief (dossier) ---------- */
.modal-card.marketplace-detail-modal:has(.mp-dossier) {
  width: min(880px, calc(100vw - 32px));
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}
/* The dossier carries its own title, so the modal header only holds the close
   button: keep it slim and put the button where people look for it. */
.modal-card.marketplace-detail-modal:has(.mp-dossier) .modal-header {
  justify-content: flex-end;
  padding: 12px 16px 0;
  border-bottom: 0;
}
.modal-overlay.marketplace-detail-overlay:has(.mp-dossier) {
  background: rgba(15, 23, 42, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mp-dossier {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 32px 24px;
  color: #0F172A;
}
.mp-dossier .mp-dossier-eyebrow {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-warning-text);
}
.mp-dossier .mp-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
}
.mp-dossier .mp-dossier-title {
  margin: 0 0 12px;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-secondary-dark);
  overflow-wrap: anywhere;
}
.mp-dossier .mp-dossier-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.mp-dossier .mp-dossier-section + .mp-dossier-section {
  margin-top: 18px;
}
.mp-dossier .mp-dossier-section h3 {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #475569;
}
.mp-dossier .mp-dossier-section p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #334155;
  overflow-wrap: anywhere;
}
.mp-dossier .mp-dossier-visual {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 240px;
  margin-bottom: 14px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.mp-dossier .mp-dossier-facts {
  margin: 0;
  padding: 16px;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  background: #F8FAFC;
}
.mp-dossier .mp-dossier-facts > div + div {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #E2E8F0;
}
.mp-dossier .mp-dossier-facts dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
}
.mp-dossier .mp-dossier-facts dd {
  margin: 2px 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #0F172A;
  overflow-wrap: anywhere;
}
.mp-dossier .mp-dossier-actions {
  padding-top: 18px;
  border-top: 1px solid #E2E8F0;
}
.mp-dossier .mp-dossier-actions > p {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: #475569;
}
.mp-dossier .mp-dossier-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mp-dossier .mp-dossier-buttons .btn {
  min-height: 44px;
  justify-content: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :is(#main-content, #marketplacePublicContent) .mp-showcase .mp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (max-width: 760px) {
  .mp-dossier .mp-dossier-grid {
    grid-template-columns: 1fr;
  }
  .mp-dossier .mp-dossier-side {
    order: -1;
  }
}
@media (max-width: 640px) {
  :is(#main-content, #marketplacePublicContent) .mp-showcase .mp-hero {
    padding: 24px 20px;
    border-radius: 18px;
  }
  :is(#main-content, #marketplacePublicContent) .mp-showcase .mp-hero-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  :is(#main-content, #marketplacePublicContent) .mp-showcase .mp-stat {
    min-width: 0;
    padding: 10px 12px;
  }
  :is(#main-content, #marketplacePublicContent) .mp-showcase .mp-stat strong {
    font-size: 1.25rem;
  }
  :is(#main-content, #marketplacePublicContent) .mp-showcase .mp-search {
    flex-basis: 100%;
  }
  :is(#main-content, #marketplacePublicContent) .mp-showcase .mp-select {
    flex: 1 1 140px;
  }
  :is(#main-content, #marketplacePublicContent) .mp-showcase .mp-chips {
    flex-wrap: nowrap;
    margin-inline: -4px;
    padding-inline: 4px;
  }
  :is(#main-content, #marketplacePublicContent) .mp-showcase .mp-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .mp-dossier {
    padding: 22px 18px 18px;
  }
  /* A true bottom sheet: the older marketplace overlay rule pads it 10px off
     every edge at this width. */
  .modal-overlay.marketplace-detail-overlay:has(.mp-dossier) {
    padding: 0;
  }
  .modal-card.marketplace-detail-modal:has(.mp-dossier) {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    /* !important only to override the global .modal-card radius, which is
       itself !important and would round the corners touching the screen edge. */
    border-radius: 20px 20px 0 0 !important;
  }
  .mp-dossier .mp-dossier-buttons .btn {
    flex: 1 1 100%;
  }
}

/* =====================================================================
   IPOPHL IP DEPOT TECHNOLOGY SHOWCASE — DOSSIER DETAIL LAYOUT
   Editorial presentation matching IPOPHL IP Depot showcase standards.
   ===================================================================== */
.modal-card.marketplace-detail-modal:has(.ipdepot-dossier) {
  width: min(1040px, calc(100vw - 32px));
  max-width: 1040px;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  background: #ffffff;
}
.modal-card.marketplace-detail-modal:has(.ipdepot-dossier) .modal-header {
  justify-content: flex-end;
  padding: 12px 18px 0;
  border-bottom: 0;
  background: transparent;
}
.modal-overlay.marketplace-detail-overlay:has(.ipdepot-dossier) {
  background: rgba(15, 23, 42, 0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ipdepot-dossier {
  display: flex;
  flex-direction: column;
  padding: 4px 28px 28px;
  color: #0f172a;
}
.ipdepot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(270px, 1fr);
  gap: 36px;
  align-items: start;
}

/* Left column: Editorial Content */
.ipdepot-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ipdepot-primary-title {
  margin: 0 0 14px 0;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  color: #d9531e;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.ipdepot-subtitle {
  margin: 0 0 24px 0;
  font-size: 0.98rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ipdepot-type-label {
  color: #8b794e;
  font-weight: 600;
  margin-right: 6px;
}
.ipdepot-title-text {
  font-weight: 700;
  color: #0f172a;
}
.ipdepot-section {
  margin-bottom: 24px;
}
.ipdepot-section-title {
  margin: 0 0 10px 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: #d9531e;
  line-height: 1.35;
}
.ipdepot-section-content {
  font-size: 0.935rem;
  line-height: 1.7;
  color: #27272a;
  overflow-wrap: anywhere;
}
.ipdepot-section-content p {
  margin: 0 0 14px 0;
}
.ipdepot-section-content p:last-child {
  margin-bottom: 0;
}
.ipdepot-contact-note {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.6;
  color: #475569;
}
.ipdepot-contact-note a {
  color: #0284c7;
  text-decoration: underline;
}

/* Right column: Media and Inquiry Sidebar */
.ipdepot-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ipdepot-media-box {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  max-height: 380px;
}
.ipdepot-media-img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: contain;
  display: block;
}
.ipdepot-caption {
  margin: 10px 0 16px 0;
  font-size: 0.88rem;
  color: #475569;
  font-weight: 500;
}
.ipdepot-divider {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin: 4px 0 18px 0;
}
.ipdepot-inquiry-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.ipdepot-inquiry-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}
.ipdepot-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.btn-ipdepot-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 26px;
  border: 1.5px solid #d9531e;
  border-radius: 4px;
  background: #ffffff;
  color: #d9531e;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  width: fit-content;
}
.btn-ipdepot-contact:hover {
  background: #d9531e;
  color: #ffffff;
}
.btn-save-ip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #cbd5e1;
  color: #475569;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  width: fit-content;
}
.btn-save-ip:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}
.btn-save-ip.saved {
  border-color: #0284c7;
  color: #0284c7;
  background: #f0f9ff;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .ipdepot-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ipdepot-sidebar {
    order: 2;
  }
  .ipdepot-media-box {
    max-height: 320px;
  }
}
@media (max-width: 640px) {
  .ipdepot-dossier {
    padding: 16px 14px 20px;
  }
  .modal-overlay.marketplace-detail-overlay:has(.ipdepot-dossier) {
    padding: 0;
  }
  .modal-card.marketplace-detail-modal:has(.ipdepot-dossier) {
    width: 100%;
    max-width: 100%;
    max-height: 94dvh;
    border-radius: 20px 20px 0 0 !important;
  }
  .btn-ipdepot-contact,
  .btn-save-ip {
    width: 100%;
  }
}

/* =====================================================================
   NEWS & ANNOUNCEMENTS — ACADEMIC GAZETTE (landing section + reader)
   Scoped to #announcements-landing-section and .gz-reader. The section
   gets its own ground: the landing page's warm gradient ended partway
   down it, leaving a visible seam.
   ===================================================================== */
#announcements-landing-section {
  --gz-navy: var(--navy-dark);
  --gz-navy-soft: var(--navy-dark);
  --gz-line: #E2E8F0;
  --gz-line-strong: #CBD5E1;
  --gz-muted: #475569;
  --gz-focus: 0 0 0 3px rgba(245, 158, 11, 0.45);
  background: #F8FAFC;
  border-top: 1px solid var(--gz-line);
}
#announcements-landing-section > .container {
  max-width: 1320px;
}
#announcements-landing-section .section-header-inline {
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
#announcements-landing-section .section-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gz-navy);
}
#announcements-landing-section .section-subtitle {
  max-width: 680px;
  margin-top: 8px;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--gz-muted);
}
#announcements-landing-section .gz-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: var(--color-success-text);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#announcements-landing-section .gz-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

/* ---------- Category rail ---------- */
#announcements-landing-section .announcement-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 24px 0;
}
#announcements-landing-section .ann-filter-pill {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 9999px;
  border: 1px solid var(--gz-line);
  background: #FFFFFF;
  color: var(--gz-muted);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
#announcements-landing-section .ann-filter-pill:hover {
  border-color: var(--gz-line-strong);
  color: var(--gz-navy);
  transform: translateY(-1px);
}
#announcements-landing-section .ann-filter-pill.active {
  background: var(--gz-navy);
  border-color: var(--gz-navy);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(11, 25, 44, 0.15);
}
#announcements-landing-section .ann-filter-pill:focus-visible,
#announcements-landing-section .gz-read:focus-visible {
  outline: none;
  box-shadow: var(--gz-focus);
}

/* ---------- Grid + cards: identical structure with or without an image ---------- */
#announcements-landing-section .announcement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
#announcements-landing-section .gz-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--gz-line);
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  animation: fadeInUp 0.5s ease both;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* The card also keeps its legacy .announcement-card hook, whose hover is forced
   with !important (a rust border), so these must be too. */
#announcements-landing-section .gz-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--gz-line-strong) !important;
  box-shadow: 0 16px 32px -4px rgba(11, 25, 44, 0.08) !important;
}
#announcements-landing-section .gz-media {
  position: relative;
  flex: 0 0 auto;
  height: 200px;
  overflow: hidden;
  background: #F1F5F9;
}
#announcements-landing-section .gz-media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* the reader shows the whole image, uncropped */
  object-position: center;
  transition: transform 0.35s ease;
}
#announcements-landing-section .gz-card:hover .gz-media img {
  transform: scale(1.04);
}
/* No image: an editorial banner of the same height, so every card in a row
   lines up regardless of which notices carry artwork. */
#announcements-landing-section .gz-media--plain {
  display: grid;
  place-items: center;
  background:
    repeating-radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px),
    linear-gradient(135deg, var(--gz-navy) 0%, var(--gz-navy-soft) 100%);
}
#announcements-landing-section .gz-media--plain i {
  font-size: 3.25rem;
  color: var(--color-warning-text);
  opacity: 0.35;
}
#announcements-landing-section .gz-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 18px 20px 16px;
}
#announcements-landing-section .gz-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#announcements-landing-section .gz-meta .ann-badge,
.gz-reader .gz-reader-meta .ann-badge {
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
#announcements-landing-section .ann-badge.general,
.gz-reader .ann-badge.general { background: #EFF6FF; color: var(--color-info-text); }
#announcements-landing-section .ann-badge.maintenance,
.gz-reader .ann-badge.maintenance { background: #FEF3C7; color: var(--color-warning-text); }
#announcements-landing-section .ann-badge.system,
.gz-reader .ann-badge.system { background: #ECFDF5; color: var(--color-success-text); }
#announcements-landing-section .ann-badge.guideline,
.gz-reader .ann-badge.guideline { background: #EEF2FF; color: var(--color-info-text); }
#announcements-landing-section .ann-badge.reminder,
.gz-reader .ann-badge.reminder { background: #FFF7ED; color: var(--color-secondary-dark); }
#announcements-landing-section .gz-date,
.gz-reader .gz-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748B;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#announcements-landing-section .gz-title {
  margin: 10px 0;
  /* Reserve both clamped lines so a one-line title does not make its row
     shorter than the next one: every card in the grid is the same height. */
  min-height: 2.7em;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--gz-navy);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#announcements-landing-section .gz-excerpt {
  margin: 0;
  min-height: 4.65em; /* three clamped lines */
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--gz-muted);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#announcements-landing-section .gz-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 14px 20px;
  border-top: 1px solid #F1F5F9;
}
#announcements-landing-section .gz-unit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748B;
}
#announcements-landing-section .gz-unit i {
  color: var(--color-warning-text);
}
#announcements-landing-section .gz-read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 12px;
  margin-right: -12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--gz-navy);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
#announcements-landing-section .gz-read i {
  transition: transform 0.2s ease;
}
#announcements-landing-section .gz-card:hover .gz-read i,
#announcements-landing-section .gz-read:hover i {
  transform: translateX(4px);
}
#announcements-landing-section .gz-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 16px;
  border: 1px dashed var(--gz-line-strong);
  border-radius: 16px;
  background: #FFFFFF;
  text-align: center;
}
#announcements-landing-section .gz-empty p {
  margin: 0;
  color: var(--gz-muted);
}
#announcements-landing-section .gz-empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(11, 25, 44, 0.06);
  color: var(--gz-navy);
  font-size: 1.4rem;
}

/* ---------- Reader (announcement modal, viewer mode) ---------- */
#modalOverlay .modal-card:has(.gz-reader) {
  max-width: 760px;
  width: min(760px, calc(100vw - 32px));
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}
.gz-reader {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gz-reader .gz-reader-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.gz-reader .gz-reader-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-secondary-dark);
  overflow-wrap: anywhere;
}
.gz-reader .gz-reader-figure {
  margin: 0;
  padding: 12px;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  background: #F8FAFC;
}
.gz-reader .gz-reader-figure img {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  margin: 0 auto;
  object-fit: contain; /* posters and notices keep every line of their text */
  border-radius: 10px;
}
.gz-reader .gz-reader-text {
  max-width: 65ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #334155;
  overflow-wrap: anywhere;
}
.gz-reader .gz-reader-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid #E2E8F0;
}
.gz-reader .gz-reader-actions-end {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.gz-reader .gz-reader-actions .btn {
  min-height: 44px;
  justify-content: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  #announcements-landing-section .announcement-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (max-width: 768px) {
  #announcements-landing-section .announcement-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -16px;
    padding: 2px 16px 6px;
  }
  #announcements-landing-section .announcement-filter-bar::-webkit-scrollbar {
    display: none;
  }
  #announcements-landing-section .ann-filter-pill {
    flex: 0 0 auto;
  }
}
@media (max-width: 640px) {
  #announcements-landing-section .section-header-inline {
    flex-direction: column;
    align-items: flex-start;
  }
  #announcements-landing-section .section-title {
    font-size: 1.75rem;
  }
  #announcements-landing-section .announcement-grid {
    grid-template-columns: 1fr;
  }
  #announcements-landing-section .gz-media {
    height: 170px;
  }
  .gz-reader .gz-reader-actions,
  .gz-reader .gz-reader-actions-end {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  #announcements-landing-section .gz-card,
  #announcements-landing-section .gz-media img {
    animation: none;
    transition: none;
  }
}

/* =====================================================================
   KNOWLEDGE SUITE — FAQ, IP GUIDELINES, FORMS REPOSITORY
   Scoped to .kb-faq / .kb-guidelines / .kb-forms, the wrappers their
   renderers emit on both the public pages and inside the portal.
   ===================================================================== */
:is(.kb-faq, .kb-guidelines, .kb-forms) {
  --kb-navy: var(--navy-dark);
  --kb-navy-soft: var(--navy-dark);
  --kb-surface: #FFFFFF;
  --kb-canvas: #F8FAFC;
  --kb-line: #E2E8F0;
  --kb-line-strong: #CBD5E1;
  --kb-ink: #0F172A;
  --kb-muted: #475569;
  --kb-gold: var(--color-warning);
  --kb-focus: 0 0 0 3px rgba(245, 158, 11, 0.45);
  margin-inline: auto;
  padding-bottom: 56px;
  color: var(--kb-ink);
}
.kb-faq { max-width: 880px; }
.kb-guidelines { max-width: 1120px; }
.kb-forms { max-width: 1320px; }

/* ---------- Shared: eyebrow, page head, chips ---------- */
:is(.kb-faq, .kb-guidelines, .kb-forms) .kb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-primary-light);
}
:is(.kb-faq, .kb-guidelines, .kb-forms) .kb-eyebrow--light {
  color: var(--color-accent-text);
}
:is(.kb-guidelines, .kb-forms) .kb-page-head {
  margin-bottom: 24px;
}
:is(.kb-guidelines, .kb-forms) .kb-page-head h1 {
  margin: 0 0 8px;
  font-size: clamp(1.9rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--kb-navy);
}
:is(.kb-guidelines, .kb-forms) .kb-page-head p:not(.kb-eyebrow) {
  margin: 0;
  max-width: 680px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--kb-muted);
}
.kb-forms .kb-page-head--center {
  text-align: center;
}
.kb-forms .kb-page-head--center p:not(.kb-eyebrow) {
  margin-inline: auto;
}
:is(.kb-faq, .kb-guidelines, .kb-forms) .kb-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}
.kb-forms .kb-chips--center {
  justify-content: center;
}
:is(.kb-faq, .kb-guidelines, .kb-forms) .kb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--kb-line);
  border-radius: 9999px;
  background: var(--kb-surface);
  color: var(--kb-muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
:is(.kb-faq, .kb-guidelines, .kb-forms) .kb-chip:hover {
  border-color: var(--kb-line-strong);
  color: var(--kb-navy);
  transform: translateY(-1px);
}
:is(.kb-faq, .kb-guidelines, .kb-forms) .kb-chip span {
  padding: 1px 8px;
  border-radius: 9999px;
  background: #F1F5F9;
  color: var(--kb-muted);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
:is(.kb-faq, .kb-guidelines, .kb-forms) .kb-chip.active {
  background: var(--kb-navy);
  border-color: var(--color-warning);
  color: #FFFFFF;
  font-weight: 700;
}
:is(.kb-faq, .kb-guidelines, .kb-forms) .kb-chip.active span {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}
:is(.kb-faq, .kb-guidelines, .kb-forms) :is(.kb-chip, .kb-search-clear, .kb-doc-preview, .kb-doc-download, .faq-q):focus-visible {
  outline: none;
  box-shadow: var(--kb-focus);
}
/* Discipline accents for icons (non-text), shared by FAQ groups and forms. */
:is(.kb-faq, .kb-forms) .kb-accent-patent { --kb-accent: #3B82F6; --kb-tint: #EFF6FF; --kb-accent-ink: #1D4ED8; }
:is(.kb-faq, .kb-forms) .kb-accent-trademark { --kb-accent: var(--color-warning); --kb-tint: #FEF3C7; --kb-accent-ink: var(--color-warning); }
:is(.kb-faq, .kb-forms) .kb-accent-utility { --kb-accent: var(--color-info); --kb-tint: #EEF2FF; --kb-accent-ink: var(--color-info); }
:is(.kb-faq, .kb-forms) .kb-accent-industrial { --kb-accent: #EC4899; --kb-tint: #FDF2F8; --kb-accent-ink: #BE185D; }
:is(.kb-faq, .kb-forms) .kb-accent-copyright { --kb-accent: var(--color-success); --kb-tint: #ECFDF5; --kb-accent-ink: var(--color-success); }

/* ---------- A. FAQ ---------- */
.kb-faq .kb-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 24px;
  padding: 40px 32px 36px;
  border-radius: 20px;
  text-align: center;
  background: radial-gradient(circle at top right, var(--kb-navy-soft) 0%, var(--kb-navy) 100%);
  box-shadow: 0 18px 40px -20px rgba(11, 25, 44, 0.6);
}
.kb-faq .kb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.04;
  background: repeating-radial-gradient(circle at 85% 10%, #FFFFFF 0 1px, transparent 1px 14px);
}
.kb-faq .kb-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.kb-faq .kb-hero-sub {
  margin: 0 auto 24px;
  max-width: 620px;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
.kb-faq .kb-search {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}
.kb-faq .kb-search > i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.05rem;
  color: var(--kb-muted);
  pointer-events: none;
}
.kb-faq .kb-search input {
  width: 100%;
  height: 56px;
  padding: 0 56px 0 52px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--kb-surface);
  color: var(--kb-ink);
  font: inherit;
  font-size: 1rem;
  box-shadow: 0 16px 32px rgba(11, 25, 44, 0.2);
}
.kb-faq .kb-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.kb-faq .kb-search input:focus {
  outline: none;
  border-color: var(--color-warning);
  box-shadow: 0 16px 32px rgba(11, 25, 44, 0.2), 0 0 0 3px rgba(245, 158, 11, 0.25);
}
.kb-faq .kb-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--kb-muted);
  cursor: pointer;
}
.kb-faq .kb-result-count {
  margin: -8px 0 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kb-muted);
}
.kb-faq .kb-faq-group + .kb-faq-group {
  margin-top: 28px;
}
.kb-faq .kb-faq-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--kb-navy);
}
.kb-faq .kb-faq-group-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--kb-tint);
  color: var(--kb-accent-ink);
  font-size: 1rem;
}
.kb-faq .kb-faq-item {
  margin: 0 0 12px;
  border: 1px solid var(--kb-line);
  border-radius: 14px;
  background: var(--kb-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kb-faq .kb-faq-item:hover {
  border-color: var(--kb-line-strong);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.kb-faq .kb-faq-item.open {
  border-color: rgba(180, 83, 9, 0.35);
  box-shadow: 0 8px 20px -10px rgba(11, 25, 44, 0.18);
}
.kb-faq .kb-faq-item .faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 18px 22px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--kb-navy);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.kb-faq .kb-chev {
  display: inline-grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F1F5F9;
  color: var(--kb-navy);
  font-size: 0.8rem;
}
.kb-faq .kb-chev i {
  transition: transform 0.25s ease;
}
.kb-faq .kb-faq-item.open .kb-chev {
  background: var(--kb-navy);
  color: #FFFFFF;
}
.kb-faq .kb-faq-item .faq-a {
  padding: 0 22px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--kb-muted);
}
.kb-faq .kb-faq-item.open .faq-a {
  padding-bottom: 20px;
}
.kb-faq .kb-faq-item .faq-a :is(strong, b) {
  color: var(--kb-ink);
}
/* The older rule rotates every icon inside an open question, which also spun
   the IP-type icon beside each guideline title; only the chevron turns. */
.kb-faq .help-guideline-toggle > span:first-child i {
  transform: none;
}
.kb-faq .kb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0 24px;
  padding: 40px 20px;
  border: 1px dashed var(--kb-line-strong);
  border-radius: 16px;
  background: var(--kb-surface);
  text-align: center;
}
.kb-faq .kb-empty[hidden] {
  display: none;
}
.kb-faq .kb-empty h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--kb-navy);
}
.kb-faq .kb-empty p {
  margin: 0 0 8px;
  color: var(--kb-muted);
}
.kb-faq .kb-empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(11, 25, 44, 0.06);
  color: var(--kb-navy);
  font-size: 1.3rem;
}
.kb-faq .help-guidelines-section {
  margin-top: 40px;
}
.kb-faq .kb-help-dock {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding: 24px 28px;
  border: 1px solid var(--kb-line);
  border-radius: 18px;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -14px rgba(15, 23, 42, 0.12);
}
.kb-faq .kb-help-dock h2 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--kb-navy);
}
.kb-faq .kb-help-dock p {
  margin: 0;
  color: var(--kb-muted);
}
.kb-faq .kb-help-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.kb-faq .kb-help-actions .btn {
  min-height: 44px;
}

/* ---------- B. IP guidelines ---------- */
.kb-guidelines .kb-back {
  min-height: 44px;
  margin-bottom: 20px;
}
.kb-guidelines .kb-chip i {
  font-size: 0.85rem;
}
.kb-guidelines .kb-gl-list {
  display: grid;
  gap: 28px;
}
.kb-guidelines .kb-gl-card {
  overflow: hidden;
  border: 1px solid var(--kb-line);
  border-top: 5px solid var(--gl-accent);
  border-radius: 20px;
  background: var(--kb-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -14px rgba(15, 23, 42, 0.12);
  scroll-margin-top: 96px;
}
.kb-guidelines .kb-gl-head {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 24px 28px;
  border-bottom: 1px solid var(--kb-line);
}
.kb-guidelines .kb-gl-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--gl-tint);
  color: var(--gl-ink);
  font-size: 1.5rem;
}
.kb-guidelines .kb-gl-name {
  flex: 1 1 240px;
  min-width: 0;
}
.kb-guidelines .kb-gl-name h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--kb-navy);
}
.kb-guidelines .kb-gl-name p {
  margin: 2px 0 0;
  color: var(--kb-muted);
}
.kb-guidelines .kb-gl-term {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--gl-tint);
  color: var(--gl-ink);
  font-weight: 800;
}
.kb-guidelines .kb-gl-term small {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
}
.kb-guidelines .kb-gl-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--kb-line);
  background: var(--kb-canvas);
}
.kb-guidelines h3 {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kb-navy);
}
.kb-guidelines .kb-gl-intro p {
  margin: 0;
  line-height: 1.65;
  color: var(--kb-muted);
}
.kb-guidelines .kb-gl-section {
  padding: 22px 28px;
}
.kb-guidelines .kb-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.kb-guidelines .kb-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
/* Rail from each step to the next; the last one has none. */
.kb-guidelines .kb-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 44px;
  right: -10px;
  height: 2px;
  background: linear-gradient(90deg, var(--gl-accent), var(--kb-line));
}
.kb-guidelines .kb-step-dot {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  border-radius: 50%;
  /* The number sits on the dark ink shade: white on the bright accents is
     as low as 2.2:1. The accent stays on the card's stripe and rails. */
  background: var(--gl-ink);
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 800;
  box-shadow: 0 0 0 4px var(--gl-tint);
}
.kb-guidelines .kb-step strong {
  font-size: 0.92rem;
  color: var(--kb-navy);
}
.kb-guidelines .kb-step span:last-child {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--kb-muted);
}
.kb-guidelines .kb-gl-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--kb-line);
}
.kb-guidelines .kb-gl-cols > .kb-gl-section + .kb-gl-section {
  border-left: 1px solid var(--kb-line);
}
.kb-guidelines .kb-gl-reminders {
  background: rgba(245, 158, 11, 0.04);
}
.kb-guidelines .kb-checks {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.kb-guidelines .kb-checks li {
  display: flex;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #334155;
}
.kb-guidelines .kb-checks li i {
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--gl-ink);
}
.kb-guidelines .kb-checks--alert li i {
  color: var(--color-accent-text);
}
.kb-guidelines .kb-fee-note {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--kb-line);
  border-radius: 12px;
  background: var(--kb-surface);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--kb-muted);
}
.kb-guidelines .kb-fee-note strong {
  display: block;
  color: var(--kb-navy);
}
.kb-guidelines .kb-fee-note i {
  margin-top: 3px;
  color: var(--gl-ink);
}

/* ---------- C. Forms repository ---------- */
.kb-forms .kb-doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.kb-forms .kb-doc {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--kb-line);
  border-top: 4px solid var(--kb-accent);
  border-radius: 16px;
  background: var(--kb-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.kb-forms .kb-doc[hidden] {
  display: none;
}
.kb-forms .kb-doc:hover {
  transform: translateY(-3px);
  border-color: var(--kb-line-strong);
  border-top-color: var(--kb-accent);
  box-shadow: 0 12px 24px -4px rgba(11, 25, 44, 0.08);
}
.kb-forms .kb-doc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.kb-forms .kb-doc-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #FEF2F2;
  color: var(--color-error-text);
  font-size: 1.3rem;
}
.kb-forms .kb-doc--online .kb-doc-icon {
  background: var(--kb-tint);
  color: var(--kb-accent-ink);
}
.kb-forms .kb-doc-code {
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(11, 25, 44, 0.06);
  color: var(--kb-navy);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.kb-forms .kb-doc-cat {
  margin: 14px 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kb-accent-ink);
}
.kb-forms .kb-doc-title {
  margin: 6px 0;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--kb-navy);
  overflow-wrap: anywhere;
}
.kb-forms .kb-doc-desc {
  margin: 0 0 16px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--kb-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The online-filing cards carry an instruction, not a summary: show all of it. */
.kb-forms .kb-doc--online .kb-doc-desc {
  -webkit-line-clamp: 3;
}
.kb-forms .kb-doc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #F1F5F9;
}
.kb-forms .kb-doc-spec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--kb-muted);
  font-variant-numeric: tabular-nums;
}
.kb-forms .kb-pdf-badge {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--color-error-text);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.kb-forms .kb-doc-actions {
  display: flex;
  gap: 8px;
}
.kb-forms :is(.kb-doc-preview, .kb-doc-download) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.kb-forms .kb-doc-preview {
  border: 1px solid var(--kb-line-strong);
  background: var(--kb-surface);
  color: var(--kb-navy);
}
.kb-forms .kb-doc-preview:hover {
  border-color: var(--kb-navy);
}
.kb-forms .kb-doc-download {
  border: 1px solid var(--kb-navy);
  background: var(--kb-navy);
  color: #FFFFFF;
}
.kb-forms .kb-doc-download:hover {
  background: var(--navy-dark);
  color: #FFFFFF;
}
.kb-forms .kb-doc-download i {
  transition: transform 0.2s ease;
}
.kb-forms .kb-doc-download:hover i {
  transform: translateY(2px);
}
.kb-forms .kb-doc--online .kb-doc-download:hover i {
  transform: translateX(3px);
}
.kb-forms .kb-forms-foot {
  margin: 32px 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--kb-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .kb-forms .kb-doc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (max-width: 768px) {
  :is(.kb-faq, .kb-guidelines, .kb-forms) .kb-chips {
    /* A single-line rail has the whole row as its natural width. On the public
       pages the .page container is a flex item that grows to that width, so
       the rail must contribute none of it (width: 0) and simply fill the
       space it is given (min-width: 100%), scrolling inside it. */
    width: 0;
    min-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  :is(.kb-faq, .kb-guidelines, .kb-forms) .kb-chips::-webkit-scrollbar {
    display: none;
  }
  .kb-forms .kb-chips--center {
    justify-content: flex-start;
  }
  :is(.kb-faq, .kb-guidelines, .kb-forms) .kb-chip {
    flex: 0 0 auto;
  }
  .kb-guidelines .kb-gl-intro,
  .kb-guidelines .kb-gl-cols {
    grid-template-columns: 1fr;
  }
  .kb-guidelines .kb-gl-cols > .kb-gl-section + .kb-gl-section {
    border-left: 0;
    border-top: 1px solid var(--kb-line);
  }
  /* One unbroken vertical timeline on narrow screens. */
  .kb-guidelines .kb-steps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .kb-guidelines .kb-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 14px;
    padding-bottom: 18px;
  }
  .kb-guidelines .kb-step-dot {
    grid-row: 1 / span 2;
    margin: 0;
  }
  .kb-guidelines .kb-step:not(:last-child)::after {
    top: 38px;
    bottom: 0;
    left: 16px;
    right: auto;
    width: 2px;
    height: auto;
    background: var(--kb-line);
  }
}
@media (max-width: 640px) {
  .kb-faq .kb-hero {
    padding: 28px 18px 24px;
  }
  .kb-faq .kb-search input {
    height: 48px;
  }
  .kb-faq .kb-faq-item .faq-q {
    padding: 14px 16px;
    font-size: 1rem;
  }
  .kb-faq .kb-faq-item .faq-a {
    padding-inline: 16px;
  }
  .kb-guidelines .kb-gl-head,
  .kb-guidelines .kb-gl-intro,
  .kb-guidelines .kb-gl-section {
    padding-inline: 18px;
  }
  .kb-forms .kb-doc-grid {
    grid-template-columns: 1fr;
  }
  .kb-forms .kb-doc-actions,
  .kb-forms .kb-doc-foot {
    width: 100%;
  }
  .kb-forms :is(.kb-doc-preview, .kb-doc-download) {
    flex: 1 1 0;
  }
  .kb-faq .kb-help-actions,
  .kb-faq .kb-help-actions .btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.kb-faq, .kb-guidelines, .kb-forms) * {
    transition: none !important;
  }
}

/* =====================================================================
   LANDING HERO + TWO-TIER PUBLIC NAV + LANDING COLOR SYSTEM
   --public-nav-h is the fixed nav's height: every public page offsets its
   content by it, so the taller two-tier nav can never cover a heading.
   ===================================================================== */
:root {
  --public-nav-h: 72px;
}

/* ---------- Landing color system (scoped) ----------
   The palette lives on the public containers only -- never on :root --
   so no applicant, evaluator or admin screen can inherit it:
     #public-nav     the public header (public pages + login chrome)
     #page-landing   the landing page and all its sections
     #page-faq, #page-contact   the public FAQ and Contact pages
     #modalOverlay   the shared modal, only while the landing page is shown
   Inside the same scope the shared tokens the landing markup already uses
   (--brand-*, --gold*, --navy, including inline var() references) point
   at the landing palette, so existing components follow without
   per-selector overrides. Portal screens never render inside these
   containers, and #page-landing is never .active behind a dashboard.

   Contrast (measured): white on --landing-coral-action 5.40:1, on -hover
   7.15:1, on -active 9.68:1; coral-action text on white 5.40:1 and on the
   tint 5.03:1. --landing-coral-brand (#FF7F50) is 2.50:1 on white -- it
   fails even the 3:1 large-text bar, so it is decorative only (rings,
   rules, indicators), never text. --landing-gray-500 is kept to white /
   #FBFCFD / #F8FAFC (4.34:1 on #F1F5F9 fails); --landing-gray-400 only
   for decoration and disabled states (2.56:1). */
#public-nav,
#page-landing,
#page-faq,
#page-contact,
body:has(#page-landing.active) #modalOverlay,
body:has(#public-nav.active) .floating-fab-main {
  /* Landing palette: navy authority, coral action/accent, white and gray.
     The coral values are the same as the portal :root tokens so the public
     pages and the portals share one accent. */
  --psu-navy: var(--color-secondary);
  --psu-navy-deep: var(--color-secondary-dark);
  --psu-navy-dark: var(--color-secondary-dark);
  --psu-navy-tint: var(--color-primary-light);

  --psu-coral: var(--color-primary);        /* button fill / coral text (white on it 4.7:1) */
  --psu-coral-dark: var(--color-primary-dark);   /* hover */
  --psu-coral-deep: var(--color-primary-dark);   /* active */
  --psu-coral-light: var(--color-primary);  /* decorative accent only (rings, dots, icons) */
  --psu-coral-tint: var(--color-primary-light);

  --landing-coral-brand: var(--psu-coral-light);
  --landing-coral-action: var(--psu-coral);
  --landing-coral-action-hover: var(--psu-coral-dark);
  --landing-coral-action-active: var(--psu-coral-deep);
  --landing-coral-tint: var(--psu-coral-tint);

  --landing-white: #ffffff;

  --landing-gray-25: #fcfdfd;
  --landing-gray-50: #f8fafc;
  --landing-gray-100: #f1f5f9;
  --landing-gray-200: #e2e8f0;
  --landing-gray-300: #cbd5e1;
  --landing-gray-400: #94a3b8;
  --landing-gray-500: #556275;
  --landing-gray-700: #334155;
  --landing-gray-900: #0f172a;

  /* Shared tokens, re-pointed inside this scope */
  --brand-action: var(--psu-coral);
  --brand-strong: var(--psu-coral-dark);
  --brand-tint: var(--psu-coral-tint);
  --gold: var(--psu-coral-light);
  --gold-dark: var(--color-primary-dark);
  --gold-light: var(--psu-coral-tint);
  --navy: var(--psu-navy);
  --navy-dark: var(--psu-navy-deep);
}
/* --text-muted is a global token (#475569) used across the portals; the
   landing's metadata slate applies to the nav and hero only, whose
   surfaces are white to #F8FAFC. */
#public-nav,
#page-landing .hero {
  --text-muted: var(--landing-gray-500);
}

/* Shared primary buttons inside the scope: PSU Emerald gradient with glow */
:is(#page-landing, #page-faq, #page-contact) .btn-primary,
body:has(#page-landing.active) #modalOverlay .btn-primary {
  background: linear-gradient(135deg, var(--psu-coral) 0%, var(--psu-coral-dark) 100%);
  border: 1px solid var(--psu-coral-dark);
  color: var(--color-on-primary);
  box-shadow: 0 4px 14px -2px rgba(255, 112, 67, 0.35);
}
:is(#page-landing, #page-faq, #page-contact) .btn-primary:hover,
body:has(#page-landing.active) #modalOverlay .btn-primary:hover {
  background: linear-gradient(135deg, var(--psu-coral-light) 0%, var(--psu-coral) 100%);
  border-color: var(--psu-coral);
  box-shadow: 0 8px 20px -2px rgba(255, 112, 67, 0.45);
}
:is(#page-landing, #page-faq, #page-contact) .btn-primary:active,
body:has(#page-landing.active) #modalOverlay .btn-primary:active {
  background: var(--psu-coral-deep);
  border-color: var(--psu-coral-deep);
}
:is(#public-nav, #page-landing, #page-faq, #page-contact) :is(a, button, [role="button"], [tabindex]):focus-visible,
body:has(#page-landing.active) #modalOverlay :is(a, button, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---------- Header ---------- */
#public-nav {
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--landing-gray-200);
  box-shadow: none;
}
#public-nav .nav-brand .brand-name {
  color: var(--landing-gray-900);
}
#public-nav .nav-brand .brand-sub {
  color: var(--text-muted);
}

/* Institution seal beside the name, as in the reference. The admin logo tile
   takes precedence when one is configured. */
#public-nav .nav-brand-seal {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  object-fit: contain;
}
#public-nav .brand-icon:not(:empty) ~ .nav-brand-seal {
  display: none;
}
@media (min-width: 901px) {
  #public-nav .nav-brand-seal {
    width: 56px;
    height: 56px;
  }
}
/* Phones keep the name on one line: the seal would push it to two. */
@media (max-width: 768px) {
  #public-nav .nav-brand-seal {
    display: none;
  }
}

/* Desktop action pair; the drawer carries its own copies below 769px. */
#public-nav .nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
#public-nav .nav-drawer-only {
  display: none;
}
#public-nav .nav-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 8px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
#public-nav .nav-action--primary {
  border: 1px solid var(--landing-coral-action);
  background: var(--landing-coral-action);
  color: var(--color-on-primary);
}
#public-nav .nav-action--primary:hover {
  border-color: var(--landing-coral-action-hover);
  background: var(--landing-coral-action-hover);
}
#public-nav .nav-action--primary:active {
  border-color: var(--landing-coral-action-active);
  background: var(--landing-coral-action-active);
}
#public-nav .nav-action--secondary {
  border: 1px solid var(--landing-gray-200);
  background: var(--landing-white);
  color: var(--landing-gray-900);
}
#public-nav .nav-action--secondary:hover {
  border-color: #cbd5e1;
  background: var(--landing-gray-50);
}
/* The public nav on the login screens shows only the brand. */
body.portal-login-mode #public-nav .nav-actions,
body.standalone-login-mode #public-nav .nav-actions {
  display: none !important;
}

/* Institution first, then the system name -- both from branding. */
#public-nav .nav-brand .brand-name {
  letter-spacing: 0.02em;
  color: var(--landing-gray-900);
}

/* ---------- Consolidated Header from 901px: Single sleek 76px glassmorphic bar ---------- */
@media (min-width: 901px) {
  :root {
    --public-nav-h: 76px;
  }
  body:not(.portal-login-mode):not(.standalone-login-mode) #public-nav {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05);
    height: 76px;
  }
  body:not(.portal-login-mode):not(.standalone-login-mode) #public-nav .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 28px;
    gap: 20px;
  }
  body:not(.portal-login-mode):not(.standalone-login-mode) #ui-back-btn-public {
    display: none;
  }
  body:not(.portal-login-mode):not(.standalone-login-mode) #public-nav .nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    cursor: pointer;
  }
  body:not(.portal-login-mode):not(.standalone-login-mode) #public-nav .nav-brand .brand-name {
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
  }
  body:not(.portal-login-mode):not(.standalone-login-mode) #public-nav .nav-brand .brand-sub {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-accent-text);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  body:not(.portal-login-mode):not(.standalone-login-mode) #public-nav .nav-brand-seal {
    width: 44px;
    height: 44px;
  }
  body:not(.portal-login-mode):not(.standalone-login-mode) #public-nav .nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
    position: static;
    width: auto;
  }
  body:not(.portal-login-mode):not(.standalone-login-mode) #public-nav .nav-links > li > .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 6px 14px;
    color: #334155;
    font-size: 0.96rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
  }
  body:not(.portal-login-mode):not(.standalone-login-mode) #public-nav .nav-links > li > .nav-link:hover {
    color: var(--color-accent-text);
    background: rgba(241, 245, 249, 0.8);
  }
  body:not(.portal-login-mode):not(.standalone-login-mode) #public-nav .nav-links > li > .nav-link::after {
    display: none !important;
  }
  body:not(.portal-login-mode):not(.standalone-login-mode) #public-nav .nav-item-auth {
    margin-left: 14px;
    position: static;
    transform: none;
    display: inline-flex;
    align-items: center;
  }
  body:not(.portal-login-mode):not(.standalone-login-mode) #public-nav .nav-links > li.nav-item-auth > .nav-auth-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gradient-primary);
    color: var(--color-on-primary) !important;
    border: 1px solid var(--color-primary-dark);
    border-radius: 9999px;
    padding: 8px 20px;
    font-size: 0.92rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(192, 86, 33, 0.2);
    transition: all 0.2s ease;
  }
  body:not(.portal-login-mode):not(.standalone-login-mode) #public-nav .nav-links > li.nav-item-auth > .nav-auth-btn:hover {
    background: linear-gradient(135deg, #cc5e28 0%, #9e3f1b 100%);
    border-color: var(--color-primary-dark);
    box-shadow: 0 4px 14px rgba(192, 86, 33, 0.3);
    transform: translateY(-1px);
  }
}

/* ---------- Services / Help dropdown panels (outside the phone drawer) ----------
   Hover still opens them; .is-open (set by the click / keyboard handler in
   app.js) opens them too, and a flyout opens while focus is inside it so
   Tab reaches "Register ..." and "Guidelines". Help's panel is anchored to
   its right edge so it can never run past the viewport. */
@media (min-width: 769px) {
  /* visibility switches at once (0s) so a keyboard user's very next Tab
     already lands inside the panel; opacity and position still ease in. */
  #public-nav .nav-item-dropdown.is-open > .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }
  #public-nav .nav-item-sub-dropdown:focus-within > .sub-dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }
  #public-nav #navHelpMenu {
    left: auto;
    right: 0;
    transform: translateY(10px);
  }
  #public-nav .nav-item-dropdown:hover > #navHelpMenu,
  #public-nav .nav-item-dropdown.is-open > #navHelpMenu {
    transform: translateY(0);
  }
  #public-nav :is(.dropdown-content, .sub-dropdown-content) {
    background: var(--landing-white);
    border: 1px solid var(--landing-gray-200);
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.16);
  }
  /* Links animate colour and padding only. With the shared `transition: all`
     they also animated the visibility they inherit from the panel, so a
     just-opened panel's links stayed unfocusable for a frame and a fast
     Tab skipped past them. */
  #public-nav :is(.dropdown-content, .sub-dropdown-content) a {
    color: var(--landing-gray-700); /* 10.35:1 on white */
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
  }
  #public-nav :is(.dropdown-content, .sub-dropdown-content) a:is(:hover, :focus-visible) {
    background: var(--landing-gray-50);
    color: var(--color-accent-text); /* 5.16:1 on #F8FAFC */
  }
}
@media (min-width: 901px) {
  body:not(.portal-login-mode):not(.standalone-login-mode) #public-nav .nav-links > .nav-item-dropdown.is-open > .nav-link::after {
    transform: scaleX(1);
  }
  #public-nav .nav-action {
    min-height: 52px;
  }
}

/* Responsive adjustments for Login / Register button and mobile drawer */
@media (max-width: 900px) {
  #public-nav .nav-actions {
    display: none;
  }
  #public-nav .nav-item-auth {
    position: static !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-top: 10px;
    width: 100%;
  }
  #public-nav .nav-links > li.nav-item-auth > .nav-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
    border: 1px solid var(--landing-gray-200);
    border-radius: 8px;
    background: var(--landing-white);
    color: var(--landing-gray-900);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
  }
  #public-nav .nav-links > li.nav-item-auth > .nav-auth-btn:hover {
    border-color: #cbd5e1;
    background: var(--landing-gray-50);
  }
}

/* ---------- Hero stage ---------- */
#page-landing .hero {
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--public-nav-h, 76px) + clamp(36px, 4vw, 56px)) !important;
  padding-bottom: clamp(48px, 6vw, 76px) !important;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(255, 112, 67, 0.09) 0%, rgba(139, 69, 19, 0.06) 60%, transparent 80%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
#page-landing .hero-layout.centered .hero-content {
  max-width: 1080px;
}
/* Emblem row: institution seal, institution badge, partner seal. */
#page-landing .hero-emblems {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}
#page-landing .hero-seal {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.06));
}
#page-landing .hero-seal.hero-seal--left {
  border-radius: 50%;
  overflow: hidden;
}
#page-landing .hero-seal.hero-seal--right {
  border-radius: 0;
}
/* Refined university badge with animated status dot */
#page-landing .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border: 1px solid rgba(255, 112, 67, 0.3);
  border-radius: 9999px;
  background: rgba(253, 238, 231, 0.9);
  color: var(--color-accent-text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(255, 112, 67, 0.08);
}
#page-landing .hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e66b3f;
  box-shadow: 0 0 0 3px rgba(255, 112, 67, 0.25);
  animation: pulseDot 2s infinite ease-in-out;
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.75; }
}
#page-landing .hero-title {
  margin: 0 auto 20px;
  max-width: 980px;
  font-family: var(--font-serif, 'Fraunces'), 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #0f172a;
}
#page-landing .hero-gradient-text {
  background: linear-gradient(135deg, var(--navy) 0%, var(--color-primary-dark) 50%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}
#page-landing .hero-tagline {
  margin: 0 auto 10px;
  max-width: 860px;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 600;
  line-height: 1.5;
  color: #334155;
}
#page-landing .hero-subtext {
  margin: 0 auto 30px;
  max-width: 740px;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  line-height: 1.6;
  color: var(--landing-gray-500);  /* #556275: AA on the hero tint */
}
#page-landing .hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
#page-landing .btn-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  background: var(--gradient-primary);
  border: 1px solid var(--color-primary-dark);
  color: var(--color-on-primary);
  box-shadow: 0 6px 18px -4px rgba(192, 86, 33, 0.25);
  transition: all 0.25s ease;
}
#page-landing .btn-hero-primary:hover {
  background: linear-gradient(135deg, #cc5e28 0%, #9e3f1b 100%);
  box-shadow: 0 8px 22px -4px rgba(192, 86, 33, 0.35);
  transform: translateY(-2px);
}
#page-landing .btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: var(--navy);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: all 0.25s ease;
}
#page-landing .btn-hero-secondary:hover {
  border-color: var(--navy);
  background: #f8fafc;
  color: var(--navy);
  transform: translateY(-2px);
}

/* Phones: the brand block shrinks beside the menu button instead of running
   under it; the system name folds to two small lines. */
@media (max-width: 768px) {
  #public-nav .nav-brand {
    flex: 1 1 auto;
    max-width: calc(100% - 60px);
  }
  #public-nav .nav-brand .brand-text {
    min-width: 0;
  }
  #public-nav .nav-brand .brand-name {
    font-size: 1rem;
  }
  #public-nav .nav-brand .brand-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    font-size: 0.62rem;
    line-height: 1.3;
    letter-spacing: 0.05em;
  }
}

@media (max-width: 640px) {
  #page-landing .hero-emblems {
    gap: 10px;
    margin-bottom: 22px;
  }
  #page-landing .hero-seal {
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.06));
  }
  #page-landing .hero-seal.hero-seal--left {
    border-radius: 50%;
  }
  #page-landing .hero-seal.hero-seal--right {
    border-radius: 0;
  }
  /* !important: an older mobile block pins a bottom margin on .hero-badge,
     which lifted the pill off the seals' centre line. */
  #page-landing .hero-badge {
    margin: 0 !important;
    padding: 7px 14px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    line-height: 1.4;
  }
  /* Scaled to the screen so "Intellectual Property and" holds one line
     down to 320px; longer configured names simply wrap.
     !important: an older mobile block pins .hero-title with !important. */
  #page-landing .hero-title {
    font-size: min(2.6rem, calc((100vw - 32px) / 13)) !important;
    line-height: 1.12 !important;
    margin-bottom: 18px;
  }
  #page-landing .hero-tagline {
    font-size: 1rem;
  }
  #page-landing .hero-subtext {
    margin-bottom: 24px;
    font-size: 0.95rem;
  }
  #page-landing .hero-cta .btn {
    width: 100%;
    min-height: 52px;
  }
  /* Section headings wrap to two or three lines on a phone; the desktop
     line-height left wide gaps between them. */
  #page-landing .section-title {
    line-height: 1.15;
  }
}

/* ---------- Landing sections ----------
   The page used to sit on a fixed peach "sunrise" wash that showed through
   every transparent section. Surfaces alternate white / #F8FAFC with a
   #F1F5F9 hairline; cards are white on #E2E8F0 borders. */
#page-landing {
  background: var(--landing-white);
  background-attachment: scroll;
}
#page-landing #ip-journey-landing-section,
#page-landing #announcements-landing-section {
  background: var(--landing-gray-50);
  border-top: 1px solid var(--landing-gray-100);
  border-bottom: 1px solid var(--landing-gray-100);
}

/* Eyebrow labels: PSU Emerald */
#page-landing .m-eyebrow {
  color: var(--color-accent-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}

/* Protection lanes: 5 Distinct IP category cards */
#page-landing .ip-service-card {
  background: var(--landing-white);
  border: 1px solid var(--landing-gray-200);
  border-radius: 16px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
#page-landing .ip-service-card:hover {
  transform: translateY(-6px);
}
#page-landing .ip-service-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 16px;
  transition: transform 0.2s ease;
}
#page-landing .ip-service-card:hover .ip-service-icon {
  transform: scale(1.1);
}

/* One coral accent for every category: the palette is coral, white and gray. */
#page-landing .ip-service-card .ip-service-icon {
  background: var(--psu-coral-tint);
  color: var(--color-accent-text);
}
#page-landing .ip-service-card:hover {
  border-color: rgba(255, 112, 67, 0.5);
  box-shadow: 0 16px 32px -8px rgba(255, 112, 67, 0.16);
}

#page-landing .ip-service-actions .btn-apply {
  border: 1px solid var(--psu-navy);
  background: var(--psu-navy);
  color: var(--landing-white);
  border-radius: 8px;
  font-weight: 600;
  padding: 8px 16px;
  box-shadow: 0 2px 6px rgba(139, 69, 19, 0.15);
  transition: all 0.2s ease;
}
#page-landing .ip-service-actions .btn-apply:hover {
  border-color: var(--psu-coral);
  background: var(--psu-coral);
  box-shadow: 0 4px 14px rgba(255, 112, 67, 0.3);
  transform: translateY(-1px);
}
#page-landing .ip-service-actions .link-guide {
  color: var(--psu-navy);
  font-weight: 600;
  transition: color 0.2s ease;
}
#page-landing .ip-service-actions .link-guide:hover {
  color: var(--color-accent-text);
}

/* ---------- Journey Steps ---------- */
#page-landing .ip-journey-card {
  background: var(--landing-white);
  border: 1px solid var(--landing-gray-200);
  border-radius: 16px;
  padding: 28px 22px;
  box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.04);
  transition: all 0.25s ease;
}
#page-landing .ip-journey-card:hover {
  transform: translateY(-4px);
  border-color: var(--psu-coral);
  box-shadow: 0 16px 28px -6px rgba(255, 112, 67, 0.12);
}
#page-landing .ip-journey-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 9999px;
  background: var(--psu-coral-tint);
  color: var(--color-accent-text);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  border: 1.5px solid var(--psu-coral-light);
}

/* ---------- Marketplace preview ---------- */
#page-landing #featured-marketplace-section .innovation-card {
  border-color: var(--landing-gray-200);
}
#page-landing #featured-marketplace-section .innovation-card-body :is(h3, h4) {
  color: var(--landing-gray-900);
}
#page-landing #featured-marketplace-section .learn-more {
  color: var(--color-accent-text);
}
#page-landing #featured-marketplace-section .innovation-card .badge {
  background: var(--psu-coral-tint);
  border-color: rgba(255, 112, 67, 0.35);
  color: var(--color-accent-text);
}

/* ---------- News & Announcements ---------- */
#page-landing #announcements-landing-section {
  --gz-navy: var(--landing-gray-900);
  --gz-navy-soft: var(--landing-gray-700);
  --gz-line: var(--landing-gray-200);
  --gz-muted: var(--landing-gray-500);
  --gz-focus: 0 0 0 3px rgba(255, 112, 67, 0.35);
  background: var(--landing-gray-50);
  border-top-color: var(--landing-gray-100);
}
#page-landing #announcements-landing-section .gz-card {
  background: var(--landing-white);
  border-color: var(--landing-gray-200);
  border-radius: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#page-landing #announcements-landing-section .gz-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.08);
}
#page-landing #announcements-landing-section .gz-status {
  background: var(--psu-coral-tint);
  border-color: rgba(255, 112, 67, 0.35);
  color: var(--color-accent-text);
}
#page-landing #announcements-landing-section .gz-status-dot {
  background: var(--psu-coral-light);
  box-shadow: 0 0 0 3px rgba(255, 112, 67, 0.2);
}
#page-landing #announcements-landing-section .ann-filter-pill.active {
  background: var(--psu-coral-tint);
  border-color: var(--psu-coral);
  color: var(--color-accent-text);
  font-weight: 700;
  box-shadow: none;
}
#page-landing #announcements-landing-section .gz-meta .ann-badge,
body:has(#page-landing.active) #modalOverlay .gz-reader .ann-badge {
  background: var(--psu-coral-tint);
  color: var(--color-accent-text);
  font-weight: 700;
}
#page-landing #announcements-landing-section .gz-media--plain i {
  color: var(--color-accent-text);
  opacity: 0.65;
}
#page-landing #announcements-landing-section .gz-read {
  color: var(--color-accent-text);
  font-weight: 700;
}

/* ---------- Public FAQ page ---------- */
#page-faq .kb-faq {
  --kb-navy: var(--landing-gray-900);
  --kb-navy-soft: #1e293b;
  --kb-line: var(--landing-gray-200);
  --kb-ink: var(--landing-gray-900);
  --kb-gold: var(--psu-coral);
  --kb-focus: 0 0 0 3px rgba(255, 112, 67, 0.35);
}
#page-faq .kb-faq [class*="kb-accent-"] {
  --kb-accent: var(--psu-coral);
  --kb-tint: var(--psu-coral-tint);
  --kb-accent-ink: var(--psu-coral-dark);
}
#page-faq .kb-faq .kb-eyebrow {
  color: var(--color-accent-text);
}
#page-faq .kb-faq .kb-eyebrow--light {
  color: var(--color-accent-text);
}
#page-faq .kb-faq .kb-chip.active {
  background: var(--psu-coral-tint);
  border-color: var(--psu-coral);
  color: var(--color-accent-text);
}
#page-faq .kb-faq .kb-chip.active span {
  background: var(--landing-white);
  color: var(--color-accent-text);
}

/* Assistance floating button: University Emerald glow */
body:has(#public-nav.active) .floating-fab-main {
  background: linear-gradient(135deg, var(--psu-coral) 0%, var(--psu-coral-dark) 100%);
  box-shadow: 0 8px 24px rgba(255, 112, 67, 0.35);
}
body:has(#public-nav.active) .floating-fab-main:hover {
  background: linear-gradient(135deg, var(--psu-coral-light) 0%, var(--psu-coral) 100%);
  box-shadow: 0 12px 28px rgba(255, 112, 67, 0.45);
}

/* Contact page icons */
#page-contact .contact-icon-tile {
  background: var(--psu-coral-tint) !important;
  color: var(--color-accent-text) !important;
}
#page-contact .contact-info-card {
  border-color: var(--landing-gray-200) !important;
}

/* Room under the last element of every signed-in page, so the floating
   Assistance button can never permanently cover it (the chat composer and
   its Send button, a table's last row, Change password). Phones with the
   applicant bottom bar get a larger value in that bar's own block. */
#main-content {
  padding-bottom: 88px;
}

/* Action Required request: "Exact field" dropdown. Custom (not a native select)
   so the list always opens downward and scrolls inside a fixed height. */
.ar-dd { position: relative; }
.ar-dd__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: #fff; border: 1px solid var(--gray-200); border-radius: 10px;
  font: inherit; color: var(--gray-800, #1f2937); text-align: left; cursor: pointer;
}
.ar-dd__btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.ar-dd__list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  max-height: 240px; overflow-y: auto; background: #fff;
  border: 1px solid var(--gray-200); border-radius: 10px; box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.15));
}
.ar-dd__opt {
  display: block; width: 100%; padding: 10px 14px; background: none; border: 0;
  font: inherit; text-align: left; color: var(--gray-800, #1f2937); cursor: pointer;
}
.ar-dd__opt:hover, .ar-dd__opt:focus-visible { background: var(--gray-100, #f3f4f6); outline: none; }
.ar-dd__opt.is-selected { font-weight: 700; color: var(--navy); }

/* =====================================================================
   APPLICANT PORTAL — CORAL, WHITE AND GRAY
   The applicant side uses the portal's coral accent on white and gray
   surfaces: navy becomes charcoal gray, gold becomes coral, and the
   hero banners (dashboard, marketplace, help) are coral with white text.
   Scoped to body.role-applicant, so the Admin and Evaluator workspaces
   and the public pages keep their own palette. Status colors (green
   certified, amber pending, red rejected, blue information) keep their
   meaning and are not changed here.
   Contrast (measured): white on #C74B1E 4.7:1 and on #A83E15 6.3:1;
   #C74B1E text on white 4.7:1; #1F2937 on white 14.7:1.
   ===================================================================== */
body.role-applicant {
  /* Portal-wide ink: headings, outlines, avatars. */
  --ink: var(--color-secondary-dark);
  --navy: var(--color-secondary);
  --trust: var(--color-secondary);
  --navy-slate: #374151;
  --navy-light: var(--color-primary-light);
  --trust-tint: var(--color-primary-light);
  /* Applicant dashboard tokens (defined in the institutional block above). */
  --ax-navy: var(--color-secondary);
  --ax-navy-surface: var(--color-secondary-dark);
  --ax-navy-soft: #4b5563;
  --ax-slate: #1f2937;
  --ax-gold: var(--color-primary);
  --ax-gold-bright: var(--color-primary-dark);
  --ax-gold-tint: rgba(255, 112, 67, 0.08);
  --ax-focus: 0 0 0 3px rgba(255, 112, 67, 0.45);
  --ax-coral-hero: linear-gradient(135deg, #0B2545 0%, #133E68 100%);
  --ax-coral-hero-shadow: 0 14px 34px -12px rgba(11, 37, 69, 0.45);
}

/* ---------- Dashboard welcome hero ---------- */
body.role-applicant .applicant-welcome-banner {
  background: var(--ax-coral-hero);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--ax-coral-hero-shadow);
  color: #ffffff;
}
body.role-applicant .applicant-welcome-info h1 {
  color: #ffffff;
}
body.role-applicant .applicant-welcome-banner::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
}
body.role-applicant .applicant-welcome-info p {
  color: var(--color-on-primary);
}
body.role-applicant .applicant-chip-metric {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
body.role-applicant .applicant-chip-metric strong,
body.role-applicant .applicant-chip-metric i,
body.role-applicant .applicant-chip-metric.chip-certified i {
  color: #ffffff;
}
/* Urgent count: solid AA red with white text (6.47:1). */
body.role-applicant .applicant-chip-metric.highlight {
  background: var(--color-error-text);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}
body.role-applicant .applicant-chip-metric.highlight strong,
body.role-applicant .applicant-chip-metric.highlight i {
  color: #ffffff;
}
body.role-applicant .applicant-chip-metric:focus-visible {
  outline-color: var(--color-focus);
}

/* ---------- Primary quick action: white card, coral accent ---------- */
body.role-applicant .action-card-primary,
body.role-applicant .action-card-primary:hover {
  background: var(--ax-surface);
}
body.role-applicant .action-card-primary {
  border: 1px solid rgba(255, 112, 67, 0.45);
  box-shadow: var(--ax-shadow-card);
}
body.role-applicant .action-card-primary:hover {
  border-color: var(--brand);
  box-shadow: 0 14px 28px -12px rgba(255, 112, 67, 0.28);
}
body.role-applicant .action-card-primary .action-card-icon,
body.role-applicant .action-card-primary:hover .action-card-icon {
  background: var(--brand-action);
  border: 0;
  color: var(--color-on-primary);
  box-shadow: 0 6px 14px -6px rgba(255, 112, 67, 0.6);
}
body.role-applicant .action-card-primary .action-card-content h3 {
  color: var(--ax-navy);
}
body.role-applicant .action-card-primary .action-card-content p {
  color: var(--ax-muted);
}
body.role-applicant .action-card-primary .action-card-arrow,
body.role-applicant .action-card-primary:hover .action-card-arrow {
  color: var(--color-accent-text);
}
body.role-applicant .action-card.action-card-secondary .action-card-icon {
  background: #f3f4f6;
}
body.role-applicant .applicant-bulletin-icon {
  background: var(--brand-tint);
}

/* ---------- Marketplace (inside the applicant portal) ---------- */
body.role-applicant #main-content .mp-showcase {
  --mp-navy: #9A3412;
  --mp-navy-surface: #C2410C;
  --mp-navy-soft: #EA580C;
  --mp-gold: #F59E0B;
  --mp-gold-bright: #D97706;
  --mp-focus: 0 0 0 3px rgba(255, 112, 67, 0.45);
}
body.role-applicant #main-content .mp-showcase .mp-hero {
  background:
    radial-gradient(ellipse at 85% 20%, rgba(245, 158, 11, 0.35) 0%, transparent 60%),
    linear-gradient(135deg, #FFAA8B 0%, #FF7F50 45%, #E05A2B 100%);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 18px 40px -20px rgba(224, 90, 43, 0.45);
}
body.role-applicant #main-content .mp-showcase .mp-hero h1,
body.role-applicant #main-content .mp-showcase .mp-hero-eyebrow,
body.role-applicant #main-content .mp-showcase .mp-hero-sub,
body.role-applicant #main-content .mp-showcase .mp-stat span,
body.role-applicant #main-content .mp-showcase .mp-stat strong {
  color: var(--color-on-primary);
}
body.role-applicant #main-content .mp-showcase .mp-stat {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}
body.role-applicant #main-content .mp-showcase .mp-bookmark.saved {
  background: var(--brand-tint);
}
body.role-applicant .mp-dossier .mp-dossier-title {
  color: #1f2937;
}

/* ---------- Help & Support, IP Guidelines, Forms (inside the portal) ---------- */
body.role-applicant :is(.kb-faq, .kb-guidelines, .kb-forms) {
  --kb-navy: var(--color-secondary);
  --kb-navy-soft: #4b5563;
  --kb-gold: var(--color-primary);
  --kb-focus: 0 0 0 3px rgba(255, 112, 67, 0.45);
}
body.role-applicant .kb-faq .kb-hero {
  background: var(--ax-coral-hero);
  box-shadow: var(--ax-coral-hero-shadow);
}
body.role-applicant :is(.kb-faq, .kb-guidelines, .kb-forms) .kb-eyebrow {
  color: #ffffff;
}
body.role-applicant :is(.kb-faq, .kb-guidelines, .kb-forms) .kb-eyebrow--light {
  color: var(--color-accent-text);
}
body.role-applicant .kb-faq .kb-hero-sub {
  color: rgba(255, 255, 255, 0.96);
}
body.role-applicant :is(.kb-faq, .kb-guidelines, .kb-forms) .kb-chip.active {
  border-color: var(--brand);
}
body.role-applicant .kb-faq .kb-search input:focus {
  border-color: var(--brand);
  box-shadow: 0 16px 32px rgba(31, 41, 55, 0.2), 0 0 0 3px rgba(255, 112, 67, 0.25);
}
body.role-applicant .kb-guidelines .kb-gl-reminders {
  background: rgba(255, 112, 67, 0.04);
}
body.role-applicant .kb-forms .kb-doc-download:hover {
  background: #374151;
}

/* The signed-in applicant's own avatar in the top bar (initials fallback):
   coral instead of the per-person tone renderAvatar() sets inline, which can
   land on navy. Other people's avatars keep their identity tones. */
body.role-applicant .tcb-avatar--chrome.is-fallback {
  background: var(--brand-action) !important;
}
body.role-applicant .tcb-avatar.profile-avatar-lg.is-fallback {
  background: var(--brand-action) !important;
}
/* Selected conversation: coral edge on a warm-gray wash instead of blue. */
body.role-applicant .chat-thread-item.active {
  background: #faf6f4;
}

/* =====================================================================
   MARKETPLACE (spec 2026-10-01): type toggles, purpose line, cards, states.
   Colours are palette tokens only; the brand accent is --color-accent-text.
   ===================================================================== */
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-search {
  max-width: 920px;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-type-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-type-btn {
  border: 1px solid var(--color-tertiary);
  background: var(--surface);
  color: var(--color-secondary-dark);
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-type-btn:hover {
  background: var(--color-primary-light);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-type-btn.active,
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-type-btn[aria-pressed="true"] {
  background: var(--gradient-primary);
  border-color: var(--color-primary-dark);
  color: var(--color-on-primary);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-type-btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-purpose {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-secondary-dark);
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.5;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-media {
  position: relative;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-media > i {
  font-size: 2rem;
  color: var(--color-secondary);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-title {
  font-size: 1.08rem;
  color: var(--color-accent-text);
}
:is(#main-content, #marketplacePublicContent) .mp-showcase .mp-card-snippet {
  min-height: 4.8em;
}

/* Landing "Featured Innovations" cards */
#featured-marketplace-section .innovation-card {
  display: flex;
  flex-direction: column;
}
#featured-marketplace-section .innovation-card-img {
  position: relative;
  aspect-ratio: 16 / 9;
  height: auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-primary-light);
}
#featured-marketplace-section .innovation-card-img > i {
  font-size: 2rem;
  color: var(--color-secondary);
}
#featured-marketplace-section .innovation-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#featured-marketplace-section .innovation-card-title {
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--color-accent-text);
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
#featured-marketplace-section .innovation-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.8em;
  line-height: 1.6;
  margin: 8px 0 12px;
  color: var(--text-secondary);
}
#featured-marketplace-section .innovation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
#featured-marketplace-section .learn-more {
  border: 0;
  background: none;
  padding: 6px 0;
  font: inherit;
  font-weight: 700;
  color: var(--color-accent-text);
  cursor: pointer;
}
#featured-marketplace-section .learn-more:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
#featured-marketplace-section .featured-state {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 16px;
  border: 1px dashed var(--color-tertiary);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-secondary);
  text-align: center;
}
#featured-marketplace-section .featured-state--error {
  border-color: var(--color-error);
  color: var(--color-error-text);
}

/* =============== NOTIFICATION PANEL: SCROLLING LIST ===============
   The panel used to grow with its contents on desktop (no height limit) and,
   on phones, scrolled as a whole so the header and actions scrolled away.
   Now the panel is a bounded flex column: header and footer stay, the list
   between them scrolls. 520px is ~6 rows on desktop; the viewport cap keeps
   it on screen on short windows and phones (whose existing rules already
   bound the panel). min-height:0 is what lets a flex child shrink and scroll.
   ------------------------------------------------------------------------- */
.notif-dropdown.open {
  display: flex;
  flex-direction: column;
  max-height: min(520px, calc(100vh - 96px));
  max-height: min(520px, calc(100dvh - 96px));
}
.notif-dropdown-header,
.notif-dropdown-footer,
.notif-new-pill {
  flex-shrink: 0;
}
#notifList {
  position: relative; /* offsetTop of rows is measured against the list */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 900px) {
  .notif-dropdown.open {
    overflow: hidden !important; /* the list scrolls, not the whole panel */
  }
}
.notif-dropdown-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}
.notif-footer-btn {
  background: none;
  border: none;
  padding: 6px 8px;
  min-height: 32px;
  border-radius: 8px;
  color: var(--color-accent-text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.notif-footer-btn:hover:not(:disabled) {
  background: var(--color-primary-light);
}
.notif-footer-btn:disabled {
  color: var(--gray-400);
  cursor: default;
}
.notif-footer-btn:focus-visible,
.notif-older-btn:focus-visible,
.notif-new-pill:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
/* Floats over the top of the list: taking layout space would push the list
   down and move the very row the reader is on. The panel is positioned
   (absolute, or fixed on small screens), so this anchors to it. */
.notif-new-pill {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: 0 4px 12px rgba(111, 58, 31, 0.25);
  padding: 4px 12px;
  border: none;
  border-radius: 999px;
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.notif-new-pill[hidden] {
  display: none;
}
.notif-item.unread {
  background: rgba(255, 112, 67, 0.07);
}
.notif-item.unread::after {
  background: var(--color-secondary); /* 6.8:1 on the tinted row; coral is ~3:1 */
}
.notif-older {
  padding: 10px 16px;
  text-align: center;
}
.notif-older-btn {
  background: none;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--color-accent-text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.notif-older-btn:disabled {
  color: var(--gray-500);
  cursor: progress;
}

/* =============== CERTIFICATION DETAILS (certified case panel) =============== */
.certification-details {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 0.85rem;
}
.certification-details > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
}
.certification-details dt {
  font-weight: 700;
  color: var(--color-success-text);
}
.certification-details dd {
  margin: 0;
  color: var(--gray-700, #334155);
  overflow-wrap: anywhere;
}
.status-update-panel--certified {
  display: block !important;
  margin-bottom: 0;
}
.status-update-panel--certified .certification-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
  font-size: 0.82rem;
}
.status-update-panel--certified .certification-details > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.status-update-panel--certified .certification-details dt {
  margin-bottom: 3px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-success-text, #15803d);
}
.status-update-panel--certified .certification-details dd {
  font-size: 0.84rem;
  color: var(--navy);
  font-weight: 600;
}
.status-update-panel--certified .certification-details dd .btn {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}
@media (max-width: 520px) {
  .status-update-panel--certified .certification-details {
    grid-template-columns: 1fr;
  }
}

/* =============== EVALUATOR ACTIONS AUDIT LOG =============== */
.evaluator-actions-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.evaluator-actions-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-100);
}
.evaluator-actions-header h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.evaluator-actions-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.evaluator-actions-search {
  min-width: 220px;
  max-width: 320px;
  position: relative;
  flex: 1 1 220px;
  display: flex;
  align-items: center;
}
.evaluator-actions-search input {
  width: 100% !important;
  padding: 8px 14px 8px 38px !important;
  border-radius: 8px !important;
  border: 1px solid var(--gray-200) !important;
  font-size: 0.84rem !important;
  outline: none !important;
  background: #fff !important;
  color: var(--navy) !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}
.evaluator-actions-search input:focus {
  border-color: var(--brand, #ff7f50) !important;
  box-shadow: 0 0 0 3px rgba(255, 127, 80, 0.12) !important;
}
.evaluator-actions-search i {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--gray-400) !important;
  font-size: 0.85rem !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.evaluator-actions-categories {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.evaluator-actions-categories .filter-btn {
  padding: 5px 12px;
  font-size: 0.78rem;
  border-radius: 20px;
  border: 1px solid var(--gray-200);
  background: var(--surface, #fff);
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.15s ease;
}
.evaluator-actions-categories .filter-btn:hover {
  border-color: var(--gray-300);
  color: var(--navy);
}
.evaluator-actions-categories .filter-btn.active {
  background: var(--navy, #1e293b);
  color: #fff;
  border-color: var(--navy, #1e293b);
}
.actions-audit-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.actions-audit-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.actions-audit-card:hover {
  border-color: rgba(255, 127, 80, 0.4);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.actions-audit-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.actions-audit-icon--status { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
.actions-audit-icon--eval { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.actions-audit-icon--filing { background: rgba(99, 102, 241, 0.1); color: #4f46e5; }
.actions-audit-icon--cert { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.actions-audit-icon--reject { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.actions-audit-icon--archive { background: rgba(100, 116, 139, 0.1); color: #475569; }
.actions-audit-icon--request { background: rgba(255, 127, 80, 0.12); color: #e66b3f; }
.actions-audit-icon--interview { background: rgba(20, 184, 166, 0.1); color: #0d9488; }
.actions-audit-icon--deadline { background: rgba(168, 85, 247, 0.1); color: #9333ea; }
.actions-audit-icon--comm { background: rgba(14, 165, 233, 0.1); color: #0284c7; }
.actions-audit-icon--default { background: var(--gray-100); color: var(--gray-600); }

.actions-audit-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.actions-audit-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.actions-audit-head strong {
  font-size: 0.95rem;
  color: var(--navy);
  font-weight: 700;
}
.actions-audit-time {
  font-size: 0.78rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 5px;
}
.actions-audit-desc {
  font-size: 0.85rem;
  color: var(--gray-700);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.actions-audit-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--gray-500);
  margin-top: 4px;
  flex-wrap: wrap;
}
.actions-audit-foot span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.doc-card__unavailable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-error-text, #b91c1c);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}
.reviewer-document-filter-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--color-info, #0ea5e9);
  border-radius: 8px;
  background: rgba(14, 165, 233, 0.06);
  color: var(--color-info-text, #075985);
  font-size: 0.8rem;
  font-weight: 600;
}
@media (max-width: 640px) {
  .actions-audit-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .actions-audit-icon {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }
}

/* Evaluator Actions Right Side Panel Sub-Cards */
.office-actions-eval-wrap .evaluation-content-panel {
  margin: 0;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--gray-200);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.office-actions-payment-wrap .payment-panel {
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--gray-200);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.office-actions-payment-wrap .payment-panel h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-100);
}
.office-actions-deadline-wrap .deadline-panel,
.office-actions-interview-wrap .interview-detail-panel {
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--gray-200);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.office-actions-deadline-wrap .deadline-panel h3,
.office-actions-interview-wrap .interview-detail-panel h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-100);
}

body.role-reviewer .evaluator-status-panel {
  padding: 16px;
}
body.role-reviewer .evaluator-status-panel .status-update-panel {
  margin-bottom: 0;
}

/* Listing titles are real links to /marketplace/<code>/ (crawlable, copyable)
   but must look exactly like the plain titles they replaced. */
.marketplace-title-link {
  color: inherit;
  text-decoration: none;
}
.marketplace-title-link:focus-visible {
  outline: 2px solid var(--color-focus, currentColor);
  outline-offset: 2px;
}

/* ==========================================================================
   Revision Mode Form Styles (Office Action Resolution)
   ========================================================================== */
.revision-field-note {
  margin: 12px 0 8px;
  padding: 12px 14px;
  background: #fffbeb;
  border: 1.5px solid #f59e0b;
  border-left: 5px solid #d97706;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.12);
}

.revision-field-note__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b45309;
  margin-bottom: 4px;
}

.revision-field-note__body {
  font-size: 0.875rem;
  color: #78350f;
  line-height: 1.55;
  white-space: pre-wrap;
}

.revision-field-flagged {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22) !important;
  background-color: #fffdf7 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.revision-field-flagged:focus,
.revision-field-flagged:focus-within {
  border-color: #d97706 !important;
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.3) !important;
}

.revision-scope-banner--flagged {
  border-left: 5px solid #d97706 !important;
}

.revision-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.revision-resubmit-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 20px;
  background: #fffdf5;
  border: 1.5px solid #f59e0b;
  border-radius: 12px;
  margin-top: 24px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
}

/* ==========================================================================
   Examiner Remarks Card (Placed cleanly above paper form stack)
   ========================================================================== */
.revision-remarks-card {
  margin: 16px 0 20px;
  background: #fffdf5;
  border: 1.5px solid #f59e0b;
  border-left: 5px solid #d97706;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.08);
  overflow: hidden;
}

.revision-remarks-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 18px;
  background: #fef3c7;
  border-bottom: 1px solid #fde68a;
}

.revision-remarks-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #92400e;
}

.revision-remarks-card__title i {
  color: #d97706;
  font-size: 1.05rem;
}

.revision-remarks-card__count {
  display: inline-block;
  background: #f59e0b;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}

.revision-remarks-card__hint {
  font-size: 0.8rem;
  color: #b45309;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.revision-remarks-card__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
}

.revision-remark-item {
  background: #ffffff;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.revision-remark-item__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.revision-remark-item__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #b45309;
  background: #fffbeb;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #fde68a;
}

.revision-remark-item__jump-btn {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  color: #b45309;
  border: 1px solid #f59e0b;
  background: #fffbeb;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.revision-remark-item__jump-btn:hover {
  background: #f59e0b;
  color: #ffffff;
}

.revision-remark-item__body {
  font-size: 0.86rem;
  color: #451a03;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

@keyframes revisionPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(217, 119, 6, 0.25);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
  }
}

.revision-field-pulse {
  animation: revisionPulse 0.8s ease-in-out 2 !important;
}

/* Informational service payments are separate from applicant action blockers. */
.service-payment-summary { margin: 20px 0; }
.service-payment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.payment-schedule-info-card { padding: 18px; margin: 12px 0; border: 1px solid var(--gray-200, #e2e8f0); border-radius: 12px; background: #f8fafc; overflow-wrap: anywhere; }
.payment-schedule-info-card h4 { margin: 12px 0 6px; }
.payment-schedule-info-card .schedule-badge { color: #155e75; font-weight: 700; }
.payment-schedule-info-card .schedule-amount { font-size: 1.3rem; font-weight: 700; color: var(--navy, #17324d); }
.payment-schedule-info-card .schedule-amount small { font-size: .8rem; font-weight: 400; }
.payment-schedule-info-card .schedule-instructions { white-space: pre-wrap; }
.payment-schedule-info-card .schedule-note { font-size: .86rem; color: #475569; line-height: 1.5; }
.payment-schedule-info-card .detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.service-payment-form { display: grid; gap: 14px; }
.service-payment-form input, .service-payment-form textarea, .service-payment-form select { width: 100%; box-sizing: border-box; }
/* Applicant filing navigation and existing-IP picker. */
.file-services-nav { display:flex; flex-wrap:wrap; gap:8px; padding:6px; margin:0 0 24px; width:fit-content; max-width:100%; background:#fff; border:1px solid #eadbd3; border-radius:14px; }
.file-services-nav a { display:flex; align-items:center; gap:9px; padding:12px 20px; border-radius:10px; color:#714b37; font-weight:700; text-decoration:none; }
.file-services-nav a[aria-current="page"] { color:#fff; background:#a84408; box-shadow:0 3px 8px #a8440820; }
.file-services-nav a:hover:not([aria-current]) { background:#fff3eb; }
.file-services-nav a:focus-visible, .ip-picker-modal :is(button,input,select):focus-visible { outline:3px solid #9b450d; outline-offset:3px; }
#modalOverlay .modal-card.ip-picker-modal { width:min(760px, calc(100vw - 24px)); max-width:760px; max-height:calc(100dvh - 32px); display:flex; flex-direction:column; overflow:hidden; border-radius:20px; }
.ip-picker-modal .modal-header { flex-shrink:0; padding:24px 28px 18px; }
.ip-picker-modal #modalTitle { font-size:1.4rem; line-height:1.35; padding-right:16px; }
.ip-picker-modal #modalBody { display:flex; flex-direction:column; min-height:0; overflow:hidden; padding:0; }
.ip-picker-toolbar { padding:18px 28px 12px; flex-shrink:0; }
.ip-picker-toolbar > p { margin:0 0 16px; color:#705c50; line-height:1.5; }
.ip-picker-filters { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:14px; }
.ip-picker-filters label { display:flex; flex-direction:column; gap:7px; color:#594438; font-size:.82rem; font-weight:700; }
.ip-picker-filters :is(input,select) { width:100%; min-width:0; height:44px; border:1px solid #d9c7bc; border-radius:9px; padding:0 12px !important; font:inherit; font-size:.875rem !important; font-weight:400 !important; color:#49382e; background:#fff; }
.ip-picker-toolbar .ip-picker-count { margin:12px 0 0; font-size:.8rem; color:#77675c; }
.ip-picker-records { overflow-y:auto; min-height:100px; overscroll-behavior:contain; padding:4px 28px 20px; display:grid; gap:12px; }
.ip-picker-record { border:1px solid #eadbd3; border-radius:12px; padding:18px; background:#fff; overflow-wrap:anywhere; }
.ip-picker-record:hover, .ip-picker-record:focus-within { border-color:#b85b25; background:#fffaf6; }
.ip-picker-record-top { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.ip-picker-type { border-radius:6px; background:#f9eadd; color:#873b0e; padding:4px 9px; font-size:.75rem; font-weight:700; }
.ip-picker-reference { color:#79675a; font-size:.78rem; letter-spacing:.03em; }
.ip-picker-record h4 { font-size:1.05rem; color:#463125; margin:10px 0 8px; line-height:1.4; }
.ip-picker-funding { display:flex; align-items:baseline; gap:7px; font-size:.82rem; color:#746153; margin:0 0 14px; }
.ip-picker-record .btn { min-height:40px; font-size:.85rem; gap:10px; }
.ip-picker-footer { flex-shrink:0; display:flex; flex-direction:column; align-items:flex-start; gap:8px; border-top:1px solid #eadbd3; background:#fff9f4; padding:18px 28px; }
.ip-picker-footer .btn { white-space:normal; text-align:left; }
.ip-picker-footer small { font-size:.75rem; color:#79675a; }
.ip-picker-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:32px 16px; color:#705c50; }
.ip-picker-empty > i { font-size:2rem; color:#b85b25; }
.ip-picker-empty p { max-width:380px; margin:0; }
.ip-picker-external-options { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0; }
@media (max-width:540px) {
  .file-services-nav { width:100%; }
  .file-services-nav a { flex:1; justify-content:center; padding:12px 8px; font-size:.85rem; }
  .ip-picker-modal .modal-header { padding:18px 16px 14px; }
  .ip-picker-modal #modalTitle { font-size:1.15rem; }
  .ip-picker-toolbar { padding:14px 16px 10px; }
  .ip-picker-filters { grid-template-columns:minmax(0,1fr) 130px; gap:8px; }
  .ip-picker-records { padding:4px 16px 16px; }
  .ip-picker-footer { padding:14px 16px; }
  .ip-picker-footer .btn { width:100%; font-size:.82rem; }
}

/* Service requests are regular pages, with document scrolling and Back navigation. */
.service-request-page { width:100%; max-width:1100px; margin:0 auto; min-width:0; }
.service-request-page h1 { margin:24px 0; }
.service-request-page #servicePageBody { background:var(--white, #fff); border:1px solid var(--gray-200); border-radius:16px; padding:24px; min-width:0; }
.service-request-page .ip-picker-records { overflow:visible; padding:4px 0 20px; }
.service-request-page .ip-picker-toolbar { padding:0 0 16px; }
.service-request-page .ip-picker-footer { padding:20px 0 0; }
@media (max-width:600px) {
  .service-request-page #servicePageBody { padding:16px; }
  .service-request-page .ip-picker-filters { grid-template-columns:1fr; }
}


/* ===== Service request supporting documents ===== */
.svc-docs { font-family: var(--font-sans, sans-serif); padding: 0; min-width: 0; overflow-wrap: anywhere; }
.svc-docs__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--gray-100); }
.svc-docs__title { display: flex; align-items: center; gap: 10px; }
.svc-docs__title h4 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--navy); }
.svc-docs__title-icon { display: inline-flex; align-items: center; color: var(--navy); font-size: 1.15rem; }
.svc-docs__count { font-size: 0.75rem; font-weight: 700; color: var(--green, #16a34a); background: rgba(34,197,94,0.1); padding: 4px 10px; border-radius: 999px; }
.svc-docs__upload { margin: 0 0 16px; padding: 14px 16px; background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 12px; }
.svc-docs__label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.svc-docs__input { width: 100%; max-width: 440px; padding: 8px 12px; border: 1px solid var(--gray-300, #cbd5e1); border-radius: 8px; font-size: 0.85rem; box-sizing: border-box; background: #fff; }
.svc-docs__upload-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.svc-docs__upload-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.svc-docs__hint { font-size: 0.76rem; color: var(--gray-500); }
.svc-docs__group { padding: 16px 18px; background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 10px; }
.svc-docs__group-label { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 12px; }
.svc-docs__list { display: flex; flex-direction: column; gap: 8px; }
.svc-docs__item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #fff; border: 1px solid rgba(34,197,94,0.22); border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }

.svc-docs__file-icon { flex: 0 0 auto; display: inline-flex; align-items: center; font-size: 1rem; color: var(--green, #16a34a); }
.svc-docs__info { flex: 1 1 auto; min-width: 0; }
.svc-docs__name { display: block; font-size: 0.88rem; font-weight: 600; line-height: 1.4; color: var(--navy); }
.svc-docs__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 3px; font-size: 0.75rem; color: var(--color-success-text, #15803d); }
.svc-docs__dot { color: var(--gray-300, #cbd5e1); }
.svc-docs__state { margin-left: 4px; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.svc-docs__state.is-uploaded { background: rgba(34,197,94,0.1); color: var(--color-success-text, #15803d); }
.svc-docs__state.is-submitted { background: #fff7ed; color: #9a3412; }
.svc-docs__state.is-reviewed { background: #ecfdf5; color: #047857; }
.svc-docs__actions { flex: 0 0 auto; display: flex; gap: 8px; }
.svc-docs__actions .btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 0.75rem; }
.svc-docs__unavailable { font-size: 0.78rem; color: var(--gray-500); font-style: italic; }
.svc-docs__empty { text-align: center; padding: 24px 12px; color: var(--gray-500); border: 1px dashed var(--gray-200, #e5e7eb); border-radius: 12px; }
.svc-docs__empty i { font-size: 1.6rem; color: var(--gray-300, #cbd5e1); margin-bottom: 6px; }
.svc-docs__empty p { margin: 0; font-size: 0.85rem; }
@media (max-width: 560px) {
  .svc-docs__item { flex-wrap: wrap; }
  .svc-docs__actions { width: 100%; }
  .svc-docs__actions .btn { flex: 1; justify-content: center; }
}

/* Funding organization belongs to the evaluator's My Cases workspace. */
.funding-browser { margin: 4px 24px 16px; padding: 18px; border: 1px solid var(--gray-200); border-radius: 12px; background: var(--gray-50); }
.funding-browser__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.funding-browser__header h3 { margin: 0; color: var(--navy); font-size: .9rem; font-weight: 700; }
.funding-browser__header p { margin: 4px 0 0; color: var(--gray-500); font-size: .76rem; }
.funding-browser__options { display: flex; flex-wrap: wrap; gap: 8px; }
.funding-browser__option, .funding-browser__group { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--gray-200); border-radius: 8px; background: white; color: var(--gray-600); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.funding-browser__option:hover, .funding-browser__group:hover { border-color: var(--navy); color: var(--navy); }
.funding-browser__option.is-active { background: var(--navy); border-color: var(--navy); color: white; }
.funding-browser__group { background: transparent; flex-shrink: 0; }
.funding-browser__group.is-active { background: white; border-color: var(--navy); color: var(--navy); }
.funding-browser__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; background: var(--gray-100); color: var(--gray-600); font-size: .72rem; font-variant-numeric: tabular-nums; }
.funding-browser__option.is-active .funding-browser__count { background: rgba(255,255,255,.18); color: white; }
.funding-browser button:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.funding-summary { margin-top: 8px; font-size: .72rem; line-height: 1.5; }
.funding-summary__label { display: inline-flex; align-items: center; gap: 6px; color: var(--navy); }
.funding-summary__label.is-unconfirmed { color: var(--gray-500); }
.funding-summary__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.funding-summary__funder { display: block; color: var(--gray-500); overflow-wrap: anywhere; }
.data-table .funding-group-heading th { background: var(--gray-50); color: var(--navy); padding: 12px 18px; font-size: .8rem; letter-spacing: 0; text-transform: none; border-top: 1px solid var(--gray-200); }
@media (max-width: 640px) {
  .funding-browser { margin: 4px 16px 12px; padding: 14px; }
  .funding-browser__header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .funding-browser__option { flex: 1 1 140px; justify-content: space-between; }
}

/* Keep registration work and service requests in distinct evaluator lists. */
.evaluator-request-tabs { display: flex; gap: 8px; padding: 18px 24px; border-bottom: 1px solid var(--gray-100); flex-wrap: wrap; }
.evaluator-request-tab { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--gray-200); border-radius: 9px; background: white; color: var(--gray-600); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.evaluator-request-tab.is-active { background: var(--navy); border-color: var(--navy); color: white; }
.evaluator-request-tab:hover { border-color: var(--navy); }
.evaluator-request-tab:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.evaluator-request-tab__count { padding: 1px 7px; border-radius: 5px; background: var(--gray-100); color: var(--gray-600); font-size: .75rem; font-variant-numeric: tabular-nums; }
.evaluator-request-tab.is-active .evaluator-request-tab__count { background: rgba(255,255,255,.18); color: white; }
@media (max-width: 640px) {
  .evaluator-request-tabs { padding: 14px 16px; }
  .evaluator-request-tab { flex: 1 1 160px; justify-content: center; }
}

/* Dedicated evaluator service history. */
.service-history-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.service-history-header h3 { border: 0; padding-bottom: 0; margin-bottom: 6px; }
.service-history-header p { margin: 0; font-size: .82rem; color: var(--gray-500); }
.service-history-count { flex-shrink: 0; background: var(--gray-100); color: var(--navy); border-radius: 20px; padding: 5px 10px; font-size: .75rem; font-weight: 600; }
.service-history-related { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; padding: 14px; margin-bottom: 20px; font-size: .82rem; }
.service-history-related > span { color: var(--gray-500); }
.service-history-related strong { flex: 1; color: var(--navy); overflow-wrap: anywhere; }
.service-history-list { list-style: none; margin: 0; padding: 0; }
.service-history-item { display: flex; align-items: center; gap: 14px; padding: 18px 0; border-top: 1px solid var(--gray-100); }
.service-history-icon, .service-history-empty > span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--gray-100); color: var(--navy); border-radius: 10px; flex-shrink: 0; }
.service-history-info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.service-history-info h4 { margin: 0 0 5px; color: var(--navy); font-size: .88rem; }
.service-history-info .ref-number { font-size: .76rem; }
.service-history-date { display: block; color: var(--gray-500); font-size: .75rem; margin-top: 4px; }
.service-history-empty { text-align: center; padding: 40px 20px; border: 1px dashed var(--gray-200); border-radius: 12px; }
.service-history-empty h4 { margin: 14px 0 6px; color: var(--navy); font-size: .95rem; }
.service-history-empty p { margin: 0 auto; max-width: 400px; color: var(--gray-500); font-size: .82rem; line-height: 1.6; }
@media (max-width: 640px) {
  .service-history-item { flex-wrap: wrap; gap: 10px; }
  .service-history-info { flex-basis: calc(100% - 54px); }
  .service-history-item > .btn { margin-left: auto; }
}

.evaluator-funding-panel .status-update-panel { margin: 0; padding: 0; border: 0; background: transparent; }