/* The landing carries the real ResolvUI dock. Spacing on the 4px grid. */
:root { --orange: #ee9a5a; --orange-ink: #3b1d05; }

/* the dock */
.dock { position: fixed; z-index: 55; left: 50%; bottom: 24px; padding: 8px; display: flex; align-items: center; gap: 4px; border: 1px solid #333; border-radius: 9999px; background: #141414f2; backdrop-filter: blur(12px); box-shadow: 0 16px 48px #000000cc; transform: translateX(-50%); }
.js .dock { animation: dock-in .9s var(--spring) 1.6s both; }
@keyframes dock-in { from { opacity: 0; transform: translate(-50%, 48px) scale(.9); } }
.db { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 9999px; background: transparent; color: #cfcfc8; cursor: pointer; transition: background .2s ease, color .2s ease, transform .3s var(--spring); }
.db svg { width: 20px; height: 20px; }
.db:hover { background: #262626; transform: translateY(-4px); }
.db[aria-pressed="true"] { background: var(--lime); color: var(--lime-ink); }
.dsep { width: 1px; height: 24px; margin-inline: 4px; background: #333; }
.bd { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 4px; display: grid; place-items: center; border-radius: 9999px; background: var(--orange); color: var(--orange-ink); font: 700 10px/1 var(--mono); transition: background .3s ease, color .3s ease; }
.bd.zero { background: var(--lime); color: var(--lime-ink); }
.tip { position: absolute; bottom: 56px; left: 50%; padding: 8px 12px; border-radius: 8px; background: #fff; color: #141414; font: 600 12px/1 var(--mono); white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.db:hover .tip, .db:focus-visible .tip { opacity: 1; transform: translate(-50%, 0); }

/* overlays (heatmap, select, ruler) */
.overlay { position: fixed; z-index: 50; inset: 0; pointer-events: none; }
.hb { position: fixed; border: 2px solid var(--lime); border-radius: 4px; background: #c9f15a14; pointer-events: none; }
.hb.off { border-color: var(--orange); background: #ee9a5a22; }
.hb b { position: absolute; left: -2px; top: -22px; padding: 4px 8px; border-radius: 9999px; background: var(--lime); color: var(--lime-ink); font: 700 12px/1 var(--mono); white-space: nowrap; }
.hb.off b { background: var(--orange); color: var(--orange-ink); }
.selbox { position: fixed; z-index: 52; border: 2px solid #5b8cff; border-radius: 4px; background: #5b8cff1a; pointer-events: none; transition: all .12s var(--ease); }
.selbox span { position: absolute; left: -2px; top: -26px; padding: 4px 8px; border-radius: 4px; background: #5b8cff; color: #fff; font: 600 12px/1 var(--mono); white-space: nowrap; }
.sel-mode, .sel-mode * { cursor: crosshair !important; }
.guides { position: fixed; z-index: 51; inset: 0; pointer-events: none; }
.guides i { position: absolute; background: var(--lime); box-shadow: 0 0 0 1px #0a0a0a66; pointer-events: auto; }
.gv { top: 0; bottom: 0; width: 2px; left: calc(var(--gx, 50%) - 1px); cursor: ew-resize; }
.gh { left: 0; right: 0; height: 2px; top: calc(var(--gy, 50%) - 1px); cursor: ns-resize; }
.gv::after, .gh::after { content: ''; position: absolute; }
.gv::after { inset: 0 -8px; } .gh::after { inset: -8px 0; }
.gchip { position: absolute; left: calc(var(--gx, 50%) + 12px); top: calc(var(--gy, 50%) + 12px); padding: 8px 12px; border-radius: 9999px; background: var(--lime); color: var(--lime-ink); font: 700 12px/1 var(--mono); }

.inspector { position: fixed; z-index: 56; right: 24px; bottom: 96px; width: 240px; padding: 16px; display: grid; gap: 12px; border: 1px solid #333; border-radius: 12px; background: #141414f2; backdrop-filter: blur(12px); box-shadow: 0 16px 48px #000000cc; animation: pop .4s var(--spring); }
.inspector[hidden], .audit[hidden], .guides[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.insp-h { display: flex; align-items: center; justify-content: space-between; font: 600 12px/1 var(--mono); color: var(--lime); }
.insp-h button { width: 24px; height: 24px; border: 0; border-radius: 4px; background: transparent; color: var(--mut); font-size: 18px; cursor: pointer; }
.insp-r { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--mut); }
.insp-r em { padding: 4px 8px; border-radius: 4px; background: #0d0d0d; color: var(--orange); font: 600 12px/1 var(--mono); font-style: normal; }
.insp-r em.ok { color: var(--lime); }
.insp-snap { padding: 12px; border: 0; border-radius: 9999px; background: var(--lime); color: var(--lime-ink); font-weight: 700; cursor: pointer; transition: transform .25s var(--spring); }
.insp-snap:active { transform: scale(.95); }

.audit { position: fixed; z-index: 56; left: 24px; bottom: 96px; width: min(360px, calc(100% - 48px)); max-height: 50svh; padding: 16px; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; border: 1px solid #333; border-radius: 12px; background: #141414f2; backdrop-filter: blur(12px); box-shadow: 0 16px 48px #000000cc; animation: pop .4s var(--spring); }
.audit-h { display: flex; align-items: center; gap: 12px; }
.audit-h b { font-size: 16px; }
.audit-h span { flex: 1; color: var(--mut); font-size: 12px; }
.fixall { padding: 8px 16px; border: 0; border-radius: 9999px; background: var(--lime); color: var(--lime-ink); font-weight: 700; font-size: 12px; cursor: pointer; }
.audit ul { margin: 0; padding: 0; list-style: none; overflow: auto; display: grid; gap: 4px; align-content: start; }
.audit li { padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 8px; background: #0d0d0d; font: 500 12px/1.3 var(--mono); color: #d0d0c8; transition: background .3s ease, opacity .3s ease; }
.audit li em { font-style: normal; color: var(--orange); white-space: nowrap; }
.audit li.fixed em { color: var(--lime); }
.audit li:hover { background: #1c1c1c; cursor: pointer; }
.audit-note { margin: 0; color: var(--dim); font-size: 12px; }

/* terminal closing */
.term { width: min(720px, 100%); overflow: hidden; border: 1px solid #333; border-radius: 12px; background: #0d0d0d; text-align: left; box-shadow: 0 32px 96px #000000aa; }
.term-bar { height: 40px; padding: 0 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); background: #141414; color: var(--dim); font: 500 12px/1 var(--mono); }
.term-bar i { width: 10px; height: 10px; border-radius: 9999px; background: #3a3a3a; }
.term-bar span { flex: 1; margin-left: 8px; }
.term-bar button { padding: 4px 8px; border: 1px solid #333; border-radius: 4px; background: transparent; color: var(--mut); font: inherit; cursor: pointer; }
.term-body { min-height: 176px; padding: 24px; display: grid; gap: 8px; align-content: start; font: 500 14px/1.5 var(--mono); }
.t-line { margin: 0; }
.t-line i { color: var(--lime); font-style: normal; }
.t-line[data-step] { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s var(--ease); }
.t-line.on { opacity: 1; transform: none; }
.t-dim { color: var(--mut); } .t-bad { color: var(--orange); } .t-ok { color: var(--lime); font-weight: 700; }
.caret { display: inline-block; width: 8px; height: 16px; margin-left: 4px; vertical-align: -2px; background: var(--lime); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term-cmds { padding: 12px 24px; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); }
.term-cmds span { padding: 8px 12px; border: 1px solid #333; border-radius: 9999px; color: var(--mut); font: 500 12px/1 var(--mono); }
.term-cmds span:hover { border-color: var(--lime); color: var(--lime); }

@media (max-width: 900px) {
  .inspector { right: 16px; bottom: 80px; }
  .audit { left: 16px; bottom: 80px; }
}
@media (max-width: 640px) {
  .dock { bottom: 16px; }
  .db { width: 36px; height: 36px; }
  .tip { display: none; }
  .term-body { font-size: 12px; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .dock, .inspector, .audit { animation: none; }
  .caret { animation: none; }
  .t-line[data-step] { opacity: 1; transform: none; }
}