/* Fixes: the dock button, its panel, the ring a jump leaves on a section, and "See it live" on /feedback. */

/* The dock button */
.proto-dock .pd-fixes { flex: none; }
.pd-fixes b { min-width: 18px; padding: 3px var(--sp-0-5); border-radius: 999px; background: var(--b-accent); color: var(--b-accent-ink); font: 600 10px/1 var(--font-mono); letter-spacing: 0; text-align: center; }
.proto-dock .pd-fixes[aria-expanded="true"] { background: color-mix(in srgb, var(--b-on-dark) 26%, transparent); }

/* The panel: the dock's own dark glass, above it on the right */
.fx-panel { position: fixed; right: 14px; bottom: 72px; z-index: 76; display: flex; flex-direction: column; width: min(440px, calc(100vw - 28px)); max-height: min(620px, calc(100vh - 150px));
  border-radius: 18px; background: rgba(var(--b-shadow), .96); color: var(--b-on-dark); box-shadow: 0 28px 56px -22px rgba(var(--b-shadow), .8), 0 0 0 1px color-mix(in srgb, var(--b-on-dark) 10%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: 400 14px/1.35 var(--font-text); --focus: var(--b-accent-on-dark); --fx-dim: color-mix(in srgb, var(--b-on-dark) 66%, transparent); --fx-line: color-mix(in srgb, var(--b-on-dark) 14%, transparent); }
.fx-panel[hidden] { display: none; }
.fx-panel:focus { outline: none; }
.fx-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1-5); padding: var(--sp-2) var(--sp-1-5) var(--sp-1) var(--sp-2); }
.fx-t { margin: 0; font: 600 15px/1.2 var(--font-text); }
.fx-n { margin-left: var(--sp-1); color: var(--fx-dim); font: 500 11px/1 var(--font-mono); letter-spacing: .06em; }
.fx-x { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--b-on-dark); cursor: pointer; }
.fx-x:hover { background: color-mix(in srgb, var(--b-on-dark) 12%, transparent); }
.fx-x .ico { width: 16px; height: 16px; }
.fx-tools { display: grid; gap: var(--sp-1); padding: 0 var(--sp-2) var(--sp-1); border-bottom: 1px solid var(--fx-line); }
.fx-q { position: relative; display: block; }
.fx-q .ico { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--fx-dim); pointer-events: none; }
.fx-q input { width: 100%; min-height: 38px; padding: 0 var(--sp-1-5) 0 var(--sp-4); border: 1px solid var(--fx-line); border-radius: 999px; background: color-mix(in srgb, var(--b-on-dark) 7%, transparent); color: var(--b-on-dark); font: 400 14px/1 var(--font-text); }
.fx-q input::placeholder { color: var(--fx-dim); }
.fx-q input:focus { outline: 2px solid var(--b-accent-on-dark); outline-offset: 1px; }
.fx-seg { display: inline-flex; justify-self: start; gap: 2px; padding: 2px; border-radius: 999px; background: color-mix(in srgb, var(--b-on-dark) 9%, transparent); }
.fx-seg button { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 28px; padding: 0 var(--sp-1-5); border: 0; border-radius: 999px; background: none; color: var(--fx-dim); font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.fx-seg button:hover { color: var(--b-on-dark); }
.fx-seg button[aria-pressed="true"] { background: var(--b-accent); color: var(--b-accent-ink); }
.fx-seg b { font-weight: 600; opacity: .8; }

.fx-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: var(--sp-0-5) var(--sp-1) var(--sp-1); overflow: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; }
.fx-list ul { margin: 0; padding: 0; list-style: none; }
.fx-g[hidden], .fx-o[hidden] { display: none; }
.fx-gh { position: sticky; top: -4px; z-index: 1; display: flex; gap: var(--sp-1); margin: 0; padding: var(--sp-1) var(--sp-1) var(--sp-0-5); background: rgb(var(--b-shadow)); color: var(--fx-dim); font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.fx-gh span { color: var(--b-accent-on-dark); }
.fx-o { display: grid; grid-template-columns: 44px 1fr 18px; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-1); border-radius: 10px; cursor: pointer; }
.fx-o[aria-selected="true"] { background: color-mix(in srgb, var(--b-on-dark) 12%, transparent); box-shadow: inset 2px 0 0 var(--b-accent-on-dark); }
.fx-id { color: var(--b-accent-on-dark); font: 600 12px/1 var(--font-mono); letter-spacing: .02em; }
.fx-l { display: grid; gap: 3px; min-width: 0; font-size: 13.5px; line-height: 1.3; }
.fx-l small { display: flex; gap: var(--sp-1); overflow: hidden; color: var(--fx-dim); font: 400 11px/1.2 var(--font-mono); white-space: nowrap; text-overflow: ellipsis; }
.fx-l small i { font-style: normal; }
.fx-l small i::before { content: "·"; margin-right: var(--sp-1); }
.fx-o.is-here .fx-l small::after { content: "· This page"; color: var(--b-accent-on-dark); }
.fx-go { color: var(--fx-dim); opacity: 0; transition: opacity .15s, transform .15s; }
.fx-go .ico { width: 15px; height: 15px; }
.fx-o[aria-selected="true"] .fx-go { opacity: 1; transform: translateX(2px); color: var(--b-on-dark); }
.fx-empty { margin: 0; padding: var(--sp-2); color: var(--fx-dim); font-size: 13.5px; text-align: center; }
.fx-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1-5); padding: var(--sp-1) var(--sp-2) var(--sp-1-5); border-top: 1px solid var(--fx-line); font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.fx-keys { display: inline-flex; align-items: center; gap: var(--sp-0-5); color: var(--fx-dim); }
.fx-keys kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 var(--sp-0-5); border: 1px solid var(--fx-line); border-radius: 5px; font: inherit; }
.fx-keys kbd + kbd { margin-left: -1px; }
.fx-foot a { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--b-on-dark); text-decoration: none; }
.fx-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fx-foot a .ico { width: 14px; height: 14px; }

/* The ring a jump leaves: drawn over the section, fading out */
.fx-ring { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px var(--b-paper), 0 0 0 3px var(--b-accent), 0 0 0 10px rgba(var(--b-accent-rgb), .18);
  animation: fx-ring 2.7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes fx-ring { 0% { opacity: 0; scale: 1.015; } 10% { opacity: 1; scale: 1; } 62% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { @keyframes fx-ring { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } } }
[data-fx-focus]:focus { outline: none; }

/* "See it live" on each done point of /feedback */
.fbk-live { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-0-5) var(--sp-1-5); margin: var(--sp-1-5) 0 0; }
.fbk-live a { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--b-primary); font-weight: 600; font-size: 14px; text-decoration: none; }
.fbk-live a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fbk-live a .ico { width: 15px; height: 15px; transition: transform .15s; }
.fbk-live a:hover .ico { transform: translateX(3px); }
.fbk-live span { color: var(--b-ink-3); font: 400 12px/1 var(--font-mono); }

@media (max-width: 640px) {
  /* The dock is wider than a phone: Fixes comes first, and the rest swipes sideways instead of running off screen */
  .proto-dock { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .proto-dock::-webkit-scrollbar { display: none; }
  .proto-dock > * { flex: none; }
  .proto-dock .pd-fixes { order: -1; }
  .fx-panel { left: 10px; right: 10px; width: auto; max-height: min(560px, calc(100dvh - 200px)); }
  .fx-keys { display: none; }
  .fx-o { grid-template-columns: 40px 1fr 16px; padding: var(--sp-1) var(--sp-1); }
}