/*
 * /account/, the page every site gets (D176).
 *
 * ⚠️ `oview-dashboard`, NOT `oview-account`, and it was the second before it
 * was the first. `.oview-account` is the HEADER's account menu (header.css),
 * with an `__item` of its own, so the page's score cards were wearing the
 * menu's rows. Two blocks, two names.
 *
 * ⚠️ THE PLATFORM'S, SO IT RENDERS ON A SITE THAT SHIPS NO CSS. The page is
 * built from the declarations by `scripts/build/bricks-account-page.php`, and
 * every class it uses is styled here with tokens `defaults.css` already floors,
 * so a new site's account page takes its colours and type from that site's
 * ACSS on the day it exists.
 *
 * ⚠️ A SITE RESTYLES, IT DOES NOT REBUILD. Its own stylesheet loads after this
 * one, so a heading face, a bar colour or a metric's tint is one rule in the
 * site's CSS against these classes. The page stays the same page everywhere.
 *
 * Its cards, meters, stars and vote buttons are the platform's own
 * (`cards.css`, `votes.css`) and are not restated here.
 */

/* --------------------------------------------------------------- the page */

/*
 * Bricks puts a container inside the section. What it lacks is a rhythm down
 * the page, and the site's frame.
 *
 * ⚠️ THE CONTAINER IS BRICKS' WIDTH, NOT THE SITE'S. It was said to "already
 * have the site's content width", which was true only on site one, whose own
 * script sets Bricks' container to it. Everywhere else it was Bricks' 1100px:
 * at 1600px the page started at 250 under a header at 117 (D223). So the page
 * sits in the frame every drawn page uses, and the frame gate cannot see it:
 * it renders signed out, and /account/ sends a stranger to sign in.
 *
 * ⚠️ AND IT IS THE CONTAINER THE COLUMNS MEASURE, not the viewport: the space
 * the page has is what decides whether a menu fits beside the lists.
 */
.oview-dashboard > .brxe-container {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	padding-block: var(--space-xl);
	container-type: inline-size;
}

/* Who you are, and how much you have said. */
.oview-dashboard__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
}

.oview-dashboard__tiles {
	flex: 1 1 40rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--space-m);
}

.oview-dashboard__tile {
	border: var(--border-hair) solid var(--color-border);
	border-radius: var(--radius-l-2);
	padding: var(--space-m);
	box-sizing: border-box;
}

.oview-dashboard__tile-label {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin: 0 0 var(--space-xs);
	/* The label (D224): one look with every other question and group name. */
	font-family: var(--label-font);
	font-size: var(--label-size);
	font-weight: var(--label-weight);
	letter-spacing: var(--label-tracking);
	text-transform: var(--label-case);
	color: var(--label-color);
}

/* The dot, one colour for every tile. A site may tint them per section. */
.oview-dashboard__tile-label::before,
.oview-dashboard__nav-row::before {
	content: "";
	inline-size: var(--space-xs);
	block-size: var(--space-xs);
	border-radius: var(--radius-s);
	background: var(--color-accent);
	flex-shrink: 0;
}

.oview-dashboard__tile-value {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: 800;
	letter-spacing: -0.1rem;
}

/* ------------------------------------------------------------ the columns */

.oview-dashboard__cols {
	display: grid;
	grid-template-columns: minmax(0, var(--width-sidebar, 28rem)) minmax(0, 1fr);
	column-gap: var(--space-xl);
	row-gap: var(--space-l);
}

@container (max-width: 62rem) {
	.oview-dashboard__cols {
		grid-template-columns: minmax(0, 1fr);
	}
}

.oview-dashboard__aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
}

.oview-dashboard__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	min-inline-size: 0;
}

/* The menu: a row per section, its name and its count. */
.oview-dashboard__nav {
	display: flex;
	flex-direction: column;
	border: var(--border-hair) solid var(--color-border);
	border-radius: var(--radius-l-2);
	overflow: hidden;
}

.oview-dashboard__nav-row {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	min-block-size: var(--tap-min);
	padding: var(--space-m) var(--space-l);
	border-top: var(--border-hair) solid var(--color-border);
	color: var(--color-text);
	text-decoration: none;
}

.oview-dashboard__nav-row:first-child {
	border-top: 0;
}

.oview-dashboard__nav-row:hover {
	background: var(--color-surface-sunk);
}

.oview-dashboard__count {
	font-size: var(--text-xs);
	font-weight: 400;
	color: var(--color-text-muted);
}

/* A small card in the side column: signing in, and what you wrote elsewhere. */
.oview-dashboard__box {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	padding: var(--space-l);
	border: var(--border-hair) solid var(--color-border);
	border-radius: var(--radius-l-2);
	box-sizing: border-box;
}

.oview-dashboard__box-title {
	margin: 0;
	font-size: var(--text-l);
	font-weight: 700;
}

.oview-dashboard__part {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding-top: var(--space-s);
	border-top: var(--border-hair) solid var(--color-border);
}

.oview-dashboard__part-title {
	margin: 0;
	font-size: var(--text-m);
	font-weight: 700;
}

.oview-dashboard__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	font-size: var(--text-m);
}

.oview-dashboard__links a,
.oview-dashboard__link {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--tap-min);
}

/* ------------------------------------------------------------ a section */

.oview-dashboard__section {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
}

.oview-dashboard__title {
	margin: 0;
}

.oview-dashboard__sub {
	margin: 0;
	font-size: var(--text-m);
	color: var(--color-text-muted);
}

.oview-dashboard__note {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.oview-dashboard__when {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	white-space: nowrap;
}

.oview-dashboard__item-title {
	margin: 0;
	font-size: var(--text-l);
	font-weight: 700;
	line-height: 1.25;
}

/* ------------------------------------------------------------- a shelf */

/*
 * ⚠️ `:target` FIRST, SCRIPT SECOND. The tabs are links to the panels, so they
 * work with no script and can be linked to; `engage.js` then cancels the jump
 * and sets `data-open`, which switches these rules off in favour of its own.
 */
.oview-tabs {
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
}

/* The strip is the vote buttons' own row, and on a phone it wraps rather than scrolls. */
.oview-tabs__row {
	flex-wrap: wrap;
}

/*
 * ⚠️ NO FADE ON THE SWITCH. `.oview-vote__button` eases its colours, which is
 * right for a vote and wrong for a tab that swaps the page under it: the panel
 * changes at once and the highlight arriving after it reads as the click not
 * landing. It also made the state unmeasurable, because every reading caught
 * the colour it was leaving.
 */
.oview-tabs__row .oview-vote__button {
	transition: none;
	text-decoration: none;
}

.oview-tabs__panel {
	display: none;
}

.oview-tabs:not([data-open]) .oview-tabs__panel:target,
.oview-tabs:not([data-open]):not(:has(.oview-tabs__panel:target)) .oview-tabs__panel--first,
.oview-tabs[data-open] .oview-tabs__panel[data-on] {
	display: block;
}

.oview-dashboard__meta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs);
}

/*
 * "Mugler · rated 3 weeks ago": what it belongs to, a dot, and when.
 *
 * ⚠️ THE DOT IS DRAWN, NOT WRITTEN, and only between two things. An entity with
 * nothing above it (a note, a fighter) has an empty first slot, and a dot
 * written into the text would open its line with one.
 */
.oview-dashboard__byline > :empty {
	display: none;
}

.oview-dashboard__byline > :not(:first-child)::before {
	content: "\00B7";
	margin-inline-end: var(--space-2xs);
}

.oview-dashboard__byline > :empty + ::before {
	content: none;
}

/*
 * The one control on the page, so it gets a tap target of its own.
 *
 * ⚠️ A REAL `<button>`, SO THE BROWSER'S BOX COMES OFF. It reads as a word
 * beside the rating, the way it did when it was a `div` a keyboard could not
 * press.
 */
.oview-dashboard__remove {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	min-block-size: var(--tap-min);
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-text-muted);
	cursor: pointer;
}

.oview-dashboard__remove:hover {
	color: var(--color-error);
}

/* ----------------------------------------------------------- ratings */

.oview-dashboard__list {
	border: var(--border-hair) solid var(--color-border);
	border-radius: var(--radius-l-2);
	overflow: hidden;
}

/*
 * ⚠️ `flex-direction: row` SAID OUT LOUD. The row is a Bricks block, and a block
 * is a column by default, so without it every rating stood on its own end: the
 * picture over the name over the stars, a third of a screen tall each.
 */
.oview-dashboard__row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-m);
	padding: var(--space-m) var(--space-l);
	border-top: var(--border-hair) solid var(--color-border);
}

.oview-dashboard__row:first-child {
	border-top: 0;
}

/*
 * ⚠️ A ROW ANSWERS THE POINTER, AND THE OLD ONES DID.
 *
 * Before the account page came from the platform (D176) these lists were the
 * site's row cards, which shade on hover; the rows that replaced them do not,
 * so "Your ratings" sat dead under the pointer beside a Collection whose cards
 * respond. Same answer as that card: the ground shifts, the bottle grows a
 * little, and the house under the name underlines because it is a link.
 */
.oview-dashboard__row {
	transition: background-color 150ms ease;
}

.oview-dashboard__row:hover,
.oview-dashboard__row:focus-within {
	background: var(--color-surface-sunk);
}

.oview-dashboard__shot {
	transition: transform 150ms ease;
}

.oview-dashboard__row:hover .oview-dashboard__shot,
.oview-dashboard__row:focus-within .oview-dashboard__shot {
	transform: scale(1.05);
}

a.oview-dashboard__item-title,
a.oview-dashboard__note {
	text-decoration: none;
}

a.oview-dashboard__item-title:hover,
a.oview-dashboard__item-title:focus-visible,
a.oview-dashboard__note:hover,
a.oview-dashboard__note:focus-visible {
	text-decoration: underline;
}

.oview-dashboard__shot,
.oview-dashboard__shot img {
	inline-size: 4.2rem;
	block-size: 5.4rem;
	border-radius: var(--radius-s);
	object-fit: contain;
	flex-shrink: 0;
}

/* A product shot on white sits on the row instead of in a white box. */
img.oview-dashboard__shot {
	mix-blend-mode: multiply;
}

.oview-dashboard__row-body {
	flex: 1 1 16rem;
	min-inline-size: 0;
}

.oview-dashboard__stars {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.oview-dashboard__gauge {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	flex: 0 1 24rem;
	max-inline-size: 100%;
}

.oview-dashboard__gauge-head {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: var(--space-s);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* "COMMUNITY", set the way the tiles above set their labels. */
.oview-dashboard__gauge-head > :first-child {
	text-transform: uppercase;
	letter-spacing: 0.13rem;
}

.oview-dashboard__bar {
	display: block;
	block-size: 1.2rem;
	border-radius: var(--radius-full);
	background: var(--color-surface-sunk-2);
	overflow: hidden;
}

.oview-dashboard__bar-fill {
	display: block;
	block-size: 100%;
	border-radius: var(--radius-full);
	background: var(--color-accent);
}

/* ------------------------------------------------------------ scores */

.oview-dashboard__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(28rem, 100%), 1fr));
	gap: var(--space-m);
}

/*
 * ⚠️ `stretch` SAID OUT LOUD, like the rating row's direction: the card is a
 * Bricks block, and a block does not stretch its children, so the meters and
 * the rule above the tags stopped a third of the way across the card.
 */
.oview-dashboard__item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-xs);
	padding: var(--space-l);
	border: var(--border-hair) solid var(--color-border);
	border-radius: var(--radius-l-2);
	box-sizing: border-box;
}

/*
 * ⚠️ ONE GRID FOR ALL THE ROWS OF A CARD, NOT ONE PER ROW. Each meter was its
 * own three-column grid, so each row sized its label column to its own word:
 * the bars started in three different places, and "Value for money" beside a
 * long answer left its own bar at nothing. The meters are `display: contents`
 * here, so every label, bar and answer in the card shares three columns.
 *
 * ⚠️ `dense`, because a meter's markup is label, answer, bar. Placed by column,
 * the bar comes after the answer in the source and before it on screen, and
 * without backfilling it would start a row of its own.
 *
 * ⚠️ THREE CLASSES DEEP ON PURPOSE. A site's general meter rules (a grid of
 * two, a full-width track under the label, margins between) load after this
 * and must lose here, on the one page where a meter is a fact and not a control.
 */
.oview-dashboard__item .oview-vote--row .oview-vote__meters {
	display: grid;
	grid-template-columns: max-content minmax(4rem, 1fr) max-content;
	grid-auto-flow: row dense;
	align-items: center;
	gap: var(--space-s);
}

.oview-dashboard__item .oview-vote--row .oview-vote__meter {
	display: contents;
}

/*
 * ⚠️ `grid-area`, NOT `grid-column`. `votes.css` names an area on each part
 * (`label`, `track`, `value`) for the fragrance page's grid, and a column alone
 * leaves that area's ROW in force, so all three meters were drawn on one line,
 * on top of each other. `auto / n` clears the row and keeps the column.
 */
.oview-dashboard__item .oview-vote--row .oview-vote__meter-label {
	grid-area: auto / 1;
	margin: 0;
	font-size: var(--text-m);
	font-weight: 600;
}

.oview-dashboard__item .oview-vote--row .oview-vote__track {
	grid-area: auto / 2;
	margin: 0;
}

.oview-dashboard__item .oview-vote--row .oview-vote__meter-value {
	grid-area: auto / 3;
	margin: 0;
	font-family: inherit;
	font-size: var(--text-m);
	font-weight: 600;
	text-align: right;
}

.oview-dashboard__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-top: var(--space-2xs);
	padding-top: var(--space-s);
	border-top: var(--border-hair) solid var(--color-border);
}

.oview-dashboard__chips:empty {
	display: none;
}

/* What else somebody said about the thing, as tags. A site tints them per metric. */
.oview-tag {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--tap-min);
	padding: var(--space-2xs) var(--space-m);
	border-radius: var(--radius-full);
	background: var(--color-surface-sunk);
	color: var(--color-text-body);
	font-size: var(--text-xs);
	font-weight: 600;
	box-sizing: border-box;
}