/* MS workspace — shared UI polish layer. Loaded on every page after the
 * Tailwind Play CDN. Pure presentation: no layout or behavior changes, and
 * print output stays plain (see the print block at the bottom). */

/* ---- Typography ---- */
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { letter-spacing: -0.02em; }

/* ---- Ambient background: soft glows in the two brand accents ---- */
body {
  background-color: #f8fafc;
  background-image:
    radial-gradient(55rem 28rem at 88% -12%, rgba(99, 102, 241, 0.09), transparent 60%),
    radial-gradient(45rem 24rem at -12% 112%, rgba(13, 148, 136, 0.07), transparent 60%);
  background-attachment: fixed;
}

/* ---- Cards: layered, softer elevation wherever shadow-sm is used ---- */
.shadow-sm {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 12px 32px -16px rgba(15, 23, 42, 0.18) !important;
}

/* ---- Primary actions: gradient, glow, gentle lift ---- */
.bg-indigo-700 {
  background-image: linear-gradient(180deg, #6366f1 0%, #4f46e5 55%, #4338ca 100%);
  box-shadow:
    0 10px 24px -10px rgba(67, 56, 202, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
a.bg-indigo-700:hover, button.bg-indigo-700:hover, label.bg-indigo-700:hover {
  filter: saturate(1.05) brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px -10px rgba(67, 56, 202, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
a.bg-indigo-700:active, button.bg-indigo-700:active { transform: translateY(0); }
button:disabled { transform: none !important; filter: none !important; }

/* Everything interactive moves smoothly (Tailwind's own transition classes
   win where present — this is just the baseline). */
a, button, label, select { transition: all 0.16s ease; }

/* Outlined secondary buttons lift too */
a[class*="border-indigo-700"]:hover { transform: translateY(-1px); }

/* ---- Progress bars: gradient fill ---- */
#progressFill, .h-4.rounded-full.bg-indigo-600 {
  background-image: linear-gradient(90deg, #6366f1, #4f46e5);
  box-shadow: 0 2px 8px -2px rgba(79, 70, 229, 0.5);
}

/* ---- Glassier sticky headers, frosted modal backdrops ---- */
.backdrop-blur {
  backdrop-filter: blur(14px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.5) !important;
}
.bg-slate-900\/50 {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* ---- Brand overlines ("MARKET SHARE · …"): two-tone gradient text ---- */
.tracking-widest.text-indigo-700 {
  background-image: linear-gradient(90deg, #4f46e5, #0d9488);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* ---- Small touches ---- */
.priority-btn[aria-pressed="true"] {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px rgba(15, 23, 42, 0.35);
}
.rank-row:hover { background-color: rgba(99, 102, 241, 0.045); }
textarea:focus, input:focus, select:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14); }
::selection { background: rgba(99, 102, 241, 0.18); }
:focus-visible { outline: 2px solid rgba(99, 102, 241, 0.55); outline-offset: 2px; }

/* Category-pill strip: slim, quiet scrollbar */
#catNav { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, 0.35) transparent; }
#catNav::-webkit-scrollbar { height: 6px; }
#catNav::-webkit-scrollbar-thumb { border-radius: 9999px; background: rgba(100, 116, 139, 0.35); }

/* ---- Gentle page entrance ---- */
@media (prefers-reduced-motion: no-preference) {
  #statusCard, #content, #questionArea, #thoughtCols, #fileList, #editor {
    animation: ms-fade-up 0.45s ease both;
  }
  @keyframes ms-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ---- Print: drop every decoration ---- */
@media print {
  body { background: white !important; }
  .shadow-sm { box-shadow: none !important; }
  .bg-indigo-700 { background-image: none; box-shadow: none; }
  .tracking-widest.text-indigo-700 {
    color: #4338ca !important;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
  }
  * { animation: none !important; }
}