/* ============================================================
   WIN95 DATA APP  —  PROTOTYPE
   The interactive data application Perslis "opens" after the
   build finishes: the migrated PAYROLL data, now a working,
   clickable, question-answerable Win95 app. Same 95 aesthetic
   as perslis-demo.css (relies on its bevel variables).
   ============================================================ */

.w95-data{
  width:min(460px,80vw); height:min(340px,64vh);
  right:5%; bottom:46px;               /* second window, lower-right of the desktop */
  z-index:5;
}
.w95-data .w95-data-body{
  flex:1; margin:3px; display:flex; flex-direction:column; gap:4px;
  background:var(--w95-face); overflow:hidden;
}
.w95-data-toolbar{
  display:flex; align-items:center; gap:6px; padding:3px 4px;
  border-bottom:1px solid var(--w95-shadow); font-size:12px; color:#000;
}
.w95-data-toolbar .grow{ flex:1; }
.w95-data-toolbar .src{ color:#000080; font-weight:700; }

/* sunken data grid */
.w95-grid-wrap{
  flex:1; overflow:auto; margin:0 4px;
  background:#fff;
  border:2px solid; border-color:var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
  box-shadow:inset 1px 1px 0 var(--w95-shadow);
}
table.w95-grid{ width:100%; border-collapse:collapse; font-size:12px; color:#000; }
table.w95-grid th{
  position:sticky; top:0;
  background:var(--w95-face); text-align:left; padding:2px 6px;
  border-right:1px solid var(--w95-shadow); border-bottom:1px solid var(--w95-shadow);
  font-weight:700; white-space:nowrap;
  box-shadow:inset -1px -1px 0 var(--w95-shadow), inset 1px 1px 0 var(--w95-light);
}
table.w95-grid td{ padding:2px 6px; border-right:1px solid #e5e5e5; border-bottom:1px solid #eee; white-space:nowrap; }
table.w95-grid td.num{ text-align:right; font-variant-numeric:tabular-nums; }
table.w95-grid tr{ cursor:default; }
table.w95-grid tr.sel{ background:#000080; color:#fff; }
table.w95-grid tr.sel td{ border-color:#1a1aa0; }
table.w95-grid tr.hit{ background:#fff6b0; }
table.w95-grid tr.hit.sel{ background:#000080; color:#fff; }

/* "talk to the data" bar */
.w95-ask{
  display:flex; align-items:center; gap:5px; padding:3px 4px;
}
.w95-ask label{ font-size:12px; color:#000; }
.w95-ask input{
  flex:1; height:20px; font-family:var(--w95-font); font-size:12px; padding:1px 5px;
  background:#fff; color:#000; border:2px solid;
  border-color:var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
  box-shadow:inset 1px 1px 0 var(--w95-shadow); outline:none;
}
.w95-ask button{
  height:22px; padding:0 12px; font-family:var(--w95-font); font-size:12px; font-weight:700; color:#000;
  background:var(--w95-face); cursor:pointer; border:2px solid;
  border-color:var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow:inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 var(--w95-shadow);
}
.w95-ask button:active{ box-shadow:inset -1px -1px 0 #dfdfdf, inset 1px 1px 0 var(--w95-shadow); }

.w95-answer{
  margin:0 4px; padding:4px 8px; min-height:16px; font-size:12px; color:#003b1a;
  background:#eafff0; border:1px solid var(--w95-shadow);
}
.w95-answer .q{ color:#000080; font-weight:700; }