/* ============================================================
   Shared layer for Arkline demo sites: the "Demo by Arkline" bar and
   the "why it's built this way" notes. Loaded after the demo's own
   stylesheet; every rule is namespaced so it never touches demo styles.
   ============================================================ */

:root {
  --ark-bg: #05060a;
  --ark-ink: #eef0f8;
  --ark-muted: #969cae;
  --ark-cobalt: #0539b7;
  --ark-electric: #4d6bff;
  --ark-bar-h: 36px;
}
@media (pointer: coarse) { :root { --ark-bar-h: 40px; } }

body { padding-top: var(--ark-bar-h); }

/* ---------- demo bar (top of the page, the studio's voice over the demo's) ---------- */
.ark-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 900;
  height: var(--ark-bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-inline: clamp(14px, 3vw, 28px);
  background: var(--ark-bg);
  color: var(--ark-muted);
  border-bottom: 1px solid rgba(238, 240, 248, 0.1);
  font-size: 0.8rem; line-height: 1.2;
}
.ark-bar a { text-decoration: none; }
.ark-bar-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ark-ink); white-space: nowrap; min-width: 0; }
.ark-bar-brand svg { width: 16px; height: 16px; color: var(--ark-electric); flex: none; }
.ark-bar-brand small { color: var(--ark-muted); font-size: inherit; overflow: hidden; text-overflow: ellipsis; }
.ark-bar-links { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 26px); white-space: nowrap; flex: none; }
.ark-bar-links a { display: inline-flex; align-items: center; min-height: var(--ark-bar-h); padding: 0 2px; color: var(--ark-ink); text-decoration: none; transition: color 0.3s; }
.ark-bar-links a.ark-cta { min-height: 0; position: relative; }
.ark-bar-links a.ark-cta::before { content: ""; position: absolute; inset: -8px 0; }
.ark-bar-links .short { display: none; }
.ark-bar-links a:hover { color: var(--ark-electric); }
.ark-bar-links a.is-on { color: var(--ark-electric); }
.ark-bar-links a.ark-cta { color: #fff; background: var(--ark-cobalt); border-radius: 999px; padding: 5px 12px; }
.ark-bar-links a.ark-cta:hover { background: #0742d6; color: #fff; }
.ark-bar a:focus-visible { outline: 2px solid var(--ark-electric); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 599px) {
  .ark-bar-brand small, .ark-bar-links a.ark-bar-back, .ark-bar-links .long { display: none; }
  .ark-bar-brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ark-bar-links .short { display: inline; }
  .ark-bar-links { gap: 14px; }
  .ark-bar-links a.ark-cta { padding: 5px 10px; }
}

/* ---------- studio strip under the demo's footer ---------- */
.ark-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px;
  padding: 18px clamp(16px, 4vw, 32px);
  background: var(--ark-bg); color: var(--ark-muted);
  font-family: "Archivo", system-ui, sans-serif; font-size: 0.86rem;
}
.ark-strip a { color: var(--ark-ink); text-decoration: none; border-bottom: 1px solid rgba(238, 240, 248, 0.3); transition: border-color 0.3s; }
.ark-strip a:hover { border-color: var(--ark-electric); }
.ark-strip a.ark-strip-cta { color: #fff; background: var(--ark-cobalt); border: 0; border-radius: 999px; padding: 6px 14px; }
.ark-strip a.ark-strip-cta:hover { background: #0742d6; }

/* ---------- notes: source list (no-JS fallback via :target) ---------- */
.ark-notes-list { display: none; }
.ark-notes-list:target { display: block; }
.ark-notes-list {
  background: var(--ark-bg); color: var(--ark-ink);
  padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 72px);
}
.ark-notes-list h2 { font-size: 1.4rem; margin: 0 0 18px; }
.ark-notes-list ol { margin: 0; padding-left: 1.4em; max-width: 60ch; }
.ark-notes-list li { margin-bottom: 14px; color: var(--ark-muted); }
.ark-notes-list li strong { color: var(--ark-ink); display: block; margin-bottom: 2px; }
html.ark-notes-on .ark-notes-list { display: block; }
html.ark-notes-js .ark-notes-list { display: none; }
html.ark-notes-js.ark-notes-static .ark-notes-list { display: block; }

/* ---------- notes: pins ---------- */
html.ark-notes-on [data-note] { position: relative; }
.ark-pin {
  position: absolute; z-index: 40;
  top: 14px; left: 14px;
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--ark-cobalt); color: #fff;
  font: 700 0.8rem/1 system-ui, sans-serif;
  border: 0; cursor: pointer; padding: 0;
  box-shadow: 0 0 0 4px rgba(77, 107, 255, 0.25), 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
}
.ark-pin:hover, .ark-pin.is-active { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(77, 107, 255, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35); }
.ark-pin:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* 44px hit area on a 30px pin (::after is the pulse ring) */
.ark-pin::before { content: ""; position: absolute; inset: -7px; border-radius: 999px; }
/* closed notes take their pins out of view and out of the Tab order */
html:not(.ark-notes-on) .ark-pin { display: none; }
.ark-pin::after {
  content: ""; position: absolute; inset: -6px; border-radius: 999px;
  border: 1px solid rgba(77, 107, 255, 0.6);
  animation: arkPulse 2.4s ease-out infinite;
}
@keyframes arkPulse { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ark-pin::after { animation: none; } }

/* ---------- notes: panel ---------- */
.ark-panel {
  position: fixed; z-index: 910;
  left: 20px; bottom: 20px;
  width: min(320px, calc(100vw - 40px));
  background: var(--ark-bg); color: var(--ark-ink);
  border: 1px solid rgba(238, 240, 248, 0.12);
  border-radius: 16px;
  padding: 20px 22px 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  transform: translateY(16px); opacity: 0; visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s, visibility 0s linear 0.3s;
}
.ark-panel.is-open { transform: none; opacity: 1; visibility: visible; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s; }
.ark-panel-eyebrow { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ark-electric); margin-bottom: 10px; padding-right: 30px; }
.ark-panel-eyebrow span:last-child { color: var(--ark-muted); letter-spacing: 0.06em; }
.ark-panel h3 { font-size: 1.05rem; line-height: 1.3; margin: 0 0 8px; font-weight: 650; }
.ark-panel p { font-size: 0.92rem; line-height: 1.55; color: var(--ark-muted); margin: 0; }
.ark-panel-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 10px; }
.ark-panel-nav button {
  font: 600 0.82rem/1 inherit; color: var(--ark-ink);
  background: rgba(238, 240, 248, 0.06); border: 1px solid rgba(238, 240, 248, 0.14);
  border-radius: 999px; padding: 8px 14px; cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}
.ark-panel-nav button:hover { background: rgba(238, 240, 248, 0.12); border-color: rgba(238, 240, 248, 0.3); }
.ark-panel-nav button:focus-visible { outline: 2px solid var(--ark-electric); outline-offset: 2px; }
.ark-panel-nav button:disabled { opacity: 0.35; cursor: default; }
.ark-panel-close {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: 999px; border: 0;
  background: transparent; color: var(--ark-muted); cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.ark-panel-close:hover { color: var(--ark-ink); }
.ark-panel-close::before { content: ""; position: absolute; inset: -7px; }
/* wide screens: dock the panel in a left rail so it never covers the page */
@media (min-width: 1200px) {
  body { transition: padding-left 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
  html.ark-notes-on body { padding-left: 360px; }
  html.ark-notes-on section[data-note] > .ark-pin { left: max(14px, calc(50% - 590px + 14px)); }
}
.ark-panel-cta { display: block; margin-top: 14px; font-size: 0.85rem; color: var(--ark-electric); text-decoration: none; }
.ark-panel-cta:hover { text-decoration: underline; }
@media (max-width: 599px) {
  .ark-panel { right: 12px; left: 12px; width: auto; bottom: 12px; padding: 16px 18px 14px; max-height: 48vh; display: flex; flex-direction: column; overflow: hidden; }
  .ark-panel h3 { font-size: 0.98rem; }
  .ark-panel p { font-size: 0.86rem; line-height: 1.5; flex: 1 1 auto; min-height: 0; overflow: auto; }
  .ark-panel-nav { margin-top: 12px; }
  .ark-panel-cta { margin-top: 10px; font-size: 0.8rem; }
}