/* ══════════════════════════════════════════════════════════════
   PHASE 5 — Accessibility · SS Layers · Shareable URLs
   ══════════════════════════════════════════════════════════════ */

/* ── Skip link ─────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 99999;
  background: var(--accent2); color: #fff;
  padding: 10px 18px; border-radius: 8px;
  font-size: 0.88em; font-weight: 700; text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* ── Screen reader only ────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── SS Layer Toolbar ──────────────────────────────────────── */
.ss-layer-toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 10px;
}
.ss-lt-label {
  font-size: 0.72em; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap; margin-right: 2px;
}
.ss-lt-btn {
  padding: 5px 10px; border-radius: 7px;
  border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text2);
  font-size: 0.8em; font-weight: 700; cursor: pointer;
  transition: all 0.15s; font-family: 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
}
.ss-lt-btn:hover { border-color: var(--accent2); color: var(--accent2); background: var(--accent2-light); }
.ss-lt-danger:hover { border-color: var(--danger); color: var(--danger); background: rgba(220,38,38,0.08); }
.ss-lt-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; margin: 0 2px; }
.ss-lt-color {
  width: 32px; height: 28px; border: 1.5px solid var(--border);
  border-radius: 6px; cursor: pointer; padding: 2px;
  background: var(--surface);
}
.ss-lt-size {
  width: 52px; padding: 5px 6px;
  border: 1.5px solid var(--border); border-radius: 7px;
  font-size: 0.8em; background: var(--surface); color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.ss-lt-size:focus, .ss-lt-color:focus { outline: 2px solid var(--accent2); outline-offset: 1px; }

/* ── SS Overlay canvas cursor states ──────────────────────── */
#ssOverlay { touch-action: none; }
#ssOverlay:active { cursor: grabbing; }

/* ── Focus visible ring — global ──────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Remove default outline when focus-visible is supported */
:focus:not(:focus-visible) { outline: none; }

/* ── Workflow panel — no overlap with PWA banner ───────────── */
.workflow-panel { transition: bottom 0.3s ease; }

/* ── Coherence: consistent card hover ─────────────────────── */
.home-card:hover,
.workflow-card:hover {
  box-shadow: var(--shadow-lg);
}

/* ── Responsive SS layer toolbar ──────────────────────────── */
@media (max-width: 640px) {
  .ss-layer-toolbar { gap: 4px; padding: 8px 10px; }
  .ss-lt-btn { font-size: 0.74em; padding: 4px 8px; }
  .ss-lt-label { display: none; }
}