/* Lifted from version 0.2.1, which is kept whole at
   docs/reference/living-lens-360-exp001-v0.2.1.html. The rules for the shared
   board, the perspectives columns and the living memory are not here yet: they
   arrive with the surfaces they dress, rather than sitting unused. */

:root {
	--void: #0a0d13;
	--paper: #f4f2ed;
	--soft: #c9cdd2;
	--mute: #8f96a0;
	--faint: rgba(244, 242, 237, 0.07);
	--line: rgba(244, 242, 237, 0.15);
	--serif: 'Cormorant Garamond', Georgia, serif;
	--sans: 'Inter Tight', system-ui, sans-serif;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	background: var(--void);
	color: var(--paper);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.55;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--accent, #e0a94c);
	outline-offset: 2px;
}

a {
	color: var(--paper);
}

/* the time thread */
header.thread {
	position: sticky;
	top: 0;
	z-index: 30;
	background: rgba(10, 13, 19, 0.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--faint);
	padding: 10px 20px;
	display: flex;
	align-items: center;
	gap: 18px;
}
.brand {
	font-family: var(--serif);
	font-size: 1.2rem;
	background: none;
	border: 0;
	cursor: pointer;
	white-space: nowrap;
	padding: 0;
}
nav.time {
	display: flex;
	flex: 1;
	overflow-x: auto;
	scrollbar-width: none;
}
nav.time::-webkit-scrollbar {
	display: none;
}
.era {
	padding: 0 12px;
	border-left: 1px solid var(--faint);
	flex-shrink: 0;
}
.era > span {
	display: block;
	font-size: 0.7rem;
	color: var(--mute);
	padding-left: 8px;
}
.step {
	background: none;
	border: 0;
	padding: 3px 9px;
	border-radius: 14px;
	font-size: 0.86rem;
	color: var(--mute);
	cursor: pointer;
	white-space: nowrap;
}
.step.done {
	color: var(--paper);
}
.step.on {
	background: var(--paper);
	color: var(--void);
}
.me {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 0.82rem;
	color: var(--soft);
	white-space: nowrap;
}
.dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}

main {
	max-width: 1100px;
	margin: 0 auto;
	padding: 44px 22px 140px;
}
.narrow {
	max-width: 660px;
	margin: 0 auto;
}

h1,
h2,
h3 {
	font-family: var(--serif);
	font-weight: 400;
	margin: 0;
}
h1 {
	font-size: clamp(2.1rem, 5.6vw, 3.5rem);
	line-height: 1.06;
}
h2 {
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	line-height: 1.1;
	margin-bottom: 10px;
}
h3 {
	font-size: 1.4rem;
	line-height: 1.2;
}
.lede {
	color: var(--soft);
	font-size: 1.06rem;
	max-width: 62ch;
}
.muted {
	color: var(--mute);
}
.small {
	font-size: 0.84rem;
}

.btn {
	background: var(--paper);
	color: var(--void);
	border: 0;
	border-radius: 22px;
	padding: 10px 18px;
	cursor: pointer;
	font-weight: 500;
}
.btn.ghost {
	background: none;
	color: var(--paper);
	border: 1px solid var(--line);
}
.btn.tiny {
	padding: 4px 11px;
	font-size: 0.8rem;
}
.btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}
.gap {
	height: 28px;
}

textarea,
input[type='text'],
input[type='password'],
select {
	width: 100%;
	background: rgba(244, 242, 237, 0.035);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	line-height: 1.5;
}
select {
	appearance: none;
}
select option {
	background: var(--void);
}
textarea {
	min-height: 82px;
	resize: vertical;
}

.q {
	display: block;
	font-family: var(--serif);
	font-size: 1.45rem;
	line-height: 1.25;
	margin: 28px 0 8px;
}
.qwrap {
	position: relative;
}
.mic {
	position: absolute;
	right: 8px;
	bottom: 10px;
	background: none;
	border: 1px solid var(--line);
	border-radius: 14px;
	font-size: 0.72rem;
	padding: 2px 9px;
	color: var(--mute);
	cursor: pointer;
}
.mic.live {
	color: var(--void);
	background: var(--accent, #e0a94c);
	border-color: var(--accent, #e0a94c);
}
.note {
	border-left: 2px solid var(--line);
	padding: 4px 0 4px 14px;
	color: var(--mute);
	font-size: 0.88rem;
	margin: 18px 0;
}

/* the lens */
.lens {
	width: 100%;
	max-width: 300px;
	display: block;
}
.lens circle {
	mix-blend-mode: screen;
	transition:
		fill-opacity 0.6s,
		stroke-opacity 0.6s;
}
.lens text {
	font-family: var(--sans);
	font-size: 13px;
	fill: var(--soft);
}
.hero-lens circle {
	animation: converge 2.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-lens circle:nth-of-type(1) {
	--dx: 0px;
	--dy: -60px;
}
.hero-lens circle:nth-of-type(2) {
	--dx: 60px;
	--dy: 40px;
}
.hero-lens circle:nth-of-type(3) {
	--dx: -60px;
	--dy: 40px;
}
@keyframes converge {
	from {
		transform: translate(var(--dx), var(--dy));
		fill-opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.hero-lens circle {
		animation: none;
	}
}

/* the threshold */
.threshold {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 48px;
	align-items: center;
	min-height: 70vh;
}
.returned {
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 14px 18px;
	margin-top: 22px;
	color: var(--soft);
	max-width: 520px;
}
.lensline {
	margin-top: 6px;
	max-width: 420px;
}

/* the chapter */
.encounter {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	gap: 44px;
}
.places {
	list-style: none;
	margin: 0;
	padding: 0;
}
.place {
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-left: 2px solid var(--faint);
	padding: 10px 0 10px 14px;
	cursor: pointer;
	display: block;
}
.place.on {
	border-left-color: var(--paper);
}
.place b {
	display: block;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.18rem;
	line-height: 1.2;
}
.place.quiet b {
	color: var(--mute);
}
.place span {
	font-size: 0.76rem;
	color: var(--mute);
	display: flex;
	gap: 5px;
	align-items: center;
	margin-top: 3px;
}
.place .dot {
	width: 7px;
	height: 7px;
}
.anchor {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 22px 0;
	margin: 18px 0 6px;
}
.anchor .loc {
	font-size: 0.8rem;
	color: var(--mute);
}
.anchor p {
	font-family: var(--serif);
	font-size: 1.28rem;
	line-height: 1.45;
	margin: 10px 0 0;
}
.sealed {
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 18px 20px;
	margin-top: 22px;
}

/* elsewhere in the book, and declaring complete */
.sendbox {
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 18px 20px;
	margin-top: 22px;
}
.sendbox ul {
	margin: 8px 0 0;
	padding-left: 18px;
	color: var(--soft);
}
.status {
	font-size: 0.84rem;
	color: var(--soft);
	margin-top: 12px;
}
.else-item {
	border-top: 1px solid var(--faint);
	padding: 12px 0;
}
.else-item .tag {
	font-size: 0.74rem;
	color: var(--mute);
}
.else-item p {
	margin: 4px 0;
	color: var(--soft);
}
.two-inputs {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 10px;
	margin-top: 8px;
}
.chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 6px;
}
.chip {
	background: none;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 5px 12px;
	cursor: pointer;
	font-size: 0.85rem;
	color: var(--soft);
}
.chip.on {
	background: var(--paper);
	color: var(--void);
	border-color: var(--paper);
}

.flash {
	color: var(--accent, #e0a94c);
	font-size: 0.86rem;
	margin-top: 10px;
}
.err {
	color: #e38b7a;
	font-size: 0.86rem;
	margin-top: 10px;
}

/* whether the server has it yet — new in 0.3, because now it can fail */
.saves {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 22px;
	margin-top: 10px;
	font-size: 0.78rem;
	color: var(--mute);
}
.saves[data-state='saving'] {
	color: var(--mute);
}
.saves[data-state='saved'] {
	color: var(--soft);
}
.saves[data-state='failed'] {
	color: #e38b7a;
}
.saves .pip {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}
.saves[data-state='saving'] .pip {
	animation: breathe 1.4s ease-in-out infinite;
}
@keyframes breathe {
	50% {
		opacity: 0.25;
	}
}
@media (prefers-reduced-motion: reduce) {
	.saves[data-state='saving'] .pip {
		animation: none;
	}
}
.saves button {
	background: none;
	border: 1px solid var(--line);
	border-radius: 12px;
	font-size: 0.72rem;
	padding: 1px 9px;
	color: inherit;
	cursor: pointer;
}

.offline {
	border: 1px solid #e38b7a;
	border-radius: 14px;
	padding: 14px 18px;
	margin-bottom: 24px;
	color: #e38b7a;
	font-size: 0.9rem;
}

@media (max-width: 820px) {
	.threshold,
	.encounter {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.threshold .lens {
		max-width: 220px;
		margin: 0 auto;
		order: -1;
	}
	.two-inputs {
		grid-template-columns: 1fr;
	}
	header.thread {
		padding: 8px 12px;
		gap: 10px;
	}
	.me span.lbl {
		display: none;
	}
	main {
		padding-top: 28px;
	}
}

/* the admin surface — server-rendered, reading only */
table.grid {
	width: 100%;
	border-collapse: collapse;
	margin-top: 14px;
	font-size: 0.9rem;
}
table.grid th {
	text-align: left;
	font-weight: 500;
	font-size: 0.74rem;
	color: var(--mute);
	border-bottom: 1px solid var(--line);
	padding: 0 12px 8px 0;
}
table.grid td {
	border-bottom: 1px solid var(--faint);
	padding: 10px 12px 10px 0;
	color: var(--soft);
	vertical-align: top;
}
table.grid td a {
	color: var(--paper);
}

.anchor-review {
	border-top: 1px solid var(--line);
	padding-top: 22px;
	margin-top: 30px;
}
.lenses {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin-top: 16px;
}
.lenscol {
	border-top: 2px solid;
	padding-top: 12px;
}
.lenscol h3 {
	font-size: 1.3rem;
}
.lenscol .tag {
	font-size: 0.74rem;
	color: var(--mute);
	margin-bottom: 10px;
	display: block;
}
.lenscol dt {
	font-size: 0.74rem;
	color: var(--mute);
	margin-top: 12px;
}
.lenscol dd {
	margin: 2px 0 0;
	font-size: 0.95rem;
	color: var(--soft);
}

.diffs {
	margin-top: 26px;
}
.diff {
	display: grid;
	grid-template-columns: 170px 30px minmax(0, 1fr);
	gap: 14px;
	padding: 14px 0;
	border-top: 1px solid var(--faint);
	align-items: baseline;
}
.diff .kind {
	font-family: var(--serif);
	font-size: 1.15rem;
}
.diff p {
	margin: 0;
	color: var(--soft);
}

.prov {
	display: inline-block;
	border: 1px dashed var(--accent, #e0a94c);
	color: var(--accent, #e0a94c);
	border-radius: 14px;
	padding: 2px 12px;
	font-size: 0.8rem;
}
.ev {
	border-top: 1px solid var(--faint);
	padding: 16px 0;
}
.ev .stance {
	font-size: 0.76rem;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 1px 9px;
	color: var(--soft);
}
.shift {
	border-left: 2px solid var(--accent, #e0a94c);
	padding-left: 12px;
	color: var(--paper);
	font-family: var(--serif);
	font-size: 1.12rem;
}

@media (max-width: 820px) {
	.lenses {
		grid-template-columns: 1fr;
	}
	.diff {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

@media print {
	header.thread {
		display: none;
	}
	body {
		background: #fff;
		color: #111;
	}
	.muted,
	.lede {
		color: #444;
	}
	main {
		padding: 0;
		max-width: none;
	}
}

/* the session: perspectives, the board, what changed, the memory */
.persp-top {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
.diff.collide .kind,
.diff.collide p {
	color: var(--paper);
}
.adddiff {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
	margin-top: 14px;
}

.boardbar {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin: 14px 0;
}
.boardbar select {
	width: auto;
	padding: 6px 12px;
	border-radius: 18px;
}
.presence {
	display: flex;
	gap: 12px;
	font-size: 0.8rem;
	color: var(--mute);
	margin-left: auto;
}
.presence span {
	display: flex;
	gap: 5px;
	align-items: center;
}
.presence .dot {
	animation: breathe 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.presence .dot {
		animation: none;
	}
}

.canvaswrap {
	overflow: auto;
	border: 1px solid var(--faint);
	border-radius: 16px;
	background: radial-gradient(circle at 50% 45%, rgba(244, 242, 237, 0.035), transparent 70%);
}
.canvas {
	position: relative;
	width: 920px;
	height: 800px;
}
.canvas svg.links {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.links text {
	font-size: 11px;
	fill: var(--soft);
	pointer-events: auto;
	cursor: pointer;
}
.card {
	position: absolute;
	width: 210px;
	background: #121722;
	border: 1px solid var(--line);
	border-left: 3px solid;
	border-radius: 6px 12px 12px 6px;
	padding: 10px 12px;
	font-size: 0.86rem;
	line-height: 1.4;
	cursor: grab;
	touch-action: none;
	user-select: none;
}
.card.drag {
	cursor: grabbing;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	z-index: 5;
}
.card.pick {
	outline: 2px solid var(--paper);
}
.card .k {
	font-size: 0.7rem;
	color: var(--mute);
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}
.card .k span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-right: 6px;
}
.card .open {
	white-space: nowrap;
	flex-shrink: 0;
	background: none;
	border: 1px solid var(--line);
	border-radius: 10px;
	font-size: 0.66rem;
	padding: 0 7px;
	color: var(--mute);
	cursor: pointer;
}
.card.isopen {
	border-style: dashed;
}
.card.isopen .open {
	color: var(--void);
	background: var(--paper);
}
.card.collision {
	border-left-color: var(--paper);
	background: #1a1f2b;
	font-family: var(--serif);
	font-size: 1.05rem;
}

.coherence {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 26px;
}
.coherence .q {
	font-size: 1.2rem;
	margin-top: 0;
}

/* Quieting the screen leaves the ideas and takes away the furniture. */
body.quiet header.thread,
body.quiet .hidequiet {
	display: none;
}
body.quiet .card .k {
	opacity: 0.3;
}
body.quiet .canvaswrap {
	border-color: transparent;
}

.move {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 26px;
}
.movecol {
	border-top: 2px solid;
	padding-top: 12px;
}
.stage {
	margin: 14px 0;
}
.stage small {
	display: block;
	font-size: 0.72rem;
	color: var(--mute);
}
.stage p {
	margin: 3px 0 0;
	color: var(--soft);
	font-size: 0.95rem;
}
.arrow {
	color: var(--mute);
	font-size: 0.9rem;
	padding-left: 2px;
}
.stage.now p {
	color: var(--paper);
	font-family: var(--serif);
	font-size: 1.18rem;
	line-height: 1.35;
}

.two {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
}

.path {
	position: relative;
	margin-top: 30px;
	padding-left: 34px;
}
.path::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--line);
}
.mstep {
	position: relative;
	padding: 0 0 30px;
}
.mstep::before {
	content: '';
	position: absolute;
	left: -31px;
	top: 9px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 1px solid var(--paper);
	background: var(--void);
}
.mstep.lit::before {
	background: var(--paper);
}
.mstep h3 {
	font-size: 1.35rem;
}
.mstep .when {
	font-size: 0.74rem;
	color: var(--mute);
}
.mstep ul {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}
.mstep li {
	display: flex;
	gap: 9px;
	align-items: baseline;
	color: var(--soft);
	margin: 5px 0;
}

@media (max-width: 820px) {
	.persp-top,
	.two {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.move,
	.coherence,
	.adddiff {
		grid-template-columns: 1fr;
	}
}