/* ==========================================================================
   jocor_hero — the dashboard, round 12 ("deep glass")

   Talk and Osiris side by side, the Council band, then the pirate rows
   (FLIX, PLAY, LIBRARY) when pirate mode is on. Loaded after
   jocor_hero.css; everything new is `jd-`. The older card rules in
   jocor_hero.css (flix/play/chat grid areas, the teal bar) are overridden
   here with `.jd-home` so the two files can be merged independently.

   Tokens: the round-12 deep glass set, identical in every file that
   declares them (docs/round12-brief.md).
   ========================================================================== */
:root {
	--jg-void: #020308;
	--jg-ink: #e9eefb;
	--jg-ink-2: #9aa7c4;
	--jg-blue: #4d8dff;
	--jg-blue-deep: #0a1a3f;
	--jg-glass: rgba(8, 12, 26, .58);
	--jg-glass-hi: rgba(14, 22, 46, .72);
	--jg-edge: rgba(150, 180, 255, .14);
	--jg-sheen: inset 0 1px 0 rgba(255, 255, 255, .06);
	--jg-blur: blur(20px) saturate(150%);
	--jg-radius: 14px;
	--jg-radius-s: 10px;
	--jg-shadow: 0 18px 48px -18px rgba(0, 0, 0, .8);
	--jg-focus: 0 0 0 2px var(--jg-void), 0 0 0 4px var(--jg-blue);
	--jg-ease: cubic-bezier(.2, .8, .2, 1);
	--jg-fast: 140ms;
	--jg-med: 240ms;
	--jg-slow: 520ms;

	/* Dashboard-only measures. */
	--jd-row-h: 168px;
	--jd-mast: 208px;
	--jd-serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
	--jd-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- The page -------------------------------------------------------------
   The dashboard is deep black under the starfield, so the glass reads as
   glass (over the theme's bright background image it read as fog). And the
   lean dashboard's host fills #content: it is a flex item that otherwise
   shrinks to its content and sat the home off-centre. */
body#body-user:has(#content.app-dashboard) {
	background: var(--jg-void) !important;
}
#content.app-dashboard > #app-content-vue {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

/* ---- The grid ----------------------------------------------------------- */
.jocor-home.jd-home {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	grid-template-areas:
		"talk osiris"
		"council council"
		"pirate pirate";
	gap: 18px;
	font-family: var(--jd-sans);
	color: var(--jg-ink);
}
.jd-home .jd-council { grid-area: council; }
.jd-home .jd-pirate { grid-area: pirate; }
.jd-home .jocor-win--talk,
.jd-home .jocor-win--osiris {
	aspect-ratio: auto;
	height: clamp(360px, 29vw, 410px);
}

/* The stock greeting rule (#app-dashboard h2: centred flex) must not reach
   the band and row titles. */
#app-dashboard .jd-home h2 {
	display: block !important;
	text-align: start !important;
	justify-content: normal !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
}

/* ---- Glass ------------------------------------------------------------- */
.jd-council,
.jd-home .jocor-win--talk,
.jd-row {
	background: var(--jg-glass);
	border: 1px solid var(--jg-edge);
	border-radius: var(--jg-radius);
	box-shadow: var(--jg-sheen), var(--jg-shadow);
	-webkit-backdrop-filter: var(--jg-blur);
	backdrop-filter: var(--jg-blur);
	color: var(--jg-ink);
	color-scheme: dark;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.jd-council,
	.jd-home .jocor-win--talk,
	.jd-row {
		background: rgba(6, 9, 20, .94);
	}
}
.jd-home .jocor-win--talk {
	background: var(--jg-glass);
}
.jd-home .jocor-win--talk:hover {
	border-color: rgba(150, 180, 255, .26);
	box-shadow: var(--jg-sheen), var(--jg-shadow);
}
.jd-home .jocor-win--talk::after {
	display: none;
}
/* Talk's way in, in glass: the one blue thing on the card is its icon. */
.jd-home .jocor-open--teal {
	color: var(--jg-ink);
	background: var(--jg-glass-hi);
	border: 1px solid var(--jg-edge);
	border-radius: var(--jg-radius-s);
	box-shadow: var(--jg-sheen);
	font-size: 16px;
	font-weight: 600;
	min-height: 52px;
}
.jd-home .jocor-open--teal .jocor-open__icon {
	color: var(--jg-blue);
	background: rgba(77, 141, 255, .12);
}
.jd-home .jocor-open--teal .jocor-open__meta {
	color: var(--jg-ink);
	background: rgba(77, 141, 255, .22);
}
.jd-home .jocor-open--teal:hover {
	filter: none;
	border-color: rgba(150, 180, 255, .3);
}
.jd-home .jocor-open--teal:focus-visible {
	outline: none;
	box-shadow: var(--jg-focus);
}

/* ---- Buttons ----------------------------------------------------------- */
#app-dashboard .jd-btn,
.jd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--jg-edge);
	border-radius: var(--jg-radius-s);
	background: rgba(255, 255, 255, .03);
	color: var(--jg-ink);
	font: 600 14px/1 var(--jd-sans);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition: background var(--jg-fast) var(--jg-ease), border-color var(--jg-fast) var(--jg-ease);
}
#app-dashboard .jd-btn:hover,
.jd-btn:hover {
	background: var(--jg-glass-hi);
	border-color: rgba(150, 180, 255, .3);
}
#app-dashboard .jd-home .jd-btn:focus-visible,
#app-dashboard .jd-home .jd-input:focus-visible,
#app-dashboard .jd-home .jd-cx__name-btn:focus-visible,
#app-dashboard .jd-home .jd-agent:focus-visible,
#app-dashboard .jd-home .jd-cx__project:focus-visible,
#app-dashboard .jd-home .jd-cx__link:focus-visible,
#app-dashboard .jd-home .jd-row__open:focus-visible {
	outline: none !important;
	box-shadow: var(--jg-focus) !important;
}
#app-dashboard .jd-btn--primary,
.jd-btn--primary {
	background: var(--jg-blue);
	border-color: var(--jg-blue);
	color: #020716;
}
#app-dashboard .jd-btn--primary:hover,
.jd-btn--primary:hover {
	background: #6ea2ff;
	border-color: #6ea2ff;
}
#app-dashboard .jd-btn--quiet,
.jd-btn--quiet {
	background: none;
	border-color: transparent;
	color: var(--jg-ink-2);
}
#app-dashboard .jd-btn--quiet:hover,
.jd-btn--quiet:hover {
	color: var(--jg-ink);
	background: rgba(255, 255, 255, .04);
	border-color: transparent;
}
.jd-btn--chip {
	min-height: 34px;
	padding: 0 12px;
	border-radius: 999px;
	font-weight: 550;
	white-space: normal;
	text-align: start;
	line-height: 1.25;
}
.jd-btn__icon {
	display: inline-grid;
	place-items: center;
}
.jd-btn__icon svg {
	width: 18px;
	height: 18px;
}
.jd-btn[aria-busy="true"],
[aria-busy="true"] > .jd-btn {
	opacity: .6;
	cursor: progress;
}

/* ---- Council ------------------------------------------------------------ */
.jd-council {
	position: relative;
	padding: 22px 24px 24px;
	min-width: 0;
}
.jd-council__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 20px;
	padding-block-end: 18px;
	border-block-end: 1px solid var(--jg-edge);
}
.jd-council__title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 16px;
	min-width: 0;
}
.jd-council__word {
	margin: 0;
	font: 500 44px/1 var(--jd-serif);
	letter-spacing: -.01em;
	color: var(--jg-ink);
}
.jd-council__sub {
	margin: 0;
	font-size: 14px;
	color: var(--jg-ink-2);
}
.jd-council__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.jd-council__new {
	flex: 1 0 100%;
	display: grid;
	gap: 8px;
	padding: 14px;
	border-radius: var(--jg-radius-s);
	background: rgba(77, 141, 255, .06);
	border: 1px solid rgba(77, 141, 255, .22);
}
.jd-council__new[hidden] {
	display: none;
}
.jd-council__new-label {
	font-size: 14px;
	font-weight: 600;
}
.jd-council__new-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.jd-input {
	flex: 1 1 260px;
	min-width: 0;
	min-height: 40px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--jg-edge);
	border-radius: var(--jg-radius-s);
	background: rgba(2, 3, 8, .6);
	color: var(--jg-ink);
	font: 400 15px/1.2 var(--jd-sans);
}
.jd-input::placeholder {
	color: var(--jg-ink-2);
	opacity: 1;
}
.jd-council__new-note {
	margin: 0;
	font-size: 13px;
	color: var(--jg-ink-2);
}
.jd-council__stage {
	padding-block-start: 20px;
}

.jd-cx {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
	gap: 28px;
	align-items: start;
}
.jd-cx__focus {
	display: grid;
	gap: 12px;
	min-width: 0;
	justify-items: start;
}
.jd-cx__focus > * {
	max-width: 100%;
}
.jd-cx__status {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0;
	font-size: 14px;
	color: var(--jg-ink-2);
}
.jd-cx__status.is-live {
	color: var(--jg-ink);
}
.jd-cx__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--jg-ink-2);
	opacity: .6;
}
.jd-cx__status.is-live .jd-cx__dot {
	background: var(--jg-blue);
	opacity: 1;
	box-shadow: 0 0 0 4px rgba(77, 141, 255, .18);
}
@media (prefers-reduced-motion: no-preference) {
	.jd-cx__status.is-live .jd-cx__dot {
		animation: jd-breathe 2.4s var(--jg-ease) infinite;
	}
}
@keyframes jd-breathe {
	50% { box-shadow: 0 0 0 7px rgba(77, 141, 255, .05); }
}
.jd-cx__when {
	color: var(--jg-ink-2);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.jd-cx__name {
	margin: 0;
	font: 500 32px/1.1 var(--jd-serif);
}
#app-dashboard .jd-cx__name-btn,
.jd-cx__name-btn {
	all: unset;
	font: 500 32px/1.1 var(--jd-serif) !important;
	letter-spacing: 0;
	color: var(--jg-ink);
	background: none;
	border: 0;
	min-height: 0;
	padding: 0;
	cursor: pointer;
	border-radius: 6px;
	overflow-wrap: anywhere;
}
#app-dashboard .jd-cx__name-btn:hover,
.jd-cx__name-btn:hover {
	background: none;
	text-decoration: underline;
	text-decoration-color: rgba(77, 141, 255, .6);
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}
.jd-cx__goal {
	margin: 0;
	max-width: 64ch;
	font-size: 15px;
	line-height: 1.5;
	color: var(--jg-ink-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.jd-cx__focus.is-empty .jd-cx__goal {
	-webkit-line-clamp: 4;
}
.jd-cx__start {
	margin-block-start: 4px;
}
.jd-cx__crew {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}
#app-dashboard .jd-agent,
.jd-agent {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 34px;
	padding: 0 12px 0 10px;
	border: 1px solid var(--jg-edge);
	border-radius: 999px;
	background: rgba(255, 255, 255, .03);
	color: var(--jg-ink);
	font: 500 14px/1 var(--jd-sans);
	cursor: pointer;
}
#app-dashboard .jd-agent:hover,
.jd-agent:hover {
	background: var(--jg-glass-hi);
	border-color: rgba(150, 180, 255, .3);
}
.jd-agent__mark {
	color: var(--jg-ink-2);
	font-size: 12px;
}
#app-dashboard .jd-agent.is-busy,
.jd-agent.is-busy {
	border-color: rgba(77, 141, 255, .55);
	background: rgba(77, 141, 255, .1);
}
.jd-agent.is-busy .jd-agent__mark {
	color: var(--jg-blue);
}

.jd-cx__board {
	display: grid;
	gap: 8px;
	width: min(100%, 520px);
	margin-block-start: 4px;
}
.jd-cx__bar {
	display: flex;
	gap: 3px;
	height: 6px;
}
.jd-cx__seg {
	flex: 1 1 0;
	min-width: 6px;
	border-radius: 3px;
}
.jd-cx__seg--todo { background: rgba(154, 167, 196, .35); }
.jd-cx__seg--doing { background: var(--jg-blue); }
.jd-cx__seg--review { background: rgba(77, 141, 255, .5); }
.jd-cx__seg--done { background: var(--jg-ink); }
.jd-cx__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0;
	font-size: 13px;
	color: var(--jg-ink-2);
}
.jd-cx__legend b {
	color: var(--jg-ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.jd-cx__room {
	margin: 4px 0 0;
	padding: 2px 0 2px 14px;
	border-inline-start: 2px solid rgba(77, 141, 255, .5);
	max-width: 70ch;
}
.jd-cx__said {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--jg-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.jd-cx__who {
	display: flex;
	gap: 10px;
	margin-block-start: 4px;
	font-size: 13px;
	color: var(--jg-ink-2);
}
.jd-cx__ask {
	display: grid;
	gap: 8px;
	width: 100%;
	padding: 14px 16px;
	border-radius: var(--jg-radius-s);
	background: rgba(77, 141, 255, .07);
	border: 1px solid rgba(77, 141, 255, .28);
}
.jd-cx__ask-h {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	font-size: 13px;
}
.jd-cx__ask-who {
	color: var(--jg-blue);
	font-weight: 600;
}
.jd-cx__ask-q {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
}
.jd-cx__ask-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.jd-cx__side {
	display: grid;
	gap: 10px;
	min-width: 0;
	padding-inline-start: 24px;
	border-inline-start: 1px solid var(--jg-edge);
}
.jd-cx__h {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--jg-ink-2);
}
.jd-cx__h:not(:first-child) {
	margin-block-start: 10px;
}
.jd-cx__projects,
.jd-cx__links {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#app-dashboard .jd-cx__project,
.jd-cx__project,
.jd-cx__link {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 40px;
	padding: 0 10px;
	margin-inline: -10px;
	box-sizing: content-box;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--jg-ink);
	font: 500 15px/1.2 var(--jd-sans);
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}
#app-dashboard .jd-cx__project:hover,
.jd-cx__project:hover,
.jd-cx__link:hover {
	background: rgba(255, 255, 255, .05);
}
.jd-cx__project-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.jd-cx__link {
	font-size: 14px;
	color: var(--jg-ink);
}
.jd-cx__link-icon {
	display: inline-grid;
	place-items: center;
	color: var(--jg-blue);
}
.jd-cx__more {
	margin: 0;
	font-size: 13px;
	color: var(--jg-ink-2);
}
/* Skeleton pieces. */
.jd-cx[aria-busy="true"] .jocor-skel--title { width: 50%; height: 30px; }
.jd-cx__crew-skel { display: flex; gap: 6px; }
.jd-cx__crew-skel .jocor-skel { width: 84px; height: 34px; border-radius: 999px; }
.jd-cx__bar-skel { width: min(100%, 520px); height: 6px; }
.jd-cx[aria-busy="true"] .jd-cx__focus,
.jd-cx[aria-busy="true"] .jd-cx__side { min-height: 180px; align-content: start; }
.jd-cx[aria-busy="true"] .jd-cx__focus { justify-items: stretch; }

/* ---- The pirate rows ------------------------------------------------------
   One line each: the wordmark on the left, the carousel filling the rest.
   The whole row is the way in, so the row itself is the pointer target. */
.jd-pirate {
	display: grid;
	gap: 14px;
	min-width: 0;
}
.jd-pirate[hidden] {
	display: none;
}
.jd-row {
	position: relative;
	display: grid;
	grid-template-columns: var(--jd-mast) minmax(0, 1fr);
	align-items: center;
	min-width: 0;
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--jg-med) var(--jg-ease), background var(--jg-med) var(--jg-ease);
}
.jd-row:hover {
	border-color: rgba(150, 180, 255, .28);
	background: var(--jg-glass-hi);
}
.jd-row__mast {
	display: grid;
	gap: 6px;
	align-content: center;
	padding: 20px 8px 20px 26px;
	min-width: 0;
}
.jd-row__word {
	margin: 0;
	line-height: 1;
}
.jd-row__word .jd-row__open {
	display: inline-flex;
	align-items: center;
	color: var(--jg-ink);
	text-decoration: none;
	border-radius: 6px;
}
.jd-row__note {
	margin: 0;
	font-size: 13px;
	color: var(--jg-ink-2);
}
.jd-row__view {
	position: relative;
	min-width: 0;
}
/* The track fades out under both edges, so it reads as one line running
   on rather than a box that ends. */
.jd-row__track {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	margin: 0;
	padding: 18px 26px 18px 12px;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 64px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 64px), transparent 100%);
	border-radius: 0 var(--jg-radius) var(--jg-radius) 0;
	min-height: calc(var(--jd-row-h) + 36px);
	box-sizing: border-box;
}
.jd-row__track::-webkit-scrollbar {
	display: none;
}
#app-dashboard .jd-row__track:focus-visible {
	outline: none;
	-webkit-mask-image: none;
	mask-image: none;
	box-shadow: inset 0 0 0 2px var(--jg-blue);
}
.jd-row__empty {
	align-self: center;
	font-size: 14px;
	color: var(--jg-ink-2);
}

.jd-tile {
	position: relative;
	flex: 0 0 auto;
	height: var(--jd-row-h);
	border-radius: 8px;
	overflow: hidden;
	background: rgba(255, 255, 255, .04);
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .9);
}
.jd-tile--poster { width: calc(var(--jd-row-h) * 2 / 3); }
.jd-tile--box { width: calc(var(--jd-row-h) * .75); }
.jd-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jd-tile.is-skel .jocor-skel {
	width: 100%;
	height: 100%;
	border-radius: 0;
}
.jd-tile__seats {
	position: absolute;
	inset-block-end: 6px;
	inset-inline-end: 6px;
	padding: 3px 6px;
	border-radius: 4px;
	background: rgba(2, 3, 8, .82);
	color: var(--jg-ink);
	font: 600 11px/1 var(--jd-sans);
	font-variant-numeric: tabular-nums;
}

/* FLIX: the word in Cormorant capitals, set wide, like a title card. */
.jd-row--flix .jd-row__open {
	font: 500 46px/1 var(--jd-serif);
	text-transform: uppercase;
	letter-spacing: .14em;
	margin-inline-end: -.14em;
}

/* PLAY: a pixel wordmark with a cursor that blinks, still when asked. */
.jd-row--play .jd-row__open {
	gap: 6px;
	color: var(--jg-ink);
}
.jd-play-word {
	display: block;
	width: 115px;
	height: 35px;
	filter: drop-shadow(0 0 10px rgba(77, 141, 255, .45));
}
.jd-play-cursor {
	width: 10px;
	height: 5px;
	margin-block-start: 30px;
	background: var(--jg-blue);
}
@media (prefers-reduced-motion: no-preference) {
	.jd-play-cursor {
		animation: jd-blink 1.1s steps(1, end) infinite;
	}
}
@keyframes jd-blink {
	50% { opacity: 0; }
}
.jd-row--play .jd-tile {
	border-radius: 4px;
}

/* LIBRARY: the word in Cormorant italic, standing on the same lit shelf
   as the books; the shelf runs the full width of the row. */
.jd-row--library .jd-row__open {
	font: italic 500 42px/1 var(--jd-serif);
}
.jd-row--library::after {
	content: "";
	position: absolute;
	inset-inline: 18px;
	inset-block-end: 18px;
	height: 1px;
	background: linear-gradient(90deg, rgba(150, 180, 255, 0), rgba(190, 210, 255, .55) 12%, rgba(190, 210, 255, .55) 88%, rgba(150, 180, 255, 0));
	box-shadow: 0 1px 14px 1px rgba(77, 141, 255, .28);
	pointer-events: none;
}
.jd-row--library .jd-row__mast {
	align-self: end;
	padding-block-end: 26px;
}
.jd-row--library .jd-row__track {
	gap: 3px;
	padding-block-end: 19px;
}
.jd-book {
	--h: 150px;
	--w: 40px;
	--hue: 214;
	--sat: 30%;
	--lit: 20%;
	position: relative;
	flex: 0 0 auto;
	width: calc(var(--w) * var(--jd-book-k, 1));
	height: calc(var(--h) * var(--jd-book-k, 1));
	border-radius: 3px 3px 1px 1px;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .06) 18%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .28)),
		hsl(var(--hue) var(--sat) var(--lit));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
	overflow: hidden;
}
/* Two pale bands near the head and the foot, where a real spine has its
   gilt rules; here in the page's ink, not gold. */
.jd-book::before,
.jd-book::after {
	content: "";
	position: absolute;
	inset-inline: 4px;
	height: 1px;
	background: rgba(233, 238, 251, .28);
	box-shadow: 0 3px 0 rgba(233, 238, 251, .14);
}
.jd-book::before { inset-block-start: 10px; }
.jd-book::after { inset-block-end: 14px; }
.jd-book.is-skel {
	background: rgba(255, 255, 255, .05);
}
.jd-book.is-skel::before,
.jd-book.is-skel::after {
	display: none;
}
.jd-book__spine {
	position: absolute;
	inset: 22px 0 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	writing-mode: vertical-rl;
	gap: 8px;
	overflow: hidden;
}
.jd-book__title {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	font: 600 12px/1.15 var(--jd-serif);
	letter-spacing: .02em;
	color: rgba(233, 238, 251, .92);
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.jd-book__author {
	flex: 0 0 auto;
	max-height: 40%;
	overflow: hidden;
	font: 500 10px/1 var(--jd-sans);
	color: rgba(233, 238, 251, .6);
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* A book with a cover file stands face out. */
.jd-book--cover {
	width: calc(var(--h) * .69 * var(--jd-book-k, 1));
	margin-inline: 6px;
}
.jd-book--cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jd-book--cover .jd-book__spine {
	display: none;
}

/* ---- Tablet --------------------------------------------------------------- */
@media (max-width: 980px) {
	.jocor-home.jd-home {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"talk osiris"
			"council council"
			"pirate pirate";
		gap: 16px;
	}
	.jd-home .jocor-win--talk,
	.jd-home .jocor-win--osiris {
		height: auto;
		aspect-ratio: 4 / 5;
	}
	.jd-cx {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
	.jd-cx__side {
		padding-inline-start: 0;
		padding-block-start: 18px;
		border-inline-start: 0;
		border-block-start: 1px solid var(--jg-edge);
	}
	:root {
		--jd-mast: 168px;
		--jd-row-h: 150px;
	}
	.jd-row--flix .jd-row__open { font-size: 40px; }
}

/* ---- Phone ----------------------------------------------------------------
   The wordmark sits on its own short line over the carousel. */
@media (max-width: 720px) {
	.jocor-home.jd-home {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"talk"
			"osiris"
			"council"
			"pirate";
		gap: 12px;
	}
	.jd-home .jocor-win--osiris {
		aspect-ratio: 5 / 6;
	}
	.jd-home .jocor-win--talk:not(:has(.jocor-thread)) {
		aspect-ratio: auto;
		min-height: 300px;
	}
	.jd-home .jocor-win--talk:has(.jocor-thread) {
		aspect-ratio: 4 / 5;
	}
	.jd-council {
		padding: 18px 16px 18px;
	}
	.jd-council__word {
		font-size: 38px;
	}
	.jd-council__acts {
		width: 100%;
	}
	.jd-council__acts .jd-btn {
		flex: 1 1 0;
		min-height: 44px;
	}
	.jd-cx__name,
	#app-dashboard .jd-cx__name-btn {
		font-size: 28px !important;
	}
	.jd-agent,
	.jd-cx__project,
	.jd-cx__link {
		min-height: 44px;
	}
	:root {
		--jd-row-h: 132px;
	}
	.jd-row {
		grid-template-columns: minmax(0, 1fr);
	}
	.jd-row__mast {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		padding: 16px 18px 0;
	}
	.jd-row__track {
		padding: 12px 18px 16px;
		gap: 10px;
		border-radius: 0 0 var(--jg-radius) var(--jg-radius);
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent 100%);
		mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent 100%);
	}
	.jd-row--flix .jd-row__open { font-size: 32px; }
	.jd-play-word { width: 84px; height: 26px; }
	.jd-play-cursor { margin-block-start: 22px; width: 8px; height: 4px; }
	.jd-row--library .jd-row__open { font-size: 32px; }
	.jd-row--library .jd-row__mast { padding-block-end: 0; }
	.jd-row--library .jd-row__track { padding-block-end: 17px; gap: 2px; }
	.jd-row--library::after { inset-block-end: 16px; inset-inline: 10px; }
	.jd-row--library { --jd-book-k: .82; }
}

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.jd-row,
	.jd-btn {
		transition: none;
	}
}