/* Shared styles for the Amazon lookup-tool family (loaded by
 * each tool page alongside tools.css): form rows, errors, inline
 * progress, channel / video cards, stat grids, history rows. Per-tool
 * CSS adds only tool-specific pieces. */

.aml-intro { margin: 0 0 14px; color: #4b5563; font-size: 0.95rem; }
.aml-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.aml-field { display: flex; flex-direction: column; gap: 5px; }
/* `hidden` must beat the flex display (the bulk-keywords field on the
 * Amazon Keyword Tool sat next to the seed input, operator 2026-09-15). */
.aml-field[hidden], .aml-row[hidden] { display: none; }
.aml-field-grow { flex: 1 1 320px; }
.aml-field-sm { flex: 0 1 170px; }
.aml-label { font-size: 0.8rem; font-weight: 600; color: #374151; }
.aml-text { flex: 0 0 auto; }
/* Same box as .text-input (font, padding, border, radius) so the
 * marketplace select and the text input share one height and their
 * labels line up (operator 2026-09-15: "not correctly aligned"). */
.aml-select {
    font: inherit;
    font-size: 15px;
    color: var(--ink-700);
    border: 1px solid var(--ink-300);
    border-radius: var(--r-sm);
    background: #fff;
    padding: 11px 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.aml-select:hover { border-color: var(--ink-400); }
.aml-select:focus { outline: none; border-color: var(--brand-red); box-shadow: var(--focus-ring); }

/* Mode toggle (Amazon Keyword Tool): equal-width tabs as wide as the
 * widest label, so the 50% slide pill covers "Check my keywords" with
 * the same padding as "Keyword ideas" (Reddit finders precedent). */
.mode-toggle.aml-mode,
[role="tablist"].mode-toggle.aml-mode {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}
.aml-mode .mode-btn { white-space: nowrap; text-align: center; padding: 8px 26px; }

/* The registry description in the hero runs the full page width on the
 * Amazon lookup pages (per-page override of the shared 920px cap, the
 * same as the Reddit finders; operator 2026-09-15). */
.page-hero-description { max-width: none; }
.aml-hint { font-size: 0.78rem; color: #6b7280; }

.aml-progress { margin: 12px 0 0; font-size: 0.86rem; color: #6b7280; display: flex; align-items: center; gap: 8px; }
.aml-progress[hidden] { display: none; }
.aml-spinner {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid #e5e7eb; border-top-color: #b45309;
    animation: aml-spin 0.8s linear infinite;
}
@keyframes aml-spin { to { transform: rotate(360deg); } }

.aml-errors { margin: 12px 0 4px; }
.aml-errors[hidden] { display: none; }
.aml-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

/* results shell */
.aml-results {
    margin: 16px 0 4px;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 18px 20px;
    scroll-margin-top: 16px;
}
.aml-results[hidden] { display: none; }

/* channel / video cards */
.aml-card { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.aml-avatar { width: 72px; height: 72px; border-radius: 50%; background: #eef0f3; object-fit: cover; flex: 0 0 auto; }
.aml-card-main { min-width: 0; flex: 1 1 260px; }
.aml-card-title { margin: 0 0 2px; font-size: 1.15rem; font-weight: 700; color: #1f2937; word-break: break-word; }
.aml-card-sub { font-size: 0.86rem; color: #6b7280; word-break: break-word; }
.aml-card-desc { font-size: 0.86rem; color: #4b5563; margin-top: 8px; }
.aml-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.aml-card-actions .ghost-btn { text-decoration: none; font-size: 0.82rem; padding: 6px 12px; }

.aml-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.aml-stat { background: #f8fafc; border: 1px solid #eef0f3; border-radius: 12px; padding: 12px 14px; }
.aml-stat-value { font-size: 1.35rem; font-weight: 800; color: #1f2937; font-variant-numeric: tabular-nums; word-break: break-word; }
.aml-stat-label { font-size: 0.76rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
.aml-stat-note { font-size: 0.74rem; color: #9ca3af; margin-top: 3px; }
.aml-stat--hero { grid-column: span 2; background: #fef3c7; border-color: #fcd9a0; }
.aml-stat--hero .aml-stat-value { font-size: 1.9rem; color: #b45309; }

.aml-kv { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 6px 14px; margin-top: 14px; font-size: 0.88rem; }
.aml-kv dt { color: #6b7280; font-weight: 600; }
.aml-kv dd { margin: 0; color: #1f2937; word-break: break-word; }

.aml-section-title { margin: 18px 0 8px; font-size: 0.95rem; font-weight: 700; color: #1f2937; }
.aml-muted { color: #9ca3af; }
.aml-copy-btn { padding: 3px 9px; font-size: 0.76rem; }

/* history (project class-name contract) */
.aml-history { margin: 18px 0 4px; }
.aml-history[hidden] { display: none; }
.aml-history-title { margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; color: #1f2937; }
.aml-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 10px;
    padding: 9px 12px;
    cursor: pointer;
}
.history-item:hover { border-color: #cbd2d9; }
.history-item-input { font-weight: 600; font-size: 0.86rem; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.history-item-meta { font-size: 0.78rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item-when { font-size: 0.76rem; color: #9ca3af; flex: 0 0 auto; }
.history-item-delete {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #9ca3af;
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    opacity: 0;
}
.history-item:hover .history-item-delete { opacity: 1; }
.history-item-delete:hover { background: #fef2f2; color: #b91c1c; }

@media (max-width: 640px) {
    .aml-row .primary-btn { width: 100%; }
    .aml-stat--hero { grid-column: span 1; }
}

/* ---- Amazon family additions: results tables + product rows ---- */
.aml-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.aml-toolbar .ghost-btn, .aml-toolbar .primary-btn { font-size: 0.84rem; padding: 7px 14px; }
.aml-toolbar-note { font-size: 0.84rem; color: #6b7280; margin-left: auto; }
.aml-table-wrap { overflow-x: auto; }
.aml-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.aml-table th, .aml-table td { padding: 9px 10px; border-bottom: 1px solid #eef0f3; text-align: left; vertical-align: middle; }
.aml-table th { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; white-space: nowrap; }
.aml-table tbody tr:hover { background: #fffaf3; }
.aml-table .aml-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.aml-table .aml-kw { font-weight: 600; color: #1f2937; }
.aml-table .aml-muted { color: #9ca3af; }
.aml-badge { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin-right: 4px; vertical-align: middle; }
.aml-badge--best { background: #fff3e0; color: #b45309; }
.aml-badge--choice { background: #e8f1ff; color: #1d4ed8; }
.aml-badge--ad { background: #f3f4f6; color: #6b7280; }
.aml-prod { display: flex; gap: 12px; align-items: flex-start; }
.aml-prod-img { width: 56px; height: 56px; object-fit: contain; background: #fff; border: 1px solid #eef0f3; border-radius: 6px; flex: 0 0 auto; }
.aml-prod-title { font-weight: 600; color: #1f2937; line-height: 1.35; }
.aml-prod-title a { color: inherit; text-decoration: none; }
.aml-prod-title a:hover { color: #b45309; text-decoration: underline; }
.aml-prod-sub { font-size: 0.8rem; color: #6b7280; margin-top: 2px; }
.aml-hero-img { width: 160px; height: 160px; object-fit: contain; background: #fff; border: 1px solid #eef0f3; border-radius: 10px; flex: 0 0 auto; }
.aml-reviews { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.aml-review { background: #f8fafc; border: 1px solid #eef0f3; border-radius: 10px; padding: 10px 12px; font-size: 0.86rem; color: #374151; }
.aml-review-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; font-size: 0.8rem; color: #6b7280; }
.aml-stars { color: #d97706; font-size: 0.85rem; letter-spacing: 1px; }
.aml-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.aml-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #e6e8eb; border-radius: 999px; background: #fff; font-size: 0.82rem; color: #1f2937; cursor: pointer; }
.aml-chip:hover { border-color: #f0c27a; }
.aml-source { font-size: 0.78rem; color: #9ca3af; margin-top: 12px; }
@media (max-width: 640px) {
    .aml-table th.col-mobile-hide, .aml-table td.col-mobile-hide { display: none; }
    .aml-hero-img { width: 110px; height: 110px; }
}