/* ==========================================================================
   NEURO-AURORA — the single house style for rasendracare.com + plagcheck
   Neumorphism (soft extruded surfaces, no hard borders) with a light aurora
   wash inside every card. Ships in both a bright and a dark scheme.
   Replaces the 33-style picker entirely.
   ========================================================================== */

/* ---------- BRIGHT (default) --------------------------------------------- */
:root,
:root[data-theme="light"] {
  --n-bg:        #E7ECF4;
  --n-bg-2:      #E1E7F0;
  --n-surface:   #E7ECF4;          /* neumorphism: surface == ground */
  --n-ink:       #232A38;
  --n-ink-soft:  #384254;
  --n-mute:      #556073;
  --n-accent:    #2F6F7E;
  --n-accent-2:  #7C5CD6;
  --n-on-accent: #FFFFFF;

  --n-lo:        #C4CBD9;          /* shadow side  */
  --n-hi:        #FFFFFF;          /* highlight side */

  --n-out:   8px 8px 18px var(--n-lo), -8px -8px 18px var(--n-hi);
  --n-out-sm: 5px 5px 11px var(--n-lo), -5px -5px 11px var(--n-hi);
  --n-out-lg: 14px 14px 30px var(--n-lo), -14px -14px 30px var(--n-hi);
  --n-in:    inset 6px 6px 12px var(--n-lo), inset -6px -6px 12px var(--n-hi);
  --n-in-sm: inset 3px 3px 7px var(--n-lo), inset -3px -3px 7px var(--n-hi);

  --n-radius:    22px;
  --n-radius-sm: 14px;
  --n-spring:    cubic-bezier(.16, 1, .3, 1);

  /* the aurora wash that sits inside every card */
  --n-aurora:
    radial-gradient(62% 58% at 16% 14%, rgba(64, 196, 180, .17), transparent 62%),
    radial-gradient(58% 54% at 86% 18%, rgba(140, 118, 240, .15), transparent 64%),
    radial-gradient(64% 58% at 62% 94%, rgba(245, 178, 120, .13), transparent 62%);
}

/* ---------- DARK ---------------------------------------------------------- */
:root[data-theme="dark"] {
  --n-bg:        #1E232D;
  --n-bg-2:      #1A1F28;
  --n-surface:   #1E232D;
  --n-ink:       #E8EEF8;
  --n-ink-soft:  #D2DAE8;
  --n-mute:      #A7B3C6;
  --n-accent:    #5EC8D8;
  --n-accent-2:  #A78BFA;
  --n-on-accent: #0E1319;

  --n-lo:        #141920;
  --n-hi:        #2A313E;

  --n-aurora:
    radial-gradient(62% 58% at 16% 14%, rgba(94, 234, 212, .13), transparent 62%),
    radial-gradient(58% 54% at 86% 18%, rgba(167, 139, 250, .13), transparent 64%),
    radial-gradient(64% 58% at 62% 94%, rgba(251, 191, 136, .09), transparent 62%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --n-bg:#1E232D; --n-bg-2:#1A1F28; --n-surface:#1E232D;
    --n-ink:#E8EEF8; --n-ink-soft:#D2DAE8; --n-mute:#A7B3C6;
    --n-accent:#5EC8D8; --n-accent-2:#A78BFA; --n-on-accent:#0E1319;
    --n-lo:#141920; --n-hi:#2A313E;
    --n-aurora:
      radial-gradient(62% 58% at 16% 14%, rgba(94,234,212,.13), transparent 62%),
      radial-gradient(58% 54% at 86% 18%, rgba(167,139,250,.13), transparent 64%),
      radial-gradient(64% 58% at 62% 94%, rgba(251,191,136,.09), transparent 62%);
  }
}

/* ==========================================================================
   SHARED PRIMITIVES
   ========================================================================== */

body {
  background: var(--n-bg) !important;
  color: var(--n-ink) !important;
}

/* neutralise the old aurora/bento fields so they cannot fight this one */
.hero::before, .hero::after, .section.alt::before, main::before { display: none !important; }

/* ---- the card recipe: flat surface + dual shadow + aurora wash ----------- */
.service-card, .value-item, .quote-card, .portfolio-item, .pricing-card,
.contact-form, .hero-stage, .about-frame, .newsletter,
main .grid.gap-4.md\:grid-cols-4 > *,
main .overflow-x-auto,
main .rounded-lg.border, main .rounded-xl.border {
  background-color: var(--n-surface) !important;
  background-image: var(--n-aurora) !important;
  border: none !important;
  border-radius: var(--n-radius) !important;
  box-shadow: var(--n-out) !important;
  transition: box-shadow .4s var(--n-spring), transform .4s var(--n-spring);
}

.service-card:hover, .value-item:hover, .quote-card:hover,
.portfolio-item:hover, .pricing-card:hover,
main .grid.gap-4.md\:grid-cols-4 > *:hover {
  box-shadow: var(--n-out-lg) !important;
  transform: translateY(-3px);
}

/* soft extruded icons */
.service-icon, .value-icon, .info-icon, .quote-avatar {
  background: var(--n-surface) !important;
  background-image: var(--n-aurora) !important;
  border: none !important;
  border-radius: var(--n-radius-sm) !important;
  box-shadow: var(--n-out-sm) !important;
  color: var(--n-accent) !important;
}

/* ---- buttons: extruded, pressed on click -------------------------------- */
.btn, .book-button, main button:not([role="tab"]) {
  border-radius: var(--n-radius-sm) !important;
  transition: box-shadow .25s var(--n-spring), transform .25s var(--n-spring);
}
.btn-primary, .book-button {
  background: var(--n-accent) !important;
  background-image: none !important;
  color: var(--n-on-accent) !important;
  border: none !important;
  box-shadow: var(--n-out-sm) !important;
}
.btn-primary:active, .book-button:active,
.btn-outline:active { box-shadow: var(--n-in-sm) !important; transform: translateY(1px); }
.btn-outline {
  background: var(--n-surface) !important;
  color: var(--n-ink) !important;
  border: none !important;
  box-shadow: var(--n-out-sm) !important;
}

/* ---- inputs: pressed wells ---------------------------------------------- */
input, textarea, select,
.form-group input, .form-group textarea, .newsletter-form input,
header input[type="search"], header input[placeholder*="Search"] {
  background: var(--n-surface) !important;
  border: none !important;
  border-radius: var(--n-radius-sm) !important;
  box-shadow: var(--n-in-sm) !important;
  color: var(--n-ink) !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  box-shadow: var(--n-in-sm), 0 0 0 3px color-mix(in srgb, var(--n-accent) 40%, transparent) !important;
}

/* ---- headers ------------------------------------------------------------- */
header {
  background: var(--n-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: 0 6px 18px -10px var(--n-lo) !important;
}

/* ---- type ---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.hero-copy h1, .section-head h2, .stage-title, .about-text h2,
main h1, main .text-3xl, main .font-bold,
.service-card h3, .value-item h3, .portfolio-content h3 { color: var(--n-ink) !important; }

p, li, .section-head p, .hero-copy > p, .stat-label, .form-hint,
.service-card p, .value-item p, .service-features li, .portfolio-meta,
.quote-who, main p.text-muted-foreground, main .text-muted-foreground,
main .text-sm.text-muted-foreground, main .text-xs.text-muted-foreground { color: var(--n-mute) !important; }

.accent-word, .hero-copy h1 .accent-word,
.stat .stat-num, .stat-num, .pricing-amount, .eyebrow {
  color: var(--n-accent) !important;
  -webkit-text-fill-color: var(--n-accent) !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
}

/* ==========================================================================
   RASENDRACARE.COM — logo lockup + trim
   ========================================================================== */

.logo { display:flex !important; align-items:center !important; gap:.6rem !important; }
.logo a { display:flex !important; align-items:center !important; gap:.6rem !important; text-decoration:none; }
.logo .site-name {
  white-space: nowrap;
  line-height: 1 !important;
  font-size: 1.16rem !important;
  letter-spacing: -.018em !important;
  color: var(--n-ink) !important;
}

/* ---- the mark, in all three placements ---------------------------------
   Sized on the image itself, never on a wrapper: the footer copy has no <a>
   around it, so an earlier rule keyed to `.logo a:first-child` let the image
   size off the whole footer block and blow up. Each placement gets an explicit
   box so it floats on its own soft disc rather than sitting in a hard frame. */

/* header + footer: a small circular puck */
.logo img,
img.site-logo,
.rc-mark--header,
.rc-mark--footer {
  width: 44px !important;
  height: 44px !important;
  flex: none;
  box-sizing: border-box;
  padding: 5px;
  border-radius: 50%;
  object-fit: contain;
  background-color: var(--n-surface);
  background-image: var(--n-aurora);
  box-shadow: var(--n-out-sm);
  display: block;
}

/* neutralise the old anchor-disc so it does not double up */
.logo a:first-child {
  width: auto !important;
  height: auto !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
}

/* about section: the emblem as a large floating medallion */
.about-frame {
  background-color: var(--n-surface) !important;
  background-image: var(--n-aurora) !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: var(--n-out-lg) !important;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 40px);
  overflow: hidden;
}
.about-frame img,
.rc-mark--feature {
  width: 100% !important;
  height: 100% !important;
  max-width: 420px;
  object-fit: contain !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: block;
}

/* the footer wordmark ships with an inline color:#fff, invisible on the
   light footer ground */
footer .site-name,
footer .logo .site-name { color: var(--n-ink) !important; }

.nav-links > li > a { color: var(--n-mute) !important; }
.nav-links > li > a:hover, .nav-links > li > a.active { color: var(--n-accent) !important; }
.topbar { background: var(--n-bg-2) !important; color: var(--n-mute) !important; }
.topbar a { color: var(--n-accent) !important; }
.section.alt { background: var(--n-bg-2) !important; }
.hero { background: var(--n-bg) !important; }
footer { background: var(--n-bg-2) !important; color: var(--n-mute) !important; box-shadow: 0 -6px 18px -12px var(--n-lo); }
footer h4, footer .footer-brand { color: var(--n-ink) !important; }
footer a { color: var(--n-mute) !important; }
footer a:hover { color: var(--n-accent) !important; }
.hero-chip, .portfolio-cat, .about-badge {
  background: var(--n-surface) !important;
  box-shadow: var(--n-out-sm) !important;
  border: none !important;
  border-radius: 999px !important;
  color: var(--n-ink) !important;
}
.balance-core { background: var(--n-accent) !important; box-shadow: var(--n-out-sm) !important; }
.quote-stars { color: var(--n-accent) !important; }
.quote-avatar { color: var(--n-on-accent) !important; background: var(--n-accent) !important; background-image: none !important; }

/* ==========================================================================
   PLAGCHECK DASHBOARD
   ========================================================================== */

/* KPI numerals stay Swiss + tabular */
main .grid.gap-4.md\:grid-cols-4 .text-3xl.font-bold,
main .grid.gap-4.md\:grid-cols-4 .text-2xl.font-bold {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  color: var(--n-ink) !important;
}
main .grid.gap-4.md\:grid-cols-4 .text-sm.font-medium {
  text-transform: uppercase; letter-spacing: .09em;
  font-size: .72rem !important; font-weight: 700 !important;
  color: var(--n-mute) !important;
}

/* sidebar as one soft panel */
aside:not(.rasendra-admin-sidebar) {
  background: var(--n-bg-2) !important;
  border-right: none !important;
  box-shadow: 6px 0 18px -12px var(--n-lo) !important;
}
aside:not(.rasendra-admin-sidebar) nav a,
aside:not(.rasendra-admin-sidebar) nav button {
  color: var(--n-ink-soft) !important;
  font-weight: 600 !important; font-size: 13.5px !important;
  border: none !important; border-radius: var(--n-radius-sm) !important;
  background: transparent !important;
}
aside:not(.rasendra-admin-sidebar) nav a:hover,
aside:not(.rasendra-admin-sidebar) nav button:hover {
  background: var(--n-surface) !important;
  box-shadow: var(--n-out-sm) !important;
  color: var(--n-accent) !important;
  transform: none !important;
}
aside:not(.rasendra-admin-sidebar) nav a[aria-current="page"],
aside:not(.rasendra-admin-sidebar) nav a.bg-primary,
aside:not(.rasendra-admin-sidebar) nav a.text-primary-foreground {
  background: var(--n-accent) !important;
  background-image: none !important;
  color: var(--n-on-accent) !important;
  box-shadow: var(--n-out-sm) !important;
}
aside:not(.rasendra-admin-sidebar) .border-t {
  background: var(--n-bg-2) !important;
  border-top: none !important;
  box-shadow: 0 -6px 14px -12px var(--n-lo) !important;
}

/* table lives inside one soft panel; rows are quiet */
main table thead th {
  background: transparent !important;
  color: var(--n-mute) !important;
  font-size: .74rem !important; font-weight: 800 !important;
  letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 1px solid color-mix(in srgb, var(--n-mute) 22%, transparent) !important;
}
main table tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--n-mute) 12%, transparent) !important; }
main table tbody tr:hover {
  background: color-mix(in srgb, var(--n-accent) 9%, transparent) !important;
  box-shadow: none !important;
}
main table tbody td { color: var(--n-ink) !important; }
main table tbody td .text-xs,
main table tbody td .text-sm.text-muted-foreground { color: var(--n-mute) !important; font-size:.8rem !important; }

/* tabs: a pressed well holding an extruded active pill */
main [role="tablist"] {
  background: var(--n-surface) !important;
  box-shadow: var(--n-in-sm) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: .3rem !important;
}
main [role="tab"] {
  border-radius: 999px !important;
  color: var(--n-mute) !important;
  font-weight: 650 !important;
  background: transparent !important;
  box-shadow: none !important;
}
main [role="tab"][aria-selected="true"], main [role="tab"][data-state="active"] {
  background: var(--n-accent) !important;
  color: var(--n-on-accent) !important;
  box-shadow: var(--n-out-sm) !important;
}

/* similarity meters are literal neumorphic wells */
.pb-meter { background: var(--n-surface) !important; box-shadow: var(--n-in-sm) !important; }
.pb-pill { border-radius: 999px !important; }

/* ==========================================================================
   LAYOUT REPAIR — the empty band beside the sidebar
   The app's own contract is: <aside> is `fixed left-0 top-0 w-64`, the header
   is fixed at `left: var(--sidebar-width)`, and <main> carries an inline
   `padding-left: 16rem` (4rem collapsed, 0 on mobile).
   plagcheck-suite.css breaks both halves of that: it forces the aside to
   `position: relative` (dropping it back into flow) and zeroes main's
   padding-left. Result: the sidebar eats 16rem of layout AND the content
   offset is gone, so content sits under the sidebar with a dead band beside it.
   Restore the app's contract and drive the offset from --sidebar-width, which
   the app keeps in sync on resize and collapse.
   ========================================================================== */

aside:not(.rasendra-admin-sidebar) {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  height: 100vh !important;
}

@media (min-width: 1024px) {
  main {
    padding-left: var(--sidebar-width, 16rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: none !important;
    transition: padding-left .3s cubic-bezier(.16,1,.3,1);
  }
}

@media (max-width: 1023px) {
  aside:not(.rasendra-admin-sidebar) { position: fixed !important; }
  main {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   THEME TOGGLE
   ========================================================================== */

#rc-theme-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 2147483000;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--n-surface); color: var(--n-ink);
  box-shadow: var(--n-out-sm);
  display: grid; place-items: center; font-size: 19px; line-height: 1;
  transition: box-shadow .25s var(--n-spring), transform .25s var(--n-spring);
}
#rc-theme-toggle:hover { transform: translateY(-2px); box-shadow: var(--n-out); }
#rc-theme-toggle:active { box-shadow: var(--n-in-sm); transform: translateY(0); }

/* ==========================================================================
   A11Y & MOTION
   ========================================================================== */

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--n-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  #rc-theme-toggle { display: none !important; }
  .service-card, .quote-card, main .overflow-x-auto { box-shadow: none !important; }
}

/* ==========================================================================
   TRAILING FIXES
   ========================================================================== */

/* the account line under the sidebar measured 3.3:1 in dark, 3.8:1 in bright */
aside:not(.rasendra-admin-sidebar) .border-t .text-xs,
aside:not(.rasendra-admin-sidebar) .border-t .text-muted-foreground,
aside:not(.rasendra-admin-sidebar) .border-t p,
aside:not(.rasendra-admin-sidebar) .border-t span {
  color: var(--n-ink-soft) !important;
  font-weight: 500 !important;
}

/* plagcheck-suite.css paints a coloured gradient rail on top of each KPI tile;
   it fights the single neumorphic surface, so retire it */
main div.grid:has(> div:nth-child(4)) > div::before,
main .grid.gap-4.md\:grid-cols-4 > *::before { display: none !important; }

/* keep tab items from crowding when the app's own spacing is stripped */
main [role="tablist"] { display: inline-flex; gap: .25rem; align-items: center; }
main [role="tab"] { padding: .45rem 1rem !important; white-space: nowrap; }

/* ==========================================================================
   LOGO SAFE AREA IN DARK MODE
   The emblem is dark-green ink drawn for light grounds — on the dark surface
   it measures roughly 1.3:1 and turns to mud. Give it a light puck (what a
   brand book would call the logo's safe area) so it keeps ~8:1 in both themes.
   ========================================================================== */

:root[data-theme="dark"] .rc-mark,
:root[data-theme="dark"] .logo img,
:root[data-theme="dark"] img.site-logo {
  background-color: #EDF1F7 !important;
  background-image: radial-gradient(70% 70% at 30% 25%, rgba(94,200,216,.20), transparent 70%) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.10) !important;
}

:root[data-theme="dark"] .about-frame {
  background-color: #EDF1F7 !important;
  background-image:
    radial-gradient(62% 58% at 16% 14%, rgba(64,196,180,.20), transparent 62%),
    radial-gradient(58% 54% at 86% 18%, rgba(140,118,240,.16), transparent 64%),
    radial-gradient(64% 58% at 62% 94%, rgba(245,178,120,.14), transparent 62%) !important;
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rc-mark,
  :root:not([data-theme="light"]) .logo img,
  :root:not([data-theme="light"]) img.site-logo {
    background-color: #EDF1F7 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.10) !important;
  }
  :root:not([data-theme="light"]) .about-frame {
    background-color: #EDF1F7 !important;
    box-shadow: 0 26px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08) !important;
  }
}