/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Stopwatch — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Stopwatch display ───────────────────────────────────────────────────────── */
.sw-display-wrap {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem 1.5rem 1.5rem;
    background: var(--bg, #FFFFFF);
    border-radius: 16px;
}
#sw-display {
    font-family:    'SFMono-Regular', 'Consolas', 'Menlo', monospace;
    font-size:      clamp(2.75rem, 8vw, 5rem);
    font-weight:    700;
    color:          var(--text, #0D1B2A);
    letter-spacing: 0.04em;
    line-height:    1;
    display:        block;
    margin-bottom:  0.25rem;
    user-select:    none;
}

/* ── Stopwatch buttons ───────────────────────────────────────────────────────── */
.sw-btn-row {
    display:         flex;
    justify-content: center;
    gap:             0.75rem;
    flex-wrap:       wrap;
    margin-bottom:   1rem;
}
.sw-btn {
    min-width:     120px;
    padding:       0.7rem 1.5rem;
    border:        none;
    border-radius: 8px;
    font-size:     1rem;
    font-weight:   700;
    font-family:   inherit;
    cursor:        pointer;
    transition:    background 0.18s, transform 0.1s, opacity 0.18s;
}
.sw-btn:active { transform: scale(0.97); }
.sw-btn:disabled {
    opacity: 0.38;
    cursor:  not-allowed;
    transform: none;
}

.btn-start {
    background: var(--accent, #E8472F);
    color:      #fff;
}
.btn-start:hover:not(:disabled) { background: #cf5220; }

.btn-pause {
    background: #f5a623;
    color:      #fff;
}
.btn-pause:hover:not(:disabled) { background: #d88d0e; }

.sw-btn-lap {
    background: var(--card-bg, #fff);
    color:      var(--text, #0D1B2A);
    border:     1px solid var(--border, #E2E4E8);
}
.sw-btn-lap:hover:not(:disabled) { background: #f2f0ed; }

.sw-btn-reset {
    background: var(--card-bg, #fff);
    color:      var(--muted, #64748B);
    border:     1px solid var(--border, #E2E4E8);
}
.sw-btn-reset:hover:not(:disabled) { background: #f2f0ed; }

/* ── Keyboard shortcut hints ─────────────────────────────────────────────────── */
.sw-shortcuts {
    display:         flex;
    justify-content: center;
    gap:             1.5rem;
    flex-wrap:       wrap;
    font-size:       0.8125rem;
    color:           var(--muted, #64748B);
    margin-bottom:   0.5rem;
}
.sw-shortcut {
    display:     flex;
    align-items: center;
    gap:         0.35rem;
}
.sw-key {
    display:       inline-block;
    background:    var(--bg, #FFFFFF);
    border:        1px solid var(--border, #E2E4E8);
    border-radius: 5px;
    padding:       0.1rem 0.45rem;
    font-family:   'SFMono-Regular', monospace;
    font-size:     0.75rem;
    font-weight:   700;
    color:         var(--text, #0D1B2A);
    box-shadow:    0 1px 0 var(--border);
}

/* ── Lap section ─────────────────────────────────────────────────────────────── */
.lap-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   0.75rem;
    flex-wrap:       wrap;
    gap:             0.5rem;
}
.lap-header-title {
    font-size:   0.9375rem;
    font-weight: 700;
    color:       var(--text);
}
.lap-count-badge {
    display:       inline-block;
    background:    var(--accent, #E8472F);
    color:         #fff;
    font-size:     0.75rem;
    font-weight:   800;
    border-radius: 999px;
    padding:       0.1rem 0.55rem;
    min-width:     1.5rem;
    text-align:    center;
}
.sw-btn-copy {
    padding:       0.4rem 0.9rem;
    background:    var(--card-bg, #fff);
    border:        1px solid var(--border, #E2E4E8);
    border-radius: 6px;
    font-size:     0.8125rem;
    font-weight:   600;
    font-family:   inherit;
    color:         var(--muted);
    cursor:        pointer;
    transition:    background 0.15s, color 0.15s;
}
.sw-btn-copy:hover { background: #f2f0ed; color: var(--text); }

/* ── Lap table ───────────────────────────────────────────────────────────────── */
.lap-table-wrap {
    max-height:   320px;
    overflow-y:   auto;
    border:       1px solid var(--border, #E2E4E8);
    border-radius: 10px;
}
.lap-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.9375rem;
}
.lap-table thead th {
    position:   sticky;
    top:        0;
    background: var(--bg, #FFFFFF);
    padding:    0.6rem 1rem;
    font-size:  0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:      var(--muted);
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.lap-table thead th:last-child { text-align: right; }
.lap-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.lap-table tbody tr:last-child { border-bottom: none; }
.lap-table tbody tr:hover { background: #fafaf8; }

.lap-num   { padding: 0.6rem 1rem; font-weight: 700; color: var(--muted); width: 3rem; }
.lap-time  { padding: 0.6rem 0.5rem; font-family: 'SFMono-Regular', monospace; font-weight: 600; }
.lap-total { padding: 0.6rem 1rem; font-family: 'SFMono-Regular', monospace; color: var(--muted); text-align: right; }

/* ── Fastest / Slowest row highlights ───────────────────────────────────────── */
.lap-fastest {
    background: rgba(46, 204, 113, 0.10) !important;
}
.lap-fastest .lap-time {
    color: #1e7d46;
    font-weight: 800;
}
.lap-fastest .lap-time::after {
    content:     ' ●';
    font-size:   0.7rem;
    color:       #2ecc71;
    vertical-align: middle;
}
.lap-slowest {
    background: rgba(231, 76, 60, 0.08) !important;
}
.lap-slowest .lap-time {
    color: #c0392b;
    font-weight: 800;
}
.lap-slowest .lap-time::after {
    content:     ' ●';
    font-size:   0.7rem;
    color:       #e74c3c;
    vertical-align: middle;
}

/* cache-buster: 2026-05-24T05:06:05Z */