/* Reddit Image Resizer - tool-specific styles on top of the shared
 * image-tools.css: the padding-colour row and the sizes cheat-sheet. */

.rir-pad-row { display: flex; align-items: center; gap: 8px; }
.rir-pad-row .it-select { flex: 1 1 auto; min-width: 0; }
.rir-color {
    width: 38px;
    height: 34px;
    padding: 2px;
    border: 1px solid #d7dbe0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    flex: 0 0 auto;
}
.rir-color[hidden] { display: none; }

.rir-sizes {
    margin: 18px 0 4px;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 18px 20px 14px;
}
.rir-sizes-title { margin: 0 0 10px; font-size: 1rem; font-weight: 700; color: #1f2937; }
.rir-sizes-wrap { overflow-x: auto; }
.rir-sizes-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.rir-sizes-table th, .rir-sizes-table td { padding: 9px 10px; border-bottom: 1px solid #eef0f3; text-align: left; vertical-align: top; }
.rir-sizes-table th { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; }
.rir-sizes-table tbody tr:last-child td { border-bottom: 0; }
.rir-sizes-table .rir-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rir-sizes-table .rir-note-col { color: #64748b; font-size: 0.84rem; }
.rir-sizes-foot { margin: 10px 0 0; font-size: 0.84rem; color: #64748b; }

@media (max-width: 640px) {
    .rir-sizes-table .rir-note-col { display: none; }
}