/* Wedding planning checklist — widget styles. Tokens come from _shared/theme.css.
   Layout mirrors lista-prescindibles-boda: list card on the left, sticky gamified
   score panel on the right. *//* Scoped override: this tool's page should NOT have a sticky/fixed site header
   (the in-tool score panel is the sticky element). tool.css loads after
   theme.css and only on this page. */.tools-nav{position:static}.checklist-widget{width:100%;max-width:1080px;margin-left:auto;margin-right:auto;/* The card lives on .cl-main; the widget is just a layout shell. */background:none;border:0;box-shadow:none}/* --- Wedding date: global setting above the two-column layout ------------ */.cl-config{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px}.cl-date-field{display:flex;align-items:center;gap:9px}.cl-field-label{font-size:0.85rem;font-weight:600;color:var(--text-heading);white-space:nowrap}.cl-field-hint{font-size:0.8rem;color:var(--text-muted)}.cl-date-input{font-family:Inter,sans-serif;font-size:0.92rem;padding:9px 12px;border:1px solid var(--border-medium);border-radius:10px;background:var(--bg-card);color:var(--text-heading)}.cl-date-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}/* --- Two-column layout --------------------------------------------------- */.cl-layout{display:grid;grid-template-columns:minmax(0, 1fr) 320px;gap:32px;align-items:start}.cl-main{min-width:0;background:var(--bg-card);border:1px solid var(--border-light);border-radius:16px;padding:36px 40px;box-shadow:0 12px 40px -22px rgba(255, 107, 53, 0.18)}/* --- Toolbar: filters + actions ------------------------------------------ */.cl-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}.cl-filters{display:inline-flex;gap:4px;background:var(--bg-section-warm);border:1px solid var(--border-light);border-radius:999px;padding:4px}.cl-filter{border:0;background:transparent;font-family:Inter,sans-serif;font-weight:600;font-size:0.85rem;color:var(--text-muted);padding:7px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background 0.15s,color 0.15s}.cl-filter:hover{color:var(--text-heading)}.cl-filter.is-active{background:var(--bg-card);color:var(--primary);box-shadow:0 1px 3px rgba(0, 0, 0, 0.08)}.cl-actions{display:flex;align-items:center;gap:0}.cl-textlink{background:none;border:0;padding:6px 8px;font-family:Inter,sans-serif;font-weight:600;font-size:0.85rem;color:var(--text-muted);cursor:pointer;border-radius:8px;transition:color 0.15s}.cl-textlink:hover{color:var(--primary)}.cl-textlink[hidden]{display:none}.cl-textlink--reset::before{content:'·';margin:0 8px;color:var(--text-muted)}/* --- Groups -------------------------------------------------------------- */.cl-group{margin-bottom:26px;scroll-margin-top:80px}.cl-group[hidden]{display:none}.cl-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px;padding:6px 0 8px;border-bottom:1px solid var(--border-light);position:sticky;top:0;z-index:5;background:var(--bg-card)}.cl-group-title{font-family:'Rubik',sans-serif;font-size:1.05rem;font-weight:700;color:var(--text-heading);margin:0}.cl-group.is-complete .cl-group-title{color:var(--text-muted)}.cl-group-date{font-size:0.82rem;font-weight:600;color:var(--primary);white-space:nowrap}.cl-group-date[hidden]{display:none}.cl-items{display:flex;flex-direction:column;gap:6px}/* --- Item row ------------------------------------------------------------ */.cl-item{display:flex;align-items:flex-start;gap:12px;padding:11px 14px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:11px;cursor:pointer;transition:border-color 0.18s,background 0.18s}.cl-item:hover{border-color:var(--border-medium)}.cl-item[hidden]{display:none}.cl-item.is-done{background:var(--bg-section-warm)}.cl-check{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;overflow:hidden}.cl-check-box{flex-shrink:0;width:22px;height:22px;margin-top:1px;border:2px solid var(--border-medium);border-radius:7px;background:var(--bg-card);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background 0.15s,border-color 0.15s}.cl-check-box svg{width:14px;height:14px;opacity:0;transform:scale(0.6);transition:opacity 0.15s,transform 0.15s}.cl-item.is-done .cl-check-box{background:var(--cl-green, #2faE60);border-color:var(--cl-green, #2fae60)}.cl-item.is-done .cl-check-box svg{opacity:1;transform:scale(1)}.cl-check:focus-visible + .cl-check-box{box-shadow:0 0 0 3px var(--primary-soft)}.cl-item-text{font-size:0.97rem;color:var(--text-heading);line-height:1.45;transition:color 0.18s}.cl-item.is-done .cl-item-text{text-decoration:line-through;text-decoration-color:var(--cl-green, #2fae60);color:var(--text-muted)}.cl-item-tool{display:inline-block;margin-left:6px;font-size:0.82rem;font-weight:600;color:var(--primary);text-decoration:none;white-space:nowrap}.cl-item-tool:hover{text-decoration:underline}.cl-item-remove{margin-left:auto;flex-shrink:0;border:0;background:transparent;color:var(--text-muted);font-size:1.25rem;line-height:1;width:26px;height:26px;border-radius:7px;cursor:pointer;opacity:0;transition:opacity 0.15s,color 0.15s,background 0.15s}/* Reveal on row hover/focus so the list stays clean; always visible on touch. */.cl-item:hover .cl-item-remove,.cl-item-remove:focus-visible{opacity:1}@media (hover: none){.cl-item-remove{opacity:1}}.cl-item-remove:hover{color:var(--primary);background:var(--primary-soft)}/* --- Add custom task ----------------------------------------------------- */.cl-add{margin-top:8px}.cl-add-toggle{border:1px dashed var(--border-medium);background:transparent;color:var(--text-muted);font-family:Inter,sans-serif;font-weight:600;font-size:0.85rem;padding:8px 14px;border-radius:10px;cursor:pointer;transition:color 0.15s,border-color 0.15s}.cl-add-toggle:hover{color:var(--primary);border-color:var(--primary)}.cl-add-toggle[hidden]{display:none}.cl-add-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.cl-add-form[hidden]{display:none}.cl-add-input{flex:1 1 220px;min-width:0;font-family:Inter,sans-serif;font-size:0.92rem;padding:9px 12px;border:1px solid var(--border-medium);border-radius:10px;background:var(--bg-card);color:var(--text-heading)}.cl-add-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.cl-add-submit{border:1px solid var(--primary);background:var(--primary);color:#fff;font-family:Inter,sans-serif;font-weight:600;font-size:0.85rem;padding:9px 16px;border-radius:10px;cursor:pointer;transition:filter 0.15s}.cl-add-submit:hover{filter:brightness(1.05)}.cl-add-cancel{border:0;background:transparent;color:var(--text-muted);font-family:Inter,sans-serif;font-weight:600;font-size:0.85rem;padding:9px 8px;cursor:pointer}.cl-add-cancel:hover{color:var(--primary)}.cl-empty{text-align:center;color:var(--text-muted);padding:28px 12px;font-size:0.95rem}.cl-empty[hidden]{display:none}/* =========================================================================
   Gamified score panel (right column, sticky)
   ========================================================================= */.cl-panel{position:sticky;top:20px}.cl-panel-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:16px;padding:26px 24px;box-shadow:0 12px 40px -24px rgba(30, 30, 47, 0.4);text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}.cl-score-title{font-family:Inter,sans-serif;font-weight:700;font-size:0.95rem;color:var(--text-heading);margin-bottom:8px}/* Circular gauge — SurferSEO-style donut. Band colors set the fill stroke. */.cl-gauge{position:relative;width:168px;height:168px}.cl-gauge-svg{width:168px;height:168px;display:block;transform:rotate(0deg)}.cl-gauge-track{stroke:var(--bg-section-warm);stroke-width:3.4}.cl-gauge-fill{stroke-width:3.4;stroke-linecap:round;transition:stroke-dasharray 0.5s ease,stroke 0.4s ease}/* Band → fill color (also drives the big number + milestone accents). */.cl-gauge[data-cl-band="zero"] .cl-gauge-fill{stroke:var(--border-medium)}.cl-gauge[data-cl-band="low"]  .cl-gauge-fill{stroke:#E5604D}.cl-gauge[data-cl-band="mid"]  .cl-gauge-fill{stroke:#F2A14E}.cl-gauge[data-cl-band="high"] .cl-gauge-fill{stroke:#6CC07A}.cl-gauge[data-cl-band="done"] .cl-gauge-fill{stroke:#2FAE60}.cl-gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none}.cl-gauge-num{font-family:'Rubik',sans-serif;font-weight:800;font-size:3rem;line-height:1;color:var(--text-heading)}.cl-gauge-num::after{content:'%';font-size:1.3rem;font-weight:700;margin-left:1px;color:var(--text-muted)}.cl-gauge-unit{font-size:0.78rem;font-weight:600;color:var(--text-muted);text-transform:lowercase}.cl-score-status{font-family:'Rubik',sans-serif;font-weight:700;font-size:1.02rem;color:var(--text-heading);margin:8px 0 0;min-height:1.3em}.cl-score-count{font-size:0.85rem;color:var(--text-muted);margin:2px 0 0}.cl-score-count strong{color:var(--text-heading);font-weight:700}/* Milestones — one row per phase; ring turns solid green at 100%. */.cl-milestones{width:100%;margin-top:18px;padding-top:16px;border-top:1px solid var(--border-light);text-align:left}.cl-ms-title{display:block;font-family:Inter,sans-serif;font-weight:700;font-size:0.75rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}.cl-ms-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.cl-ms-btn{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;padding:6px 6px;border-radius:8px;cursor:pointer;text-align:left;transition:background 0.15s}.cl-ms-btn:hover{background:var(--bg-section-warm)}/* Mini progress donut — fills proportionally to the phase's completion. */.cl-ms-ring{position:relative;flex-shrink:0;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}.cl-ms-ring-svg{width:22px;height:22px;display:block}.cl-ms-ring-track{stroke:var(--bg-section-warm);stroke-width:5}.cl-ms-ring-fill{stroke:#2FAE60;stroke-width:5;stroke-linecap:round;transition:stroke-dasharray 0.4s ease}/* Completed phase: ditch the ring + tick for a clear solid green dot. */.cl-ms-check{display:none}.cl-ms.is-complete .cl-ms-ring-svg{display:none}.cl-ms.is-complete .cl-ms-ring{background:#2FAE60;border-radius:50%}.cl-ms-label{flex:1 1 auto;min-width:0;font-size:0.85rem;font-weight:600;color:var(--text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cl-ms.is-complete .cl-ms-label{color:var(--text-muted)}.cl-ms-count{flex-shrink:0;font-family:'Rubik',sans-serif;font-size:0.78rem;font-weight:700;color:var(--text-muted)}.cl-ms.is-complete .cl-ms-count{color:#2FAE60}.cl-saved-note{display:block;width:100%;margin-top:16px;font-size:0.74rem;color:var(--text-muted);line-height:1.4}/* --- Responsive ---------------------------------------------------------- */@media (max-width: 860px){.cl-layout{grid-template-columns:1fr;gap:18px}/* Panel collapses into a slim sticky bar: mini gauge + number + status. */.cl-panel{position:sticky;top:0;order:-1;z-index:30;margin:0 0 4px}.cl-panel-card{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;padding:12px 16px;text-align:left;box-shadow:0 6px 16px -12px rgba(30, 30, 47, 0.55)}.cl-score-title,.cl-gauge-unit,.cl-milestones,.cl-saved-note{display:none}.cl-gauge{width:56px;height:56px;flex-shrink:0}.cl-gauge-svg{width:56px;height:56px}.cl-gauge-num{font-size:1.1rem}.cl-gauge-num::after{font-size:0.7rem}.cl-score-status{margin:0;font-size:0.95rem}.cl-score-count{margin:0}.cl-main{padding:22px}/* Sit the sticky phase headers just below the slim score bar, not behind it. */.cl-group-head{top:72px}.cl-group{scroll-margin-top:150px}}@media (max-width: 640px){.cl-config{gap:8px}.cl-item{gap:10px}/* Wider list on phones: shrink the container gutter and the card's side
       padding right down, but keep the white card background. */main .container{padding-left:10px;padding-right:10px}.cl-main{padding:16px 10px}}/* --- Print / PDF --------------------------------------------------------- */@media print{.tools-nav,.tool-hero,.breadcrumb,.cta-strip,.how-it-works,.tool-article,.faq,.more-tools,.cta,footer,.tool-social-proof{display:none !important}body{background:#fff !important}main,.container{padding:0 !important;margin:0 !important}.checklist-widget{max-width:none}.cl-layout{display:block !important}/* The score panel and interactive-only controls drop from the printout. */.cl-panel,.cl-toolbar,.cl-add,.cl-field-hint,.cl-item-tool,.cl-item-remove{display:none !important}.cl-main{border:none !important;box-shadow:none !important;padding:0 !important}.cl-config{margin-bottom:14px}.cl-group{break-inside:avoid}.cl-item{border:none !important;background:none !important;padding:4px 0;gap:10px}.cl-check-box{border-color:#555 !important}.cl-item.is-done .cl-item-text{color:#000}.cl-item[hidden],.cl-group[hidden]{display:flex !important}.cl-group[hidden]{display:block !important}}