/* LoudMemories — the public profile.

   This page is the journal seen by somebody else, so it loads
   content/memories/css/memories.css and uses the same .jn-* markup for the
   hero, statistics, map, reviews, gallery and lists. Only what a
   second reader adds is here: the face at the top, the two-member comparison
   and the private notice.

   Nothing below redefines a variable memories.css sets, so the two files
   cannot disagree over which loaded last. */

/* -------------------------------------------------------- 01 you and them */

.us-both-wrap {
	/* Four columns of night, place and two scores will not fold below about
	   36rem, so the table scrolls inside its own box rather than pushing the
	   page sideways. */
	overflow-x: auto;
	border: 1px solid var(--lm-line-strong);
	border-radius: 3px;
	-webkit-overflow-scrolling: touch;
}
.us-both { width: 100%; min-width: 34rem; border-collapse: collapse; }
.us-both caption {
	caption-side: top;
	padding: 12px 14px;
	text-align: left;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lm-muted);
	background: var(--lm-panel);
	border-bottom: 1px solid var(--lm-line-strong);
}
.us-both th,
.us-both td {
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--lm-line);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--lm-muted);
}
.us-both thead th {
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lm-ink);
	background: var(--lm-panel-2);
	white-space: nowrap;
}
.us-both tbody tr:last-child th,
.us-both tbody tr:last-child td { border-bottom: 0; }
.us-both tbody tr:hover td { background: rgba(var(--lm-panel-rgb), .7); }
.us-both tbody th a {
	display: block;
	font-family: var(--lm-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--lm-ink);
}
.us-both tbody th a:hover { color: var(--lm-green-lt); }
.us-both tbody th span {
	display: block;
	margin-top: 3px;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	color: var(--lm-muted);
}
.us-both .us-score {
	font-family: var(--lm-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--lm-ink);
}
.us-both .us-score i { font-style: normal; font-size: 0.6875rem; color: var(--lm-muted); opacity: .7; }

.us-shared { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
@media (min-width: 560px) { .us-shared { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .us-shared { grid-template-columns: repeat(3, 1fr); } }
.us-shared li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 12px;
	border-bottom: 1px solid var(--lm-line);
}
.us-shared a {
	min-width: 0;
	font-family: var(--lm-sans);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--lm-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.us-shared a:hover { color: var(--lm-green-lt); }
.us-shared span {
	flex: 0 0 auto;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	color: var(--lm-green-lt);
}

/* ------------------------------------------------------------- private */

.us-private {
	padding: clamp(1.5rem, 5vw, 2.5rem);
	border: 1px dashed var(--lm-line-strong);
	border-radius: 3px;
	max-width: 42rem;
}
.us-private-head {
	margin: 0 0 12px;
	font-family: var(--lm-sans);
	font-size: clamp(1.125rem, 4.5vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: var(--lm-ink);
}
.us-private p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--lm-muted); text-wrap: pretty; }

/* The two lists on this page that hold rows back until asked. The rule that
   hides them lives here rather than in memories.css because these two classes
   do, and the open value has to name each list separately anyway -- a shared
   list is a flex row, a table row is a table row. */
.us-shared > li.is-more,
.us-both tbody > tr.is-more { display: none; }
.us-shared.is-open > li.is-more { display: flex; }
.us-both.is-open tbody > tr.is-more { display: table-row; }