/* =========================================================================
   tools.css — tools.html only ("My tools", the staff directory)
   =========================================================================
   Page-specific extension on top of hub.css's .etac-grid/.etac-tile family
   and friends.css, same pattern as classes.css. Unlike insights.html (which
   is deliberately off-brand), this page IS seen by teachers, so it keeps the
   site's card language rather than inventing a second one.
   ========================================================================= */

/* Tool tiles reuse .etac-tile wholesale; only the icon slot differs. */
.tl-ico {
  display: grid; place-items: center;
  font-size: 22px; line-height: 1;
}

.tl-locked { margin-top: var(--space-22); }

/* ---------- Request rows ------------------------------------------------ */
.tl-req {
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--border);
}
.tl-req:last-child { border-bottom: none; }
.tl-req__head { display: flex; align-items: center; gap: var(--space-12); }
.tl-req__ico {
  width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 17px; border-radius: var(--radius-md);
  background: var(--bg-input); border: 1px solid var(--border);
  /* Locked tools read as muted, so the unlocked grid above stays the focus. */
  filter: grayscale(1); opacity: .75;
}
.tl-req__ico .etac-ico { width: 18px; height: 18px; }
.tl-req__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tl-req__name { font: 650 14px var(--fsans); color: var(--text); }
.tl-req__blurb { font: 400 12.5px/1.45 var(--fsans); color: var(--text-muted); }
.tl-req__btn { flex-shrink: 0; font-size: 12.5px; padding: var(--space-8) var(--space-14); }
.tl-req__pending {
  flex-shrink: 0; font: 700 11px var(--fsans); letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-dim);
  padding: var(--space-7) 11px; border: 1px dashed var(--border-hover); border-radius: 9px;
}

.tl-req__form { display: flex; gap: var(--space-8); margin: var(--space-10) 0 var(--space-2) 45px; }
.tl-req__form[hidden] { display: none; }
.tl-req__form input {
  flex: 1; min-width: 0;
  font: 500 13px var(--fsans); color: var(--text);
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-9) 11px;
}
.tl-req__form input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.tl-req__send { flex-shrink: 0; font-size: 12.5px; padding: var(--space-8) var(--space-16); }

@media (max-width: 560px) {
  .tl-req__head { flex-wrap: wrap; }
  .tl-req__btn, .tl-req__pending { margin-left: 45px; }
  .tl-req__form { margin-left: 0; flex-direction: column; }
}