/* ==========================================================================
   Theme
   Change these values to restyle the whole tool. Components below only
   reference these variables — no hardcoded colours.
   ========================================================================== */
:root {
  /* Colour */
  --color-bg: #F5F3F2;               /* page background (grouped list grey) */
  --color-accent: #148ee0;         
  --color-surface: #ffffff;          /* cards: steps, control panel, inputs */
  --color-bg-secondary: #e6e6e6;     /* secondary background (pressed states) */
  --color-text: #111111;             /* primary text */
  --color-text-secondary: #6b6b6b;   /* labels, helper text */
  --color-border: #e0e0e0;           /* subtle borders */
  --color-separator: #e2e2e2;        /* lines between rows in a card */
  --color-border-strong: #111111;    /* checkbox outline */
  --color-button-bg: var(--color-bg-secondary);
  --color-button-text: var(--color-text);
  --color-button-hover-bg: #ededed;
  --color-button-active-bg: #dceaf1;
  --color-hover: rgba(0, 0, 0, 0.045); /* subtle hover; works on grey and white */
  --color-icon: #3d3d3d;
  --color-icon-hover: #000000;
  --color-progress-track: #dedede;
  --color-progress-fill: var(--color-accent);
  --color-check: #111111;            /* tick mark */
  --color-step-done-text: #6b6b6b;   /* completed step text */
  --color-disabled-text: #a6a6a6;
  --color-focus: #111111;            /* focus outline */

  /* Shape */
  --radius: 6px;          /* small controls */
  --radius-card: 12px;    /* cards and panels */
  --border-width: 1px;
  --checkbox-border-width: 1.5px;
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 88px;

  /* Typography */
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 12px;   /* progress label */
  --font-size-md: 16px;   /* body, steps, buttons */
  --font-size-sm: 13px;   /* section headers */
  --font-size-xl: 32px;   /* title */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-large: 700;
  --line-height: 1.4;

  /* Sizes */
  --layout-width: 780px;
  --control-size: 36px;
  --row-height: 44px;     /* minimum height of a row in a card */
  --row-padding-x: var(--space-4);
  --row-padding-y: var(--space-3);  /* space above and below each row's content */
  --handle-width: var(--space-4);
  --checkbox-size: 22px;
  --icon-size: 16px;
  --icon-button-size: 28px;
  --progress-height: 6px;

  /* Where row separators start: lined up with the step text */
  --separator-inset: calc(var(--row-padding-x) + var(--handle-width) + var(--checkbox-size) + var(--space-3) * 2);

  color-scheme: light;
}

/* Dark theme: set on <html> by the theme toggle (defaults to the system setting) */
:root[data-theme="dark"] {
  --color-bg: #121418;
  --color-accent: #3aa3f0;
  --color-surface: #1c1f24;
  --color-bg-secondary: #2a2e35;
  --color-text: #ececec;
  --color-text-secondary: #9a9da3;
  --color-border: #2c3037;
  --color-separator: #2c3037;
  --color-border-strong: #d8d8d8;
  --color-button-hover-bg: #262a30;
  --color-button-active-bg: #1d3447;
  --color-hover: rgba(255, 255, 255, 0.06);
  --color-icon: #c4c6ca;
  --color-icon-hover: #ffffff;
  --color-progress-track: #2c3037;
  --color-check: #ececec;
  --color-step-done-text: #9a9da3;
  --color-disabled-text: #5c6068;
  --color-focus: #ececec;

  color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
}

button,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.app {
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-8);
}

.app-footer {
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.app-footer hr {
  border: 0;
  border-top: var(--border-width) solid var(--color-border);
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.app-footer p:has(svg) {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.app-footer svg {
  flex-shrink: 0;
}

.app-footer a {
  color: var(--color-text);
  text-decoration: none;
}

.footer-data {
  display: flex;
  gap: var(--space-1);
  opacity: .6;
  transition: opacity .15s;
}

.footer-data:hover,
.footer-data:focus-within {
  opacity: 1;
}

.footer-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.footer-link:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.app-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-xs);
}

.app-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  align-self: stretch;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .03rem;
  font-weight: var(--font-weight-large);
  color: var(--color-text-secondary);
}

.theme-toggle {
  margin: calc(var(--space-1) * -1) 0 calc(var(--space-1) * -1) auto;
  color: var(--color-text-secondary);
}

.theme-toggle .icon {
  width: 18px;
  height: 18px;
}

/* Saved lists switcher: native select with its own chevron, so the
   arrow's spacing matches the text padding in every browser */
.app-logo {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-logo {
  color: var(--color-accent);
}

.list-picker {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.list-picker-icon {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  color: var(--color-icon);
  pointer-events: none;
}

.list-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: var(--space-1) calc(var(--space-2) * 2 + 14px) var(--space-1) var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  cursor: pointer;
}

.list-select:hover {
  background: var(--color-button-hover-bg);
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title    ."
    "desc     ."
    "progress ."
    "list     actions";   /* panel top lines up with the top of the steps card */
  column-gap: var(--space-4);
  align-items: start;
}

.sop-title       { grid-area: title; }
.sop-description { grid-area: desc; }
.control-panel   { grid-area: actions; }
.progress        { grid-area: progress; }
.checklist       { grid-area: list; }

/* ==========================================================================
   Title and description (editable inline)
   ========================================================================== */
.sop-title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-large);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.sop-description {
  margin: 0 0 var(--space-6);
  max-width: 36ch;
  color: var(--color-text-secondary);
}

.editable {
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}

.editable[contenteditable]:not([contenteditable="false"]) {
  cursor: text;
}

.editable[contenteditable]:not([contenteditable="false"]):hover {
  background: var(--color-hover);
}

.editable:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Control panel (icon-only lock / clear / reset)
   ========================================================================== */
.control-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.control-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-size);
  height: var(--control-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-icon);
  cursor: pointer;
}

.control-button .icon {
  width: 18px;
  height: 18px;
}

.control-button:hover {
  background: var(--color-button-hover-bg);
  color: var(--color-icon-hover);
}

.control-button:active {
  background: var(--color-button-active-bg);
}

/* Locked: the closed padlock sits on a pressed background */
.control-button[aria-pressed="true"] {
  background: var(--color-button-active-bg);
  color: var(--color-icon-hover);
}

.control-divider {
  height: var(--border-width);
  margin: 0 var(--space-1);
  background: var(--color-separator);
}

.control-button:disabled {
  background: transparent;
  color: var(--color-disabled-text);
  cursor: not-allowed;
}

/* ==========================================================================
   Section headers (small uppercase labels above a group)
   ========================================================================== */
.section-header,
.progress-labels {
  margin: 0 0 var(--space-2);
  /* padding: 0 var(--row-padding-x); */
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Progress
   ========================================================================== */
.progress {
  margin-bottom: var(--space-6);
}

.progress-labels {
  display: flex;
  justify-content: space-between;
}

.progress-track {
  height: var(--progress-height);
  overflow: hidden;
  border-radius: var(--progress-height);
  background: var(--color-progress-track);
}

.progress-fill {
  width: 0;
  height: 100%;
  border-radius: var(--progress-height);
  background: var(--color-progress-fill);
}

/* ==========================================================================
   Card: white rounded group holding the step rows
   ========================================================================== */
.card {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-3) 0;
}

/* Separator above every row except the first, starting at the text column */
.step + .step::before,
.add-step::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: var(--separator-inset);
  height: var(--border-width);
  background: var(--color-separator);
}

.empty:not([hidden]) ~ .add-step::before {
  left: var(--row-padding-x);
}

/* ==========================================================================
   Steps
   ========================================================================== */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--handle-width) var(--checkbox-size) minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-3);
  /* Height of the first line of step text (line height + its 2px top and bottom padding).
     The handle, checkbox and delete button are centred on it, so they
     line up with the first line when the text wraps. */
  --first-line: calc(var(--font-size-md) * var(--line-height) + 4px);
  min-height: var(--row-height);
  padding: var(--row-padding-y) var(--row-padding-x);
  background: var(--color-surface);
}

.step.is-dragging {
  opacity: 0.4;
}

.step-handle {
  display: flex;
  justify-content: center;
  margin-top: calc((var(--first-line) - var(--icon-size)) / 2);
  color: var(--color-disabled-text);
  border-radius: var(--radius);
  cursor: grab;
}

.step-handle:hover {
  color: var(--color-icon-hover);
}

/* Checkbox: native input for behaviour and a11y, SVG tick on top */
.checkbox {
  position: relative;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  margin-top: calc((var(--first-line) - var(--checkbox-size)) / 2);
}

.step-check {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  margin: 0;
  border: var(--checkbox-border-width) solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
}

.step-check:hover {
  background: var(--color-hover);
}

.checkbox-mark {
  position: absolute;
  inset: 3px;
  display: none;
  fill: none;
  stroke: var(--color-check);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.step-check:checked + .checkbox-mark {
  display: block;
}

.step-text {
  min-width: 0;
  margin: 0 calc(var(--space-1) * -1);
  padding: 2px var(--space-1);
}

.step.is-done .step-text {
  color: var(--color-step-done-text);
}

.step-actions {
  display: flex;
  margin-top: calc((var(--first-line) - var(--icon-button-size)) / 2);
}

.step-toggle svg {
  color: var(--color-disabled-text);
  transition: transform 0.15s ease;
}

.step.has-notes .step-toggle svg,
.step-toggle:hover svg {
  color: var(--color-icon);
}

.step.is-expanded .step-toggle svg {
  transform: rotate(180deg);
}

/* Details sit under the step text and span to the right edge */
.step-details {
  grid-column: 3 / -1;
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.step-notes {
  margin: 0 calc(var(--space-1) * -1);
  padding: 2px var(--space-1);
  border-radius: var(--radius);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.app:not(.is-locked) .step-notes {
  cursor: text;
}

.app:not(.is-locked) .step-notes:hover {
  background: var(--color-hover);
}

.step-notes a {
  color: var(--color-text-secondary);
}

.step-notes a:hover {
  color: var(--color-text);
}

.step-notes-input {
  display: block;
  width: calc(100% + var(--space-1) * 2);
  margin: 0 calc(var(--space-1) * -1);
  padding: 2px var(--space-1);
  border: 0;
  border-radius: var(--radius);
  background: var(--color-hover);
  color: var(--color-text);
  font: inherit;
  line-height: var(--line-height);
  resize: none;
  overflow: hidden;
}

.step-notes-input::placeholder {
  color: var(--color-text-secondary);
}

.step-notes-input[hidden],
.step-notes[hidden],
.step-toggle[hidden] {
  display: none;
}

.step-delete svg {
  color: var(--color-disabled-text);
}

.step-delete:hover svg {
  color: var(--color-border-strong);
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-icon);
  cursor: pointer;
}

.icon-button:hover {
  background: var(--color-hover);
  color: var(--color-icon-hover);
}

.empty {
  display: flex;
  align-items: center;
  min-height: var(--row-height);
  margin: 0;
  padding: var(--row-padding-y) var(--row-padding-x);
  color: var(--color-text-secondary);
}

/* "Add step" is the last row of the card, its + lined up with the checkboxes */
.add-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--row-height);
  padding: var(--row-padding-y) var(--row-padding-x) var(--row-padding-y) calc(var(--row-padding-x) + var(--handle-width) + var(--space-3));
  border: 0;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.add-step .icon {
  width: var(--checkbox-size);
  height: 20px;
}

.add-step:hover {
  background: var(--color-hover);
}

.add-step:focus-visible {
  outline-offset: calc(var(--focus-width) * -1);
}

/* ==========================================================================
   Locked state — steps can be ticked but not edited
   ========================================================================== */
.app.is-locked .step-handle,
.app.is-locked .step-delete {
  visibility: hidden;
}

.app.is-locked .step-text {
  cursor: pointer;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 640px) {
  .app {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "desc"
      "actions"
      "progress"
      "list";
  }

  .sop-description {
    margin-bottom: var(--space-5);
    max-width: none;
  }

  .app-header {
    margin-bottom: var(--space-6);
  }

  .control-divider {
    width: var(--border-width);
    height: auto;
    margin: var(--space-1) 0;
  }

  .control-panel {
    flex-direction: row;
    justify-self: start;
    margin-bottom: var(--space-6);
  }
}