/* ============================================================
   info.css
   Extra Info panel: reference cards and the team notes box.
   ============================================================ */

.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

@media (max-width: 720px){
  .info-grid{ grid-template-columns:1fr; }
}

.info-card{
  background:var(--walnut-700);
  border:1px solid var(--walnut-500);
  border-left:3px solid var(--clay);   /* accent spine, overridden below */
  border-radius:4px;
  padding:18px 20px;
}
.info-card.brass{ border-left-color:var(--brass); }
.info-card.sage{  border-left-color:var(--sage); }

.info-card h3{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  font-size:16px; margin:0 0 10px; color:var(--parchment);
}
.info-card-hint{
  font-family:var(--font-mono); font-size:10px; color:var(--parchment-dim);
  text-transform:none; letter-spacing:0;
}

.info-card ul{
  margin:0; padding-left:18px;
  font-size:13.5px; line-height:1.8; color:var(--parchment-dim);
}
.info-card a{
  color:var(--brass); text-decoration:none;
  border-bottom:1px dotted var(--brass-dim);
}
.info-card a:hover{ color:var(--parchment); }

/* auto-saving notes box */
.info-card.editable textarea{
  width:100%; min-height:120px;
  background:var(--walnut-800); border:1px solid var(--walnut-500);
  color:var(--parchment); font-family:var(--font-body); font-size:13.5px;
  border-radius:3px; padding:10px; line-height:1.6;
}