/* tools/price-tracker/price-tracker.css - on top of ../collection-manager/style.css (cm-*) */

.pt { --pt-up: #2f9e5b; --pt-down: #d0453f; }
.dark .pt { --pt-up: #5fcf8a; --pt-down: #f07670; }
.pt-up { color: var(--pt-up); }
.pt-down { color: var(--pt-down); }

.pt-lang {
    display: inline-block; padding: 0 0.3rem; border-radius: 0.25rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
    vertical-align: middle; background: var(--cm-surface-2); color: var(--cm-accent-ink); border: 1px solid var(--cm-line);
}

/* Landing */
.pt-landing { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
@media (max-width: 1023px) { .pt-landing { grid-template-columns: minmax(0, 1fr); } }
.pt-mover-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 0.25rem 1.25rem; }
.pt-mover-list button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.45rem 0.35rem; border-radius: 0.45rem; font-size: 0.85rem; }
.pt-mover-list button:hover { background: var(--cm-surface-2); }
.pt-alert-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--cm-line); font-size: 0.875rem; }

/* Card */
.pt-card { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 767px) { .pt-card { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .pt-card-art { max-width: 14rem; margin: 0 auto; } .pt-title { font-size: 1.5rem; } .pt-price { font-size: 2rem; } .pt-finish-price { display: block; margin-left: 0; } }
.pt-card-art { position: sticky; top: calc(var(--cm-header-h) + 5.5rem); }
@media (max-width: 767px) { .pt-card-art { position: static; } }
.pt-card-art .cm-card-img { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3); }
.pt-title { font-size: 2rem; font-weight: 700; line-height: 1.15; margin-top: 0.5rem; }

.pt-finishes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0; }
.pt-finishes button {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.5rem 0.85rem; border-radius: 0.55rem;
    border: 1px solid var(--cm-line); background: var(--cm-surface); font-size: 0.75rem; color: var(--cm-muted); text-align: left;
}
.pt-finishes button strong { font-size: 1rem; color: var(--cm-ink); font-variant-numeric: tabular-nums; }
.pt-finishes button:hover { border-color: var(--cm-accent); }
.pt-finishes button.is-active { border-color: var(--cm-accent); background: var(--cm-accent-soft); box-shadow: inset 0 0 0 1px var(--cm-accent); }

.pt-headline { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.1rem; }
.pt-price { font-size: 2.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--cm-accent-ink); }
.pt-changes { display: flex; gap: 1.5rem; }
.pt-changes dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cm-muted); }
.pt-changes dd { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.pt-chart { position: relative; min-height: 260px; }
.pt-money-input { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0 0.6rem; height: 2.25rem; border: 1px solid var(--cm-line); border-radius: 0.45rem; background: var(--cm-surface); }
.pt-money-input input { width: 6rem; background: transparent !important; border: 0 !important; outline: none; color: var(--cm-ink); font-variant-numeric: tabular-nums; }
.pt-finish-price { display: inline-block; margin-left: 0.75rem; }