/* ══════════════════════════════════════
   Project Detail Page
══════════════════════════════════════ */

.pd-hero {
  background: var(--hero-bg);
  border-bottom: 1px solid var(--hero-border);
}

.pd-hero-inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 8px 14px 10px;
}

.pd-back-btn {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  margin-bottom: 10px;
  border: 1px solid var(--hero-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--hero-mid);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.pd-back-btn:hover { border-color: var(--accent); color: var(--accent); }

.pd-hero-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.pd-hero-meta { flex: 1; min-width: 0; }

.pd-hero-name {
  font-size: var(--fs-17);
  font-weight: 600;
  color: var(--hero-ink);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pd-badge {
  font-size: var(--fs-10);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  display: inline-block;
}
.pd-badge-active   { background: rgba(60,207,239,0.15); color: #3CCFEF; }
.pd-badge-paused   { background: rgba(255,255,255,0.08); color: var(--hero-mid); }
.pd-badge-waiting  { background: rgba(232,200,74,0.15); color: #E8C84A; }
.pd-badge-done     { background: rgba(60,207,239,0.15); color: #3CCFEF; }
.pd-badge-archived { background: rgba(255,255,255,0.08); color: var(--hero-mid); }
[data-theme="light"] .pd-badge-active,
[data-theme="light"] .pd-badge-done    { background: rgba(8,112,138,0.12); color: #08708A; }
[data-theme="light"] .pd-badge-waiting { background: rgba(146,88,0,0.10); color: #925800; }
[data-theme="light"] .pd-badge-paused,
[data-theme="light"] .pd-badge-archived { background: rgba(13,27,42,0.08); color: var(--hero-mid); }

.pd-badge-select {
  border: none;
  outline: none;
  cursor: pointer;
  font-family: var(--font-sans);
  -webkit-appearance: menulist;
  appearance: menulist;
}
.pd-badge-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.pd-start-date {
  font-size: var(--fs-12);
  color: var(--hero-mid);
}

.pd-hero-actions {
  flex-shrink: 0;
  margin-left: auto;
}

.pd-knit-btn {
  height: 28px;
  padding: 0 12px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.pd-knit-btn:not([disabled]):hover { opacity: 0.85; }

.pd-meta-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--hero-mid);
}

.pd-meta-dot { margin: 0 6px; opacity: 0.4; }

/* ── content ── */
.pd-content {
  padding: 16px 16px 40px;
  max-width: var(--page-width);
  margin: 0 auto;
}

.pd-section { margin-bottom: 18px; }
.pd-section > .section-label { margin-bottom: 6px; display: block; }

.pd-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.pd-section-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pd-section-header-meta {
  font-size: var(--fs-12);
  color: var(--ink-light);
  padding-right: 2px;
}
.pd-header-open-btn {
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: var(--fs-12);
}
.pd-header-open-btn:hover { opacity: 0.75; }

/* ── detail rows ── */
.pd-detail-row {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.pd-detail-row:last-child { border-bottom: none; }

.pd-detail-label {
  font-size: var(--fs-12);
  color: var(--ink-light);
  width: 70px;
  flex-shrink: 0;
}

.pd-detail-val {
  font-size: var(--fs-12);
  color: var(--ink);
  flex: 1;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-missing { color: var(--ink-light); font-style: italic; }

.pd-add-btn {
  font-size: var(--fs-12);
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  flex-shrink: 0;
}

/* ── inline edit forms ── */
.pd-inline-form {
  padding: 10px 14px 12px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.pd-inline-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--fs-12);
  color: var(--ink-light);
  font-family: var(--font-sans);
}

.pd-inline-input {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  width: 110px;
}
.pd-inline-input:focus { outline: none; border-color: var(--accent); }

.pd-inline-select {
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  min-width: 130px;
}
.pd-inline-select:focus { outline: none; border-color: var(--accent); }

.pd-inline-actions {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  padding-bottom: 1px;
}

.pd-inline-save {
  height: 30px;
  padding: 0 12px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.pd-inline-save:hover { opacity: 0.85; }
.pd-inline-save:disabled { opacity: 0.4; cursor: default; }

.pd-inline-cancel {
  height: 30px;
  padding: 0 10px;
  background: transparent;
  color: var(--ink-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  cursor: pointer;
  transition: all 0.15s;
}
.pd-inline-cancel:hover { border-color: var(--ink-mid); color: var(--ink); }

/* ── notes ── */
.pd-notes {
  padding: 12px 14px;
  font-size: var(--fs-12);
  color: var(--ink-mid);
  line-height: 1.6;
}

.pd-notes-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.pd-notes-textarea:focus { border-color: var(--accent); }

.pd-empty-state {
  padding: 12px 14px;
  font-size: var(--fs-12);
  color: var(--ink-light);
  font-style: italic;
}

/* ── tag chips ── */
.pd-tag-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.pd-tag-chip {
  font-size: var(--fs-10);
  font-weight: 500;
  padding: 2px 7px;
  border-radius: var(--radius-2xl);
  background: var(--accent-lt);
  color: var(--accent-text);
  white-space: nowrap;
}

.pd-tag-edit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  width: 100%;
}

.pd-tag-edit-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-12);
  font-weight: 500;
  padding: 3px 6px 3px 9px;
  border-radius: var(--radius-2xl);
  background: var(--accent-lt);
  color: var(--accent-text);
}

.pd-tag-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: var(--fs-12);
  line-height: 1;
  padding: 0 1px;
  opacity: 0.7;
  transition: opacity 0.1s;
}
.pd-tag-chip-remove:hover { opacity: 1; }

.pd-tag-add-input {
  height: 28px;
  padding: 0 8px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-2xl);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  width: 100%;
  max-width: 280px;
  outline: none;
  transition: border-color 0.15s;
}
.pd-tag-add-input:focus { border-color: var(--accent); border-style: solid; }
.pd-tag-add-input::placeholder { color: var(--ink-light); }

.pd-tag-picker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.pd-tag-picker-label {
  font-size: var(--fs-10);
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 2px;
  flex-shrink: 0;
}
.pd-tag-picker-chip {
  font-size: var(--fs-12);
  font-weight: 500;
  padding: 3px 9px;
  border-radius: var(--radius-2xl);
  border: 1px dashed var(--border);
  background: none;
  color: var(--ink-mid);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans);
  transition: all 0.12s;
}
.pd-tag-picker-chip:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }

/* ── session history ── */
.pd-session-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.pd-session-row:last-child { border-bottom: none; }

.pd-sess-date {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--fs-12);
  color: var(--ink-light);
  width: 76px;
  flex-shrink: 0;
}

.pd-sess-rows {
  font-size: var(--fs-12);
  color: var(--ink);
  flex: 1;
}

.pd-sess-added { color: var(--accent); font-weight: 600; }

.pd-sess-note {
  font-size: var(--fs-12);
  color: var(--ink-mid);
  font-style: italic;
  flex-shrink: 0;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── project actions ── */
.pd-project-actions {
  display: flex;
  gap: 8px;
  padding: 8px 0 16px;
  justify-content: flex-end;
}

.pd-icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.pd-icon-btn:hover { border-color: var(--ink-mid); color: var(--ink-mid); }
.pd-icon-btn-danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-lt); }
/* ══════════════════════════════════════
   ProjectDetail — session duration + start row
══════════════════════════════════════ */

.pd-sess-start {
  color: var(--ink-mid);
  font-size: var(--fs-12);
}

.pd-sess-dur {
  font-size: var(--fs-12);
  color: var(--ink-light);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════
   ProjectDetail — chart type icon + shaping steps
══════════════════════════════════════ */

.pd-chart-type-tt {
  font-size: var(--fs-12);
  color: var(--ink-mid);
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.pd-shaping-panel {
  margin: 0 0 4px 0;
  padding: 10px 14px 8px;
  background: var(--surface2);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pd-shaping-step-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.pd-shaping-step-row:last-of-type { border-bottom: none; }

.pd-shaping-step-text {
  font-size: var(--fs-12);
  color: var(--ink);
  flex: 1;
}

.pd-shaping-step-meta {
  font-size: var(--fs-12);
  color: var(--ink-mid);
  flex-shrink: 0;
}

.pd-shaping-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
}

.pd-shaping-add-btn {
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 5px 12px;
  font-size: var(--fs-12);
  color: var(--ink-mid);
  cursor: pointer;
  font-family: var(--font-sans);
  align-self: flex-start;
}
.pd-shaping-add-btn:hover { background: var(--surface); color: var(--ink); }


.pd-pill-divider {
  width: 1px;
  height: 20px;
  background: var(--ink-light);
  align-self: center;
  flex-shrink: 0;
}

/* ── Active Knitting — counter sidebar ── */
.ak-counter-sidebar {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 8px 5px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.ak-counter-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 3px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-lg);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: opacity 0.1s;
  width: 100%;
}
.ak-counter-pill:active { opacity: 0.7; }
.ak-counter-pill-value {
  font-size: var(--fs-12);
  font-weight: 700;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}
.ak-counter-tooltip {
  position: fixed;
  transform: translateY(-50%);
  background: rgba(20,20,20,0.92);
  color: #fff;
  font-size: var(--fs-12);
  font-family: var(--font-sans);
  font-weight: 500;
  padding: 4px 9px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
@keyframes ak-slide-in-right {
  from { transform: translate(-8px,-50%); opacity: 0; }
  to   { transform: translate(0,  -50%); opacity: 1; }
}
.ak-counter-slide-label {
  position: fixed;
  transform: translateY(-50%);
  background: rgba(20,20,20,0.92);
  color: #fff;
  font-size: var(--fs-12);
  font-family: var(--font-sans);
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--radius-lg);
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  animation: ak-slide-in-right 0.15s ease forwards;
}
/* ══════════════════════════════════════
   ProjectDetail — Pattern / Pattern Pages
══════════════════════════════════════ */

/* Action pill rows */
.pd-action-pills-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.pd-icon-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--ink-mid);
  background: none;
  color: var(--ink-mid);
  padding: 3px 8px 3px 5px;
  font-size: var(--fs-12);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.pd-icon-pill:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pd-icon-pill:disabled { opacity: 0.35; cursor: default; }

.pd-help-btn {
  background: none;
  border: none;
  color: var(--ink-light);
  padding: 3px;
  margin-left: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: var(--radius-md);
  transition: color 0.15s;
}
.pd-help-btn:hover { color: var(--ink-mid); }
.pd-help-btn-active { color: var(--accent); }
.pd-help-btn-active:hover { color: var(--accent); }

.pd-help-panel {
  background: var(--surface2);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.pd-help-entry { display: flex; flex-direction: column; gap: 3px; }

.pd-help-entry-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pd-help-entry-label {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--ink);
}

.pd-help-entry-desc {
  font-size: var(--fs-12);
  color: var(--ink-mid);
  margin: 0;
  padding-left: 18px;
}

/* Chart list container */
.pd-chart-list { display: flex; flex-direction: column; }

/* Nested per-type header (e.g. "Charts", "Instructions") inside the Pattern
   Pages card — a lighter-weight rule than .pd-section-header-row, since this
   nests one level below the outer "Pattern Pages" section-label rather than
   sitting beside it. Label and pill row share one line (not stacked) to save
   vertical space; `justify-content: space-between` pushes the pills to the
   right edge. Every nested header uses the same padding, so each section's
   pills land at the same right edge — they read as one aligned column even
   though they're in separate rows. */
.pd-nested-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}
.pd-nested-header .pd-action-pills-row { padding: 0; border-bottom: none; flex-wrap: nowrap; }

/* Chart rows (prototype-matching) */
.pd-chart-row {
  display: flex;
  align-items: center;
  padding: 10px 6px 10px 14px;
  gap: 8px;
  border-top: 1px solid var(--border);
}

/* Derived (combined) charts are computed from other charts, not a source page
   — reduced opacity flags them as a different kind of row, matching the
   prototype's chartRowDerived class. */
.pd-chart-row-derived { opacity: 0.7; }

.pd-delete-blocked {
  font-style: normal;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pd-delete-blocked-dismiss {
  background: transparent;
  border: none;
  color: var(--danger);
  cursor: pointer;
  padding: 0;
  font-size: var(--fs-16);
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
}

.pd-chart-row-left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pd-chart-row-name {
  flex: 1;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: 2px 4px;
  margin: -2px -4px;
}
.pd-chart-row-name:hover { background: var(--surface2); }

.pd-chart-rename-input {
  flex: 1;
  font-size: var(--fs-16);
  font-weight: 500;
  background: var(--surface2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 2px 6px;
  color: var(--ink);
  outline: none;
  font-family: var(--font-sans);
}

.pd-chart-row-meta {
  font-size: var(--fs-12);
  color: var(--ink-mid);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

.pd-chart-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.pd-chart-delete-btn {
  background: none;
  border: none;
  color: var(--ink-light);
  font-size: var(--fs-16);
  line-height: 1;
  padding: 3px 6px;
  cursor: pointer;
  border-radius: var(--radius-md);
}
.pd-chart-delete-btn:hover { color: var(--danger); }

.pd-chart-rows-input {
  width: 80px;
  flex-shrink: 0;
}

/* Knit split button */
.pd-knit-split-btn {
  display: flex;
  align-items: stretch;
  position: relative;
}

.pd-setup-btn {
  height: 26px;
  padding: 0 10px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.pd-setup-btn:hover { opacity: 0.85; }

.pd-knit-split-main {
  flex: 1;
  border-radius: 8px 0 0 8px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 7px 12px 7px 14px;
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  font-family: var(--font-sans);
}
.pd-knit-split-main:not([disabled]):hover { opacity: 0.85; }
.pd-knit-split-main:disabled { opacity: 0.35; cursor: default; }

.pd-knit-split-chevron {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-left: 1px solid rgba(0,0,0,0.18);
  border-radius: 0 8px 8px 0;
  padding: 7px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.pd-knit-split-chevron:hover { opacity: 0.85; }

.pd-knit-split-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  min-width: 160px;
  z-index: 100;
  overflow: hidden;
}

.pd-knit-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 14px;
  font-size: var(--fs-12);
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-sans);
}
.pd-knit-dropdown-item:hover { background: var(--surface2); }
.pd-knit-dropdown-item-active { color: var(--accent); font-weight: 600; }

/* Photo chip row — inside Pattern card, matches prototype sectionChips */
.pd-section-chips {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.pd-chips-row-icon {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--ink-light);
  display: flex;
  align-items: center;
}
.pd-chips-wrap {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pd-section-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  overflow: hidden;
}
.pd-section-chip-label {
  font-size: var(--fs-12);
  color: var(--accent);
  padding: 3px 8px 3px 10px;
  line-height: 1.4;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}
.pd-section-chip-label:hover { text-decoration: underline; }
.pd-section-chip-remove {
  font-size: var(--fs-9);
  color: var(--ink-light);
  padding: 3px 7px 3px 2px;
  cursor: pointer;
  background: transparent;
  border: none;
  line-height: 1;
  opacity: 0.6;
}
.pd-section-chip-remove:hover { opacity: 1; color: var(--danger); }

/* Cover photo chip — accent/filled + a ✓ prefix (see label text) so it's obvious
   at a glance which photo is the cover, without requiring the user to learn a
   color convention. */
.pd-section-chip-primary { background: var(--accent); border-color: var(--accent); }
.pd-section-chip-primary .pd-section-chip-label { color: var(--bg); }
.pd-section-chip-primary .pd-section-chip-remove { color: var(--bg); opacity: 0.7; }
.pd-section-chip-primary .pd-section-chip-remove:hover { opacity: 1; color: var(--danger); }

/* Photo chip labels set the cover on click — not a navigation link like other
   section-chip labels (bookmarks, etc.), so skip the inherited underline-on-hover. */
.pd-photo-chip-label:hover { text-decoration: none; }

/* Counter chips */
.pd-counter-chip-wrap {
  display: inline-flex;
  align-items: stretch;
  border-radius: 20px;
  overflow: hidden;
}
.pd-counter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 10px;
  font-size: var(--fs-12);
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: transparent;
  border-radius: 20px 0 0 20px;
}
.pd-counter-chip-name {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-counter-chip-value {
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: right;
}
.pd-counter-chip-remove {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px 3px 4px;
  font-size: var(--fs-12);
  font-weight: 400;
  border: none;
  cursor: pointer;
  background: transparent;
  border-radius: 0 20px 20px 0;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.pd-counter-chip-remove:hover { opacity: 1; }

/* Counter add/edit form */
.pd-counter-form {
  margin: 6px 0 2px;
  padding: 10px 12px;
  background: var(--surface2);
  border-radius: var(--radius-2xl);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-counter-form-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pd-counter-name-input {
  flex: 1;
  min-width: 120px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  font-size: var(--fs-12);
  color: var(--ink);
  background: var(--bg);
}
.pd-counter-name-input:focus {
  outline: none;
  border-color: var(--accent);
}
.pd-counter-countdown {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-12);
  color: var(--ink-mid);
  cursor: pointer;
  user-select: none;
}
.pd-counter-startval-row {
  padding-left: 20px;
}
.pd-counter-startval-label {
  font-size: var(--fs-12);
  color: var(--ink-mid);
  white-space: nowrap;
}
.pd-counter-startval-input {
  width: 70px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  font-size: var(--fs-12);
  color: var(--ink);
  background: var(--bg);
}
.pd-counter-startval-input:focus {
  outline: none;
  border-color: var(--accent);
}
.pd-counter-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pd-danger-text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 4px 6px;
  font-size: var(--fs-12);
  color: var(--danger);
  cursor: pointer;
  border-radius: var(--radius-lg);
  transition: background 0.15s;
}
.pd-danger-text-btn:hover { background: var(--danger-lt); }

/* Undo toast — delete page */
.pd-undo-toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
  font-size: var(--fs-12);
  color: var(--ink);
  white-space: nowrap;
  /* Above .pv-overlay (z-index 2000) — this toast is shown for a page
     delete triggered from inside the still-open PDF viewer, so it must
     out-rank the viewer regardless of DOM-order stacking ties. */
  z-index: 9999;
}
.pd-undo-btn {
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  border: none;
  background: var(--accent);
  color: var(--bg);
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
}
.pd-undo-dismiss {
  background: none;
  border: none;
  color: var(--ink-mid);
  cursor: pointer;
  font-size: var(--fs-14);
  padding: 2px 4px;
  line-height: 1;
}
/* Dashboard card photo image */
.photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
}