/* ============================================
   Hints/Callouts Component
   Uses theme variables from theme.css
   Note: --hint-* colors defined in theme.css :root
   ============================================ */

/* Base hint styling - inline layout */
.hint {
  display: flex;
  align-items: baseline;
  margin: 10px 0;
  padding: 6px 10px;
  border-radius: var(--fil-radius);
  border-left: 3px solid;
  background: var(--fil-bg-elevated);
}

.hint-icon {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

.hint-content {
  flex: 1;
  min-width: 0;
}

.hint-content p {
  display: inline;
  margin: 0;
  line-height: 1.35;
  color: var(--fil-text-secondary);
  font-size: 11px;
}

.hint-content p + p {
  display: block;
  margin-top: 4px;
}

.hint-content code {
  background: var(--fil-bg);
  padding: 1px 3px;
  border-radius: var(--fil-radius-sm);
  font-family: var(--fil-font-mono);
  font-size: 10px;
  color: var(--fil-text);
  border: 1px solid var(--fil-border);
}

.hint-content a {
  color: var(--fil-text-link);
  text-decoration: none;
  font-size: 13px;
}

.hint-content a:hover {
  text-decoration: underline;
}

/* Info - Blue */
.hint-info {
  border-left-color: var(--hint-info);
  background: var(--hint-info-bg);
}

.hint-info .hint-icon {
  color: var(--hint-info);
}

/* Warning - Amber */
.hint-warning {
  border-left-color: var(--hint-warning);
  background: var(--hint-warning-bg);
}

.hint-warning .hint-icon {
  color: var(--hint-warning);
}

/* Danger - Red */
.hint-danger {
  border-left-color: var(--hint-danger);
  background: var(--hint-danger-bg);
}

.hint-danger .hint-icon {
  color: var(--hint-danger);
}

/* Success - Green */
.hint-success {
  border-left-color: var(--hint-success);
  background: var(--hint-success-bg);
}

.hint-success .hint-icon {
  color: var(--hint-success);
}


/* ============================================
   Mobile Responsive
   ============================================ */
@media (max-width: 767px) {
  .hint {
    padding: 5px 8px;
    margin: 8px 0;
  }

  .hint-icon {
    font-size: 10px;
    margin-right: 5px;
  }

  .hint-content p {
    font-size: 10px;
  }

  .hint-content code {
    font-size: 9px;
  }
}