/* Site-wide chrome shared by every page: the prev/page/next pill
   (site-nav.js) and the "Show the thinking" overlay (thinking.js).
   Self-contained on purpose - it's linked from both styles.css pages and
   case-study.css pages, so it doesn't lean on either file's tokens. */

:root {
  --nav-bg: #2e1b15;
  --nav-ink: #fdfbf8;
  --nav-ink-muted: rgba(253, 251, 248, 0.62);
  --nav-line: rgba(253, 251, 248, 0.12);
  --nav-chip: rgba(253, 251, 248, 0.1);
  --nav-current: #ffd1c6;
  /* Redline coral: reads as "annotation" the way Figma's measurement red
     does, but warm enough to belong to the rest of the palette. */
  --thinking: #e8505b;
  --font-mono: var(--font-family-annotation);

  /* Shared by every page (this file is linked everywhere). */
  --color-white: #ffffff;
  /* Elevation scale - warm-brown shadows, small to large. */
  --shadow-sm: 0 2px 8px rgba(48, 30, 24, 0.2);
  --shadow-md: 0 10px 28px rgba(48, 30, 24, 0.2);
  --shadow-lg: 0 18px 48px rgba(48, 30, 24, 0.3);
}

/* ==== Nav pill ====
   After karyll.com: "← Prev · Page ▾ · Next →" in one pill, a flat
   dropdown with a hint on the right of every row, and a keyboard shortcuts
   dialog at the end. */
.site-nav {
  position: fixed;
  z-index: 30;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding: 3px;
  border: 1px solid var(--nav-line);
  border-radius: 100px;
  background: var(--nav-bg);
  color: var(--nav-ink);
  font-family: var(--font-family-body);
  font-size: var(--font-size-100);
  font-weight: var(--font-label-weight);
  line-height: var(--font-label-line-height);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  /* Same name on every page, so the pill holds still (or glides between
     placements) during the cross-document view transition. */
  view-transition-name: site-nav;
}

.site-nav svg { width: 12px; height: 12px; flex: none; }

.site-nav-step,
.site-nav-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 0 14px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--nav-ink-muted);
  font: inherit;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.site-nav-step:hover,
.site-nav-toggle:hover,
.site-nav.is-menu-open .site-nav-toggle { background: var(--nav-chip); color: var(--nav-ink); }
.site-nav-step:focus-visible,
.site-nav-toggle:focus-visible { outline: 2px solid var(--nav-current); outline-offset: 1px; }

.site-nav-toggle { color: var(--nav-ink); font-weight: var(--font-label-strong-weight); cursor: pointer; }
.site-nav-toggle svg { color: var(--nav-ink-muted); transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1); }
.site-nav.is-menu-open .site-nav-toggle svg { transform: rotate(180deg); }

/* The current page's name rolls over to the next one between pages
   (page-transitions.css animates this name). */
.site-nav-label { display: block; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; view-transition-name: site-nav-label; }

/* Arrows lean the way they go on hover. */
.site-nav-arrow { display: inline-block; transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1); }
.site-nav-step[rel="prev"]:hover .site-nav-arrow { transform: translateX(-2px); }
.site-nav-step[rel="next"]:hover .site-nav-arrow { transform: translateX(2px); }

.site-nav-current { position: relative; height: 100%; }

/* A soft band of light sweeps across the pill once as a page opens. */
.site-nav-sheen {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.site-nav-sheen i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, var(--nav-chip) 35%, var(--nav-chip) 65%, transparent);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .site-nav-sheen i { animation: site-nav-sheen 0.9s 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
}
@keyframes site-nav-sheen {
  from { left: -45%; opacity: 1; }
  to { left: 100%; opacity: 1; }
}

/* ---- Dropdown ---- */
.site-nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--nav-line);
  border-radius: 12px;
  background: var(--nav-bg);
  box-shadow: var(--shadow-lg);
}

.site-nav-menu a,
.site-nav-menu button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--nav-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  outline-offset: -2px;
}
.site-nav-menu a:hover,
.site-nav-menu a:focus-visible,
.site-nav-menu button:hover,
.site-nav-menu button:focus-visible { background: var(--nav-chip); }
.site-nav-menu a[aria-current] { background: var(--nav-chip); color: var(--nav-current); }

.site-nav-menu small {
  font-family: var(--font-annotation-family);
  font-size: var(--font-annotation-size);
  font-weight: var(--font-annotation-weight);
  line-height: var(--font-annotation-line-height);
  letter-spacing: var(--font-annotation-tracking);
  color: var(--nav-ink-muted);
}
.site-nav-menu a[aria-current] small { color: var(--nav-current); }

.site-nav-sep { height: 1px; margin: 5px 6px; background: var(--nav-line); }

/* ---- Keyboard shortcuts dialog ---- */
.site-nav-keys {
  width: min(340px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid var(--nav-line);
  border-radius: 14px;
  background: var(--nav-bg);
  color: var(--nav-ink);
  font-family: var(--font-family-body);
  font-size: var(--font-size-100);
  box-shadow: var(--shadow-lg);
}
.site-nav-keys::backdrop { background: rgba(46, 27, 21, 0.35); }
.site-nav-keys h2 { margin: 0 0 14px; font-size: var(--font-size-200); font-weight: var(--font-label-strong-weight); }
.site-nav-keys dl { display: grid; gap: 10px; margin: 0; }
.site-nav-keys div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.site-nav-keys dt, .site-nav-keys dd { margin: 0; }
.site-nav-keys dd { color: var(--nav-ink-muted); }
.site-nav-keys kbd + kbd { margin-left: 3px; }
.site-nav-keys form { margin-top: 18px; text-align: right; }
.site-nav-keys form button {
  padding: 8px 16px;
  border: 0;
  border-radius: 100px;
  background: var(--nav-ink);
  color: var(--nav-bg);
  font: inherit;
  font-weight: var(--font-label-strong-weight);
  cursor: pointer;
}

.site-nav kbd,
.site-nav-keys kbd {
  display: inline-block;
  min-width: 18px;
  padding: 2px 4px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-family: var(--font-annotation-family);
  font-size: var(--font-annotation-size);
  font-weight: var(--font-annotation-weight);
  line-height: var(--font-annotation-line-height);
  letter-spacing: var(--font-annotation-tracking);
  text-align: center;
  opacity: 0.7;
}

/* ==== Placement ==== */
/* Case studies: centred in the sticky top bar, level with the close button. */
.site-nav[data-context="case"] { top: 28px; left: 50%; transform: translateX(-50%); }
.site-nav[data-context="showcase"] { top: 20px; left: 50%; transform: translateX(-50%); }
/* Homepage: one row above the grid - the pill centred, the Comments
   button at the top right, level with it. */
.site-controls {
  /* Positioned and raised so everything in the row (the pill's menu and
     the Comments button) paints over the homepage's background gradient
     (z 0) and grid (z 1), not just the pill itself. */
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 0 0 var(--gap, 24px);
}
.site-controls .site-nav { grid-column: 2; }
.site-controls .thinking-controls { grid-column: 3; justify-self: end; }
.site-nav[data-context="home"] { position: relative; }

/* While the Contents dropdown shares the top bar, the steps drop to
   arrows only so the three groups never collide. */
@media (max-width: 1299px) {
  .site-nav[data-context="case"] .site-nav-step-label { display: none; }
  .site-nav[data-context="case"] .site-nav-step { padding: 0 11px; }
}

/* Phones (and the stacked homepage): float at the bottom, in thumb reach,
   menu opening upward. */
@media (max-width: 960px) {
  .site-nav[data-context] {
    position: fixed;
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom));
    left: 50%;
    margin: 0;
    max-width: calc(100vw - 16px);
    transform: translateX(-50%);
  }
  .site-nav[data-context] .site-nav-menu { top: auto; bottom: calc(100% + 10px); }
  /* On the homepage the pill floats at the bottom like every other page,
     and Comments pins to the top-right corner. */
  .site-controls { display: block; margin: 0; }
  .site-controls .thinking-controls {
    position: fixed;
    z-index: 30;
    top: calc(12px + env(safe-area-inset-top));
    right: 12px;
  }
  .site-nav-step-label { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; }
  .site-nav-label { max-width: 14ch; }
  .site-nav-keys-row,
  .site-nav-keys-row + .site-nav-sep,
  .site-nav-menu .site-nav-sep:has(+ .site-nav-keys-row) { display: none; } /* no keyboard on a phone */
  /* Keep the last bit of every page clear of the floating pill. */
  body { padding-bottom: 72px; }
}

/* ==== Comments button (every page with comments, top right) ====
   A pill in the nav's colours, like a design tool's comments toggle. It
   previews what it turns on - the pins' avatar-and-number, here with the
   count of comments - and fills with the redline coral while they show.
   The homepage places it in .site-controls; every other page floats it at
   the top right, level with the case study top bar (or beside the
   Showcase's close button). */
.thinking-controls { display: flex; align-items: center; gap: 6px; }
.thinking-controls[hidden] { display: none; }
.thinking-controls.is-floating { position: fixed; z-index: 30; top: 28px; right: 24px; }
.thinking-controls.is-floating.is-beside-close { top: 24px; right: 80px; }
@media (max-width: 960px) {
  .thinking-controls.is-floating { top: calc(12px + env(safe-area-inset-top)); right: 12px; }
  .thinking-controls.is-floating.is-beside-close { right: 64px; }
  /* The site editor's dock takes the top of the screen here. */
  .thinking-controls.is-editable,
  .site-controls .thinking-controls.is-editable { top: 64px; }
}

.thinking-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px 0 5px;
  border: 1px solid var(--nav-line);
  border-radius: 100px;
  background: var(--nav-bg);
  color: var(--nav-ink);
  font-family: var(--font-family-body);
  font-size: var(--font-size-100);
  font-weight: var(--font-label-strong-weight);
  line-height: var(--font-label-line-height);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.thinking-toggle:hover { background: color-mix(in srgb, var(--nav-bg) 86%, var(--nav-ink)); }
.thinking-toggle:focus-visible { outline: 2px solid var(--nav-current); outline-offset: 2px; }

.thinking-toggle[aria-pressed="true"] { background: var(--thinking); border-color: transparent; }
.thinking-toggle[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--thinking) 88%, black); }

.thinking-toggle-avatar { position: relative; flex: none; width: 28px; height: 28px; }
.thinking-toggle-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border: 1.5px solid var(--nav-ink);
  border-radius: 50%;
  object-fit: cover;
}
.thinking-toggle-avatar span {
  position: absolute;
  right: -5px;
  bottom: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border: 1.5px solid var(--nav-bg);
  border-radius: 100px;
  background: var(--thinking);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: var(--font-annotation-size);
  font-weight: var(--font-label-strong-weight);
  line-height: 12px;
  text-align: center;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.thinking-toggle[aria-pressed="true"] .thinking-toggle-avatar span { border-color: var(--thinking); background: var(--color-white); color: var(--thinking); }

/* A soft pulse on the badge until the notes have been opened once - a hint
   that there's something to find, not an alarm. */
@media (prefers-reduced-motion: no-preference) {
  .thinking-toggle[aria-pressed="false"]:not(.is-seen) .thinking-toggle-avatar span { animation: thinking-nudge 2.4s 1.2s ease-out 3; }
}
@keyframes thinking-nudge {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--thinking) 60%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--thinking) 0%, transparent); }
}

/* ---- Editing (local site editor only: tools/editor.js turns it on) ---- */
.thinking-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px 0 14px;
  border: 1px dashed color-mix(in srgb, var(--thinking) 70%, transparent);
  border-radius: 100px;
  background: var(--nav-bg);
  color: var(--nav-ink);
  font-family: var(--font-family-body);
  font-size: var(--font-size-100);
  font-weight: var(--font-label-strong-weight);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.thinking-add span { font-size: 16px; line-height: 1; }
.thinking-add:hover { background: color-mix(in srgb, var(--nav-bg) 86%, var(--nav-ink)); }
.thinking-add[aria-pressed="true"] { border-style: solid; background: var(--thinking); }

/* Picking where a new comment goes. */
html.is-adding-comment, html.is-adding-comment * { cursor: crosshair !important; }
.thinking-target {
  position: fixed;
  z-index: 24;
  pointer-events: none;
  outline: 1.5px dashed var(--thinking);
  outline-offset: 2px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--thinking) 8%, transparent);
}

/* ==== Overlay ==== */
/* Over the nav pill and Comments (z 30), so a pin on the pill itself is
   never buried - but hidden while the page menu is open, so pins never
   cover its list. */
.thinking-layer {
  position: fixed;
  inset: 0;
  z-index: 31;
  pointer-events: none;
  font-family: var(--font-mono);
}
/* Case studies: under the sticky top bar (z 10), so pins slide beneath it
   as the page scrolls and never cover its open Contents menu. */
.cs-topbar ~ .thinking-layer { z-index: 9; }
html:has(.site-nav.is-menu-open) .thinking-layer { visibility: hidden; }

.thinking-redline {
  position: absolute;
  outline: 1px dashed var(--thinking);
  outline-offset: 2px;
}

.thinking-redline span {
  position: absolute;
  bottom: calc(100% + 6px);
  left: -3px;
}

.thinking-redline span {
  white-space: nowrap;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--thinking);
  color: var(--color-white);
  font-size: var(--font-size-050);
  line-height: var(--font-annotation-line-height);
}

.thinking-pin {
  position: absolute;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  animation: thinking-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.thinking-pin img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.thinking-pin span {
  position: absolute;
  right: -6px;
  bottom: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border: 1.5px solid var(--color-white);
  border-radius: 100px;
  background: var(--thinking);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: var(--font-annotation-size);
  font-weight: var(--font-label-strong-weight);
  line-height: 12px;
}

.thinking-pin:hover,
.thinking-pin.is-active { transform: scale(1.12); border-color: var(--thinking); }

@keyframes thinking-pop {
  from { transform: scale(0.4); opacity: 0; }
}

.thinking-popover {
  position: fixed;
  z-index: 40;
  width: min(280px, calc(100vw - 24px));
  padding: 12px 14px 14px;
  border-radius: 12px;
  background: var(--nav-bg);
  color: var(--nav-ink);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  font-family: var(--font-family-body);
}

.thinking-popover p { margin: 0; }

.thinking-popover-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px !important;
  font-family: var(--font-label-strong-family);
  font-size: var(--font-label-strong-size);
  font-weight: var(--font-label-strong-weight);
  line-height: var(--font-label-strong-line-height);
  letter-spacing: var(--font-label-strong-tracking);
}

.thinking-popover-head img { width: 20px; height: 20px; border-radius: 50%; }
.thinking-popover-head span { font-family: var(--font-annotation-family); font-size: var(--font-annotation-size); font-weight: var(--font-annotation-weight); line-height: var(--font-annotation-line-height); letter-spacing: var(--font-annotation-tracking); color: var(--nav-ink-muted); }

.thinking-popover-input {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--nav-line);
  border-radius: 8px;
  background: var(--nav-chip);
  color: var(--nav-ink);
  font-family: var(--font-body-small-family);
  font-size: var(--font-body-small-size);
  line-height: var(--font-body-small-line-height);
  resize: vertical;
}
.thinking-popover-input:focus { outline: 2px solid var(--nav-current); outline-offset: 1px; }

.thinking-popover-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.thinking-popover-actions span { margin-right: auto; color: var(--nav-ink-muted); font-size: var(--font-size-100); }
.thinking-popover-actions button {
  padding: 6px 12px;
  border: 1px solid var(--nav-line);
  border-radius: 100px;
  background: transparent;
  color: var(--nav-ink);
  font-family: var(--font-family-body);
  font-size: var(--font-size-100);
  font-weight: var(--font-label-strong-weight);
  cursor: pointer;
}
.thinking-popover-actions button:hover { background: var(--nav-chip); }
.thinking-popover-actions .is-primary { border-color: transparent; background: var(--nav-ink); color: var(--nav-bg); }
.thinking-popover-actions .is-primary:hover { background: var(--nav-current); }
.thinking-popover-actions .is-danger { border-color: transparent; background: var(--thinking); color: var(--color-white); }
.thinking-popover-actions button:disabled { opacity: 0.5; cursor: default; }

/* Editor only: where the pin sits on its element. Each button is a tiny
   box with a dot on the corner it stands for; the current one is filled. */
.thinking-popover-place {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--nav-line);
  color: var(--nav-ink-muted);
  font-size: var(--font-size-100);
}
.thinking-popover-place span { margin-right: 2px; }
.thinking-popover-place em { margin-left: auto; font-style: normal; }
.thinking-popover-place button {
  position: relative;
  width: 24px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--nav-line);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.thinking-popover-place button:hover { background: var(--nav-chip); }
.thinking-popover-place button:focus-visible { outline: 2px solid var(--nav-current); outline-offset: 1px; }
.thinking-popover-place button i {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--nav-ink-muted);
}
.thinking-popover-place button[aria-pressed="true"] { border-color: var(--thinking); }
.thinking-popover-place button[aria-pressed="true"] i { background: var(--thinking); }
.thinking-popover-place button:disabled { opacity: 0.5; cursor: default; }

.thinking-layer.is-editable .thinking-pin { cursor: grab; touch-action: none; }
.thinking-pin.is-dragging { cursor: grabbing; transform: scale(1.12); border-color: var(--thinking); transition: none; }

.thinking-popover-body { font-family: var(--font-body-small-family); font-size: var(--font-body-small-size); font-weight: var(--font-body-small-weight); line-height: var(--font-body-small-line-height); letter-spacing: var(--font-body-small-tracking); text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  .thinking-pin { animation: none; }
}