/* ds/surfaces.css -- design system v2: the surfaces things sit ON.
 *
 * Spec: intent/site-looks-flat-and-unclickable/spec.md section 5. Its sibling
 * ds/controls.css holds the things you operate; this file holds the things they
 * sit on. The split is by what you DO with them, because that is what decides
 * the depth: a surface never presses, and a control always does.
 *
 * THE DEPTH IS THE STATE. Every rule here spends exactly one depth token from
 * ds/tokens.css, never a hand-rolled box-shadow, so a palette change moves all
 * of them together and a reviewer can tell a panel from a tile by its token
 * name. Three tiers, and they nest in one order only:
 *
 *   well    sunken, a container for tiles      --depth-sunken
 *   panel   sitting on the page                --depth-panel
 *   tile    raised, sitting in a well          --depth-tile
 *   float   above everything                   --depth-float
 *
 * A tile inside a tray inside a panel reads correctly because each tier is
 * lighter than the one under it. A tile placed directly on the page does not,
 * which is why `.tcg-tile` says it belongs in a `.tcg-tray`.
 *
 * MOBILE FIRST, and the paddings are CSS pixels while the control floors are
 * real pixels (spec 3.3): a desktop renders at 1.204x, so CSS-pixel padding is
 * deliberately roomier there while a 44px target stays 44 REAL pixels on both.
 */

/* ── Panel: the group box. Sits on the page, holds everything else. ── */
.tcg-panel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-panel);
	box-shadow: var(--depth-panel);
	padding: 14px;
}
/* --bp-md */
@media (min-width: 768px) {
	.tcg-panel {
		padding: 18px;
	}
}

/* ── Tray: a sunken well that holds tiles. ── */
.tcg-tray {
	background: var(--well);
	border-radius: 15px;
	box-shadow: var(--depth-sunken);
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ── Tile: one raised row in a tray. Grip / body / end. ── */
.tcg-tile {
	display: flex;
	align-items: center;
	gap: 10px;
	/* The gradient is what makes a tile read as lifted rather than merely lighter;
	   --raised-top is the palette's own top edge, so it tracks the palette. */
	background: linear-gradient(180deg, var(--raised-top), var(--raised));
	border: 1px solid var(--line-2);
	border-radius: var(--r-tile);
	box-shadow: var(--depth-tile);
	padding: 8px 10px;
	/* A tile is a row in a list, not a key: it may contain controls, so its own
	   floor is the control floor and its children keep theirs. */
	min-height: var(--ctl-h);
	color: var(--text);
	transition:
		box-shadow var(--transition-fast),
		transform var(--transition-fast);
}
.tcg-tile:hover {
	box-shadow: var(--depth-tile-hover);
	transform: translateY(-1px);
}
/* Selected reads three ways at once, because colour alone fails for anyone who
   cannot see this accent: border, wash, and the aria attribute the row carries. */
.tcg-tile[aria-selected="true"],
.tcg-tile[aria-current="true"],
.tcg-tile[aria-current="page"] {
	border-color: var(--accent);
	background: linear-gradient(180deg, var(--raised-top), var(--accent-soft));
}
.tcg-tile > .tcg-tile-body {
	flex: 1;
	min-width: 0;
}
.tcg-tile > .tcg-tile-grip {
	flex: none;
	color: var(--text-3);
	cursor: grab;
}
.tcg-tile > .tcg-tile-end {
	flex: none;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* ── Badge: a small mono tag. Reads as a label, never as a control. ── */
.tcg-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--well);
	/* An INSET border, so a badge never looks like a key with a 1px lip. */
	box-shadow: inset 0 0 0 1px var(--line-2);
	border-radius: var(--r-pill);
	padding: 3px 8px;
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-2);
	white-space: nowrap;
}
.tcg-badge.accent {
	color: var(--accent-ink);
	box-shadow: inset 0 0 0 1px var(--accent-border);
}
.tcg-badge.warn {
	color: var(--warning-text);
	box-shadow: inset 0 0 0 1px var(--warning-border);
}
.tcg-badge.bad {
	color: var(--danger-text);
	box-shadow: inset 0 0 0 1px var(--danger-border);
}

/* ── Callout: a warning or note INSIDE a panel. ── */
.tcg-callout {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var(--info-soft);
	border: 1px solid var(--info-border);
	/* Square on the left so a stack of callouts reads as one column of notes
	   rather than a row of separate cards. */
	border-radius: 0 var(--r-tile) var(--r-tile) 0;
	border-left-width: 3px;
	padding: 10px 12px;
	color: var(--text-2);
	font-size: var(--text-small);
}
.tcg-callout > svg {
	flex: none;
	color: var(--info-text);
}
.tcg-callout.warn {
	background: var(--warning-soft);
	border-color: var(--warning-border);
}
.tcg-callout.warn > svg {
	color: var(--warning-text);
}
.tcg-callout.bad {
	background: var(--danger-soft);
	border-color: var(--danger-border);
}
.tcg-callout.bad > svg {
	color: var(--danger-text);
}
.tcg-callout.ok {
	background: var(--success-soft);
	border-color: var(--success-border);
}
.tcg-callout.ok > svg {
	color: var(--success-text);
}

/* ── Empty state: one icon, one line, one action. ── */
.tcg-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	/* Dashed, because an empty state is a place where something WILL be, not a
	   finished object. */
	border: 1px dashed var(--line-2);
	border-radius: var(--r-panel);
	padding: 24px 16px;
	color: var(--text-3);
	font-size: var(--text-small);
}
.tcg-empty > svg {
	color: var(--text-3);
}

@media (prefers-reduced-motion: reduce) {
	.tcg-tile {
		transition: none;
	}
	.tcg-tile:hover {
		transform: none;
	}
}