/* Checklists — phone-first list page (big cards, FAB, full-screen overlays) */

* { box-sizing: border-box; }
body {
    background: #F2F2F4;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    color: #1A1A1A;
}

.cl-shell {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ====================================================================== */
/* HEADER + TOOLBAR                                                      */
/* ====================================================================== */
.cl-header {
    background: #3C3C3C; color: #fff;
    padding: 14px 16px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.cl-header h1 {
    margin: 0; flex: 1;
    font-size: 17pt; font-weight: 600; letter-spacing: -0.2px;
}
.cl-back {
    color: #fff; text-decoration: none;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20pt; font-weight: 300;
    border-radius: 50%;
}
.cl-back:hover { background: rgba(255,255,255,0.10); }
.cl-icon-btn {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: inherit;
    border: none; border-radius: 50%;
    cursor: pointer; padding: 0;
}
.cl-icon-btn:hover { background: rgba(0,0,0,0.08); }

.cl-toolbar {
    background: #fff; border-bottom: 1px solid #E5E5E8;
    padding: 12px 16px;
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
    position: sticky; top: 0; z-index: 4;
}
.cl-filter-chips {
    display: flex; gap: 6px;
}
.cl-chip {
    padding: 7px 14px;
    min-width: 96px;            /* normalize chip widths so "Active" matches "Working" / "Templates" (Story #25) */
    text-align: center;
    font-size: 11pt; font-weight: 600; font-family: inherit;
    background: #F5F5F7; color: #555;
    border: 1px solid #E0E0E4; border-radius: 16px;
    cursor: pointer;
}
.cl-chip:hover { background: #ECECEE; }
.cl-chip.active {
    background: #1A73E8; color: #fff; border-color: #0B4FA8;
}
/* Story #25: the Type chip row gets a different accent so Active/Resolved/All
   (status) and Working/Templates/All (type) read as separate filters. */
.cl-type-chips .cl-chip.active {
    background: #6A2D8C; color: #fff; border-color: #4A1D63;
}
.cl-stats {
    flex: 1;
    font-size: 10.5pt; color: #6A6A6E; font-weight: 500;
    text-align: right;
}

/* ====================================================================== */
/* CARD LIST                                                              */
/* ====================================================================== */
.cl-list {
    flex: 1;
    padding: 12px 14px 90px 14px;
}
.cl-empty {
    color: #888; font-style: italic;
    padding: 64px 24px; text-align: center;
    font-size: 12pt;
}

.cl-card {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 18px 18px 16px 18px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.15s ease;
    display: flex; flex-direction: column; gap: 10px;
}
.cl-card:active {
    transform: scale(0.995);
    box-shadow: 0 1px 1px rgba(0,0,0,0.10);
}
.cl-card.resolved { opacity: 0.72; }

.cl-card-title {
    font-size: 14pt; font-weight: 600; color: #1A1A1A;
    line-height: 1.3;
    word-break: break-word;
}
.cl-status-chip {
    flex: 0 0 auto;
    padding: 3px 10px;
    font-size: 9pt; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    border-radius: 10px;
    background: #E8F0FE; color: #1A73E8;
    border: 1px solid #1A73E8;
}
.cl-card.resolved .cl-status-chip {
    background: rgba(20,160,140,0.13); color: #14A08C; border-color: #14A08C;
}

.cl-card-meta {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.cl-chip-soft {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    font-size: 9.5pt; font-weight: 500;
    border-radius: 10px;
    background: #F0F0F2; color: #555;
    border: 1px solid #E0E0E4;
}

.cl-progress-row {
    display: flex; align-items: center; gap: 12px;
    margin-top: 2px;
}
.cl-progress-track {
    flex: 1; height: 8px;
    background: #ECECEE; border-radius: 4px; overflow: hidden;
}
.cl-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1A73E8 0%, #4A90F0 100%);
    transition: width 0.25s ease;
    border-radius: 4px;
}
.cl-card.resolved .cl-progress-fill {
    background: linear-gradient(90deg, #14A08C 0%, #1FB89E 100%);
}
.cl-progress-text {
    flex: 0 0 auto;
    font-size: 10.5pt; font-weight: 600; color: #444;
    font-variant-numeric: tabular-nums;
}
.cl-card-desc {
    font-size: 10.5pt; color: #5A5A5E; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}

/* ====================================================================== */
/* FAB                                                                    */
/* ====================================================================== */
.cl-fab {
    position: fixed;
    right: 22px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    width: 60px; height: 60px;
    border-radius: 50%; border: none;
    background: #1A7A3C; color: #fff;
    font-size: 32pt; font-weight: 300; line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.18);
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    z-index: 20;
}
.cl-fab:hover  { background: #226B40; box-shadow: 0 6px 16px rgba(0,0,0,0.32), 0 3px 6px rgba(0,0,0,0.20); }
.cl-fab:active { transform: scale(0.96); }

/* ====================================================================== */
/* OVERLAY (new-checklist modal)                                          */
/* ====================================================================== */
.cl-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 100;
    display: flex; flex-direction: column;
    animation: cl-fade 0.18s ease;
}
@keyframes cl-fade { from { opacity: 0 } to { opacity: 1 } }

.cl-overlay-sheet {
    background: #F5F5F7;
    display: flex; flex-direction: column;
    overflow: hidden;
    width: 100%; height: 100%;
    animation: cl-slide-up 0.22s ease;
}
@keyframes cl-slide-up {
    from { transform: translateY(20px); opacity: 0.6 }
    to   { transform: translateY(0);    opacity: 1   }
}
.cl-overlay-header {
    background: #3C3C3C; color: #fff;
    padding: 12px 14px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    display: flex; align-items: center; gap: 10px;
    flex: 0 0 auto;
}
.cl-overlay-header .cl-icon-btn { color: #fff; }
.cl-overlay-header .cl-icon-btn:hover { background: rgba(255,255,255,0.10); }
.cl-overlay-title {
    flex: 1; min-width: 0;
    font-size: 14pt; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-text-btn {
    background: transparent; color: inherit;
    border: 1px solid rgba(255,255,255,0.35); border-radius: 4px;
    padding: 7px 16px;
    font: inherit; font-size: 11pt; font-weight: 600;
    cursor: pointer;
}
.cl-text-btn:hover { background: rgba(255,255,255,0.12); }
.cl-text-btn.primary {
    background: #1A7A3C; border-color: #1A7A3C; color: #fff;
}
.cl-text-btn.primary:hover { background: #226B40; }

.cl-overlay-body {
    flex: 1; overflow-y: auto;
    padding: 24px 22px calc(40px + env(safe-area-inset-bottom, 0px)) 22px;
}
.cl-field { margin-bottom: 18px; }
.cl-field > label {
    display: block;
    font-size: 11pt; font-weight: 600; color: #333;
    margin-bottom: 6px;
}
.cl-field input[type="text"],
.cl-field textarea,
.cl-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    font: inherit; font-size: 12pt;
    border: 1px solid #D5D5D9; border-radius: 8px;
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
}
.cl-field select {
    /* Native chevron — keep the picker discoverable on every platform. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}
.cl-field textarea { resize: vertical; min-height: 80px; }
.cl-field input[type="text"]:focus,
.cl-field textarea:focus,
.cl-field select:focus {
    outline: none; border-color: #1A73E8;
    box-shadow: 0 0 0 3px rgba(26,115,232,0.18);
}
.cl-hint {
    font-size: 10.5pt; color: #888; line-height: 1.4;
}

/* Category filter + Manage button live in the toolbar next to the chips. */
.cl-cat-filter {
    height: 32px;
    padding: 0 10px;
    font-size: 10.5pt; font-family: inherit;
    background: #fff; color: #333;
    border: 1px solid #D5D5D9; border-radius: 8px;
    -webkit-appearance: none; appearance: none;
}
.cl-cat-filter:focus { outline: none; border-color: #1A73E8; box-shadow: 0 0 0 3px rgba(26,115,232,0.18); }

.cl-toolbar .cl-text-btn {
    height: 32px;
    padding: 0 12px;
    font-size: 10.5pt; font-weight: 600;
    background: transparent; color: #1A73E8;
    border: 1px solid #B7CFF5; border-radius: 8px;
    cursor: pointer;
}
.cl-toolbar .cl-text-btn:hover { background: #F5F9FF; }

/* Category chip on each card */
.cl-cat-chip {
    color: #1A73E8;
    background: rgba(26,115,232,0.12);
    border-color: #B7CFF5;
}

/* Template variant — distinct color so templates are obvious at a glance */
.cl-card.template .cl-status-chip {
    background: #FFF4DA; color: #B58400; border-color: #B58400;
}
.cl-card.template .cl-cat-chip {
    color: #B58400; background: rgba(181,132,0,0.13); border-color: #ECDFB4;
}
.cl-card.template .cl-progress-fill {
    background: linear-gradient(90deg, #C7A04F 0%, #DFC078 100%);
}

/* ====================================================================== */
/* DESKTOP                                                                */
/* ====================================================================== */
@media (min-width: 720px) {
    .cl-list { max-width: 920px; margin: 0 auto; padding: 20px 24px 110px 24px; }
    .cl-toolbar { padding: 14px 24px; }
    .cl-card { padding: 22px 22px 20px 22px; }
    .cl-card-title { font-size: 15pt; }
    .cl-overlay { align-items: center; justify-content: center; padding: 32px; }
    .cl-overlay-sheet {
        width: 100%; max-width: 720px;
        max-height: calc(100vh - 64px);
        border-radius: 14px;
        box-shadow: 0 24px 60px rgba(0,0,0,0.30);
        height: auto;
    }
    .cl-overlay-body { padding: 26px 28px 28px 28px; }
}

/* Checklist ID number -- subtle, next to the name on each card */
.cl-id-num {
    font-size: 10pt;
    font-weight: 400;
    color: #999;
}

/* Note chip on list cards */
.cl-note-chip {
    color: #6A5200 !important;
    background: #FFF9E6 !important;
    border-color: #ECDFB4 !important;
}