/* ====================================================================
   SHARED — used by both research.html (table layout) and
            resources.html (card layout)
   Shares CSS variables from style.css.
   ==================================================================== */

/* ---- active nav link ---------------------------------------------- */
.active-nav { color: var(--blue) !important; }

.dropdown-toggle.active-nav { color: var(--blue); }

/* ====================================================================
   RESEARCH PAGE — single large window with a filterable table
   ==================================================================== */

.res-stage {
  max-width: 860px;
  margin: 0 auto 48px;
  padding: 0 24px;
}

.res-window {
  position: static;
  width: 100%;
}

/* ---- tab strip ---------------------------------------------------- */
.res-tabs {
  display: flex;
  border-bottom: 0.5px solid var(--border);
  background: var(--bar);
  padding: 0 10px;
}

.res-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
  padding: 8px 14px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -0.5px;
}
.res-tab:hover { color: var(--text); }
.res-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

/* ---- table -------------------------------------------------------- */
.res-table { table-layout: fixed; }

.res-table th:nth-child(1),
.res-table td:nth-child(1) { width: 22%; }

.res-table th:nth-child(2),
.res-table td:nth-child(2) { width: 10%; }

.res-table th:nth-child(3),
.res-table td:nth-child(3) { width: 58%; }

.res-table th:nth-child(4),
.res-table td:nth-child(4) { width: 10%; }

.res-desc { font-size: 11.5px; }

tr.res-hidden { display: none; }

/* ---- badges ------------------------------------------------------- */
.res-badge {
  display: inline-block;
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 3px;
  border: 0.5px solid;
}

.badge-code {
  color: var(--blue);
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
}

.badge-writing {
  color: var(--amber);
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}

.badge-tool {
  color: var(--green);
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

.badge-game {
  color: var(--green);
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

.badge-wip {
  color: var(--text-dim);
  border-color: var(--border);
  background: transparent;
}

/* ====================================================================
   RESOURCES PAGE — card grid layout
   ==================================================================== */

.tools-stage {
  max-width: 900px;
  margin: 0 auto 56px;
  padding: 0 24px;
}

/* 2-up grid on desktop, single column on mobile */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

/* ---- individual card ---------------------------------------------- */
.tool-card {
  border: 0.5px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
  box-shadow: 0 4px 16px var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.tool-card:hover {
  border-color: var(--blue);
  box-shadow: 0 6px 24px var(--shadow);
}

/* dimmed style for work-in-progress cards */
.tool-card--wip {
  opacity: 0.65;
}
.tool-card--wip:hover {
  border-color: var(--border);
  opacity: 0.8;
}

.tool-card-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  background: var(--bar);
  border-bottom: 0.5px solid var(--border);
}

.tool-card-body {
  padding: 18px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tool-desc {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text);
  flex: 1;
}

.tool-link {
  font-size: 12px;
  color: var(--blue);
  text-decoration: none;
  align-self: flex-start;
  border: 0.5px solid var(--blue);
  border-radius: 4px;
  padding: 5px 12px;
  transition: background 0.15s, color 0.15s;
}
.tool-link:hover {
  background: var(--blue);
  color: var(--bg);
  text-decoration: none;
}
.tool-link.muted {
  color: var(--text-dim);
  border-color: var(--border);
  cursor: default;
}
.tool-link.muted:hover {
  background: none;
  color: var(--text-dim);
}

/* ====================================================================
   MOBILE
   ==================================================================== */
@media (max-width: 900px) {
  .res-stage  { padding: 0 12px; }
  .tools-stage { padding: 0 12px; }

  /* single column cards */
  .tools-grid { grid-template-columns: 1fr; }

  /* collapse description column in the research table */
  .res-desc-col,
  .res-desc { display: none; }

  .res-table th:nth-child(1),
  .res-table td:nth-child(1) { width: 55%; }

  .res-table th:nth-child(2),
  .res-table td:nth-child(2) { width: 25%; }

  .res-table th:nth-child(4),
  .res-table td:nth-child(4) { width: 20%; }
}