/* ============================================================
   Main checklist container
   ============================================================ */
.ggc-sc {
  border-radius: 10px;
  padding: 12px;
  max-width: 493px;
  width: 100%;
  box-sizing: border-box;
  background-color: black;
  transition: opacity 0.25s ease;
}

/* Header row */
.ggc-sc .ggc-sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ggc-sc .ggc-sc-title {
  margin: 0;
}

/* Per-checklist reset: keep functional but hide visually */
.ggc-sc .ggc-sc-reset {
  display: none;
}

/* ============================================================
   Decision group: disabled branch styling
   ============================================================ */
.ggc-sc.ggc-branch-disabled {
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   List structure
   ============================================================ */
.ggc-sc .ggc-sc-list,
.ggc-sc .ggc-sc-list > li > ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.ggc-sc-item {
  margin: 0.15rem 0;
  list-style: none;
}

.ggc-sc-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ggc-sc-label {
  flex: 1;
  min-width: 0;
}

/* Checked task items */
.ggc-sc-item.is-checked > .ggc-sc-row .ggc-sc-label {
  text-decoration: line-through;
  opacity: 0.7;
}

/* Children always visible */
.ggc-sc-children {
  margin-left: 0rem;
}

.ggc-sc-children ul {
  margin: 0;
  padding-left: 1rem;
}

/* Checkbox accent colour */
.ggc-sc-item input[type="checkbox"] {
  accent-color: var(--ggc-accent, initial);
  flex-shrink: 0;
}

/* ============================================================
   Sub-task toggle button
   ============================================================ */
.ggc-subtask-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0px 7px;
  border-radius: 20px;
  border: .5px solid #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  font-size: 0.6em;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
}

.ggc-subtask-toggle:hover,
.ggc-subtask-toggle:focus {
  background: rgba(245, 158, 11, 0.25);
  border-color: #fbbf24;
  color: #fbbf24;
}

.ggc-subtask-toggle.is-open {
  background: rgba(245, 158, 11, 0.2);
}

.ggc-chevron {
  display: block;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.ggc-subtask-toggle.is-open .ggc-chevron {
  transform: rotate(180deg);
}

/* ============================================================
   Sub-task list
   ============================================================ */
.ggc-sc .ggc-subtask-list {
  list-style: none;
  margin: 0.3rem 0 0.3rem 1.6rem;
  padding-left: 0;
}

/* hidden attribute hides by default; JS toggles it */
.ggc-subtask-list[hidden] {
  display: none;
}

.ggc-subtask-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.2rem 0;
  flex-wrap: wrap;
  list-style: none;
}

.ggc-subtask-item input[type="checkbox"] {
  accent-color: var(--ggc-accent, initial);
  flex-shrink: 0;
  margin-top: 3px;
}

.ggc-subtask-label {
  flex: 1;
  min-width: 0;
  font-size: 0.9em;
  opacity: 0.85;
}

/* Locked subtask list (parent task is checked) */
.ggc-subtask-list.ggc-subtasks-locked {
  opacity: 0.4;
  pointer-events: none;
}

/* Hide checkbox when there is only one sub-task */
.ggc-subtask-single .ggc-subtask-item input[type="checkbox"] {
  display: none;
}

/* Checked subtask */
.ggc-subtask-item.is-checked .ggc-subtask-label {
  text-decoration: line-through;
  opacity: 0.5;
}

/* ============================================================
   Responsive: narrow viewports
   Stack the toggle below the label on very small screens
   ============================================================ */
@media (max-width: 380px) {
  .ggc-sc-row {
    flex-wrap: wrap;
  }
  .ggc-subtask-toggle {
    margin-left: 1.6rem; /* align under label, past checkbox */
    flex-basis: 100%;
    justify-content: flex-start;
  }
  .ggc-sc .ggc-subtask-list {
    margin-left: 1rem;
    padding-left: 0;
  }
}

/* ============================================================
   Global progress + reset-all bar
   ============================================================ */
.ggc-sc-reset-all-wrap {
  max-width: 250px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.ggc-sc-reset-all-wrap .ggc-sc-progress {
  white-space: nowrap;
}

.ggc-sc-reset-all {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.ggc-sc-reset-all:hover,
.ggc-sc-reset-all:focus {
  opacity: 1;
}

.ggc-reset-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}

/* ============================================================
   Error state
   ============================================================ */
.ggc-sc-error {
  color: #b91c1c;
  background: #fef2f2;
  border-radius: 6px;
  padding: 8px;
  max-width: 493px;
  margin: 0 auto;
}

/* ============================================================
   Inline spoiler reveal
   Usage: <span style="color:transparent; background:#555; border-radius:3px; cursor:pointer;">text</span>
   Click/tap reveals the text via view.js listener.
   ============================================================ */
.ggc-subtask-label span[style*="color:transparent"],
.ggc-subtask-label span[style*="color: transparent"] {
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.2s, background 0.2s;
}

.ggc-subtask-label span[style*="color:transparent"]:hover,
.ggc-subtask-label span[style*="color: transparent"]:hover {
  opacity: 0.75;
}