/* =========================================================
   dashboard.css — styles for the index.html landing dashboard.
   Reuses tokens from base.css; introduces .dash-* only.
   ========================================================= */

.dash-hero{ margin: 32px 0 24px; }

/* --- status card: one clear, actionable state --- */
.dash-status-card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px 24px;
  margin-bottom: 36px;
}

.dash-status-tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.dash-status-card.is-empty .dash-status-tag{ background: var(--surface-2); color: var(--ink-soft); }
.dash-status-card.is-draft .dash-status-tag{ background: var(--amber-dim); color: var(--amber); }
.dash-status-card.is-submitted .dash-status-tag{ background: var(--green-dim); color: var(--green); }
.dash-status-card.is-error .dash-status-tag{ background: var(--red-dim); color: var(--red); }

.dash-status-card h2{ margin-bottom: 6px; }
.dash-status-card p{ margin-bottom: 16px; max-width: 60ch; }
.dash-status-cta{ display: inline-block; text-decoration: none; }

/* --- tool cards --- */
.dash-tools{ margin-bottom: 48px; }

.dash-stats{
  display: flex;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 10px;
}
.dash-stats .fp-stat{
  flex: 1;
  padding: 16px 18px;
  text-align: left;
}
.dash-stats .fp-stat-cta{
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-micro, .15s) var(--ease-out, ease);
}
.dash-stats .fp-stat-cta:hover{ background: var(--violet-dim); text-decoration: none; }
.dash-stats .fp-stat-cta .fp-stat-value{ color: var(--violet-text); }
@media (max-width: 560px){
  .dash-stats{ flex-wrap: wrap; }
  .dash-stats .fp-stat{ flex: 1 1 45%; }
}

.dash-stats-freshness{
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-faint);
  margin: 0 0 40px;
}

.dash-tool-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 780px){
  .dash-tool-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .dash-tool-grid{ grid-template-columns: 1fr; }
}

.dash-tool-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
  min-height: 168px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}

/* Real content sits above the glow layer below it, regardless of
   DOM/stacking-context quirks -- explicit, not relying on default
   pseudo-element ordering. */
.dash-tool-card > *{ position: relative; z-index: 1; }

/* Cursor-tracking grid glow -- a faint grid pattern, invisible at
   rest, revealed only in a soft circle around the cursor via a
   radial-gradient mask. --mx/--my are set by js/dashboard.js's
   initCursorGlow() on mousemove (in px, relative to the element's
   own top-left) and default to center so nothing looks broken
   before the first mousemove fires.

   Shared mechanics across all three places this is used
   (.dash-tool-card, the "Recently saved forms" panel via
   .fp-dash-glow, and the KPI strip via .dash-stats .fp-stat) --
   color is the ONE thing that varies between them, controlled by
   --glow-line-color (default: violet; .glow-red overrides it).
   Applying the effect somewhere new should mean adding one
   selector to this list, not copy-pasting the whole block. */
.dash-tool-card,
.fp-dash-glow,
.dash-stats .fp-stat{
  position: relative;
  overflow: hidden;
}
.dash-tool-card > *,
.fp-dash-glow > *,
.dash-stats .fp-stat > *{ position: relative; z-index: 1; }

.dash-tool-card::before,
.fp-dash-glow::before,
.dash-stats .fp-stat::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  --glow-line-color: rgba(110,118,240,.5); /* violet, the default */
  background-image:
    linear-gradient(var(--glow-line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--glow-line-color) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle 110px at var(--mx, 50%) var(--my, 50%), black 0%, transparent 100%);
          mask-image: radial-gradient(circle 110px at var(--mx, 50%) var(--my, 50%), black 0%, transparent 100%);
  opacity: 0;
  transition: opacity var(--dur-small) var(--ease-out);
}
.dash-tool-card:hover::before,
.fp-dash-glow:hover::before,
.dash-stats .fp-stat:hover::before{ opacity: 1; }

/* Crimson variant -- applied via an extra .glow-red class, not a
   second copy of the mechanics above. Deliberately not var(--red)
   (that token means "error" everywhere else in this app -- reusing
   it here would make a purely decorative card look like it's
   signaling a problem). This is a real crimson, not the app's
   semantic red.

   Each selector here deliberately matches the specificity of its
   corresponding shared-mechanics selector above (both are two
   classes + a pseudo-element for the KPI strip case, etc) rather
   than relying on source order to decide the winner -- a plain
   ".glow-red::before" is LOWER specificity than ".dash-stats
   .fp-stat::before" (one class vs two), so it silently lost every
   time regardless of which rule was written later, and the KPI
   strip rendered violet instead of red. Confirmed via
   getComputedStyle, not guessed at -- same class of bug already
   hit twice before with the focus-ring work; matching specificity
   explicitly here instead of hoping order wins. */
.dash-tool-card.glow-red::before,
.fp-dash-glow.glow-red::before,
.dash-stats .fp-stat.glow-red::before{
  --glow-line-color: rgba(220,20,60,.55);
}

/* Per-card neon border glow -- a persistent (not hover-only) colored
   border + soft outer glow, one distinct hue per tool card, applied
   in the same order the cards appear in the DOM. Layered on top of
   (not replacing) the cursor-tracking grid effect above -- these
   also override --glow-line-color so that inner effect matches the
   card's own color instead of staying the shared default violet.

   Deliberately a muted, jewel-tone palette rather than saturated
   neon/candy colors (bright pink, pure yellow, etc.) -- those read
   as gaudy on a professional counselling tool. Each hue is a deeper,
   more restrained shade of the same idea (e.g. wine instead of hot
   pink, amber instead of neon orange), and the glow itself is
   softer -- lower opacity, tighter blur -- than a typical loud
   "AI demo" glow effect. */
.dash-tool-card.glow-violet{  border-color: rgba(124,92,255,.5); box-shadow: 0 0 10px rgba(124,92,255,.16); --glow-line-color: rgba(124,92,255,.45); }
.dash-tool-card.glow-teal{    border-color: rgba(13,148,136,.5);  box-shadow: 0 0 10px rgba(13,148,136,.16);  --glow-line-color: rgba(13,148,136,.45); }
.dash-tool-card.glow-wine{    border-color: rgba(159,18,57,.5);   box-shadow: 0 0 10px rgba(159,18,57,.16);   --glow-line-color: rgba(159,18,57,.45); }
.dash-tool-card.glow-emerald{ border-color: rgba(5,150,105,.5);   box-shadow: 0 0 10px rgba(5,150,105,.16);   --glow-line-color: rgba(5,150,105,.45); }
.dash-tool-card.glow-amber{   border-color: rgba(180,83,9,.5);    box-shadow: 0 0 10px rgba(180,83,9,.16);    --glow-line-color: rgba(180,83,9,.45); }
.dash-tool-card.glow-indigo{  border-color: rgba(79,70,229,.5);   box-shadow: 0 0 10px rgba(79,70,229,.16);   --glow-line-color: rgba(79,70,229,.45); }
.dash-tool-card.glow-gold{    border-color: rgba(161,98,7,.5);    box-shadow: 0 0 10px rgba(161,98,7,.16);    --glow-line-color: rgba(161,98,7,.45); }

/* Hover intensifies each card's own color instead of falling back
   to the neutral --border-strong the base :hover rule below sets --
   these need to win over that shared rule, so they're written after
   it in source order at matching specificity (one class + :hover). */
.dash-tool-card.glow-violet:hover{  border-color: rgba(124,92,255,.85); box-shadow: 0 8px 20px rgba(124,92,255,.22); }
.dash-tool-card.glow-teal:hover{    border-color: rgba(13,148,136,.85);  box-shadow: 0 8px 20px rgba(13,148,136,.22); }
.dash-tool-card.glow-wine:hover{    border-color: rgba(159,18,57,.85);   box-shadow: 0 8px 20px rgba(159,18,57,.22); }
.dash-tool-card.glow-emerald:hover{ border-color: rgba(5,150,105,.85);   box-shadow: 0 8px 20px rgba(5,150,105,.22); }
.dash-tool-card.glow-amber:hover{   border-color: rgba(180,83,9,.85);    box-shadow: 0 8px 20px rgba(180,83,9,.22); }
.dash-tool-card.glow-indigo:hover{  border-color: rgba(79,70,229,.85);   box-shadow: 0 8px 20px rgba(79,70,229,.22); }
.dash-tool-card.glow-gold:hover{    border-color: rgba(161,98,7,.85);    box-shadow: 0 8px 20px rgba(161,98,7,.22); }

.dash-tool-card:hover{
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  text-decoration: none;
}
.dash-tool-card:active{ transform: translateY(-1px); transition-duration: 60ms; }

.dash-tool-glyph{
  color: var(--violet-text);
  font-size: .95rem;
  margin-bottom: 8px;
}

.dash-tool-card h3{ margin-bottom: 5px; font-size: .96rem; line-height: 1.25; }
.dash-tool-card p{
  font-size: .82rem; margin-bottom: 12px; flex: 1; line-height: 1.4;
  /* Caps descriptions at 2 lines so one longer blurb can't stretch
     its whole grid row taller than the rest -- every card ends up
     the same height regardless of how much text a description has. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dash-tool-cta{
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--violet-text);
}