/* The homepage strip: Latest on Animworks beside Studio Watch.
 * Values are the handoff's own reference file, studio-watch-home-strip-handoff/home-strip.html.
 *
 * ⚠️ FONTS ARE OURS. The reference asks for LEMON MILK Pro and Poppins; anim.works runs
 * Indarung for titles and LM Pro for everything else (Harvey, 6 Oct 2026), and these are
 * labels and figures rather than titles, so they are LM Pro at the reference's own sizes,
 * weights and tracking.
 */

/* The tray. It takes over the inset, the gradient, the rounded bottom and the shadow that
   .awlt-tab used to carry on its own, so the two halves read as one continuous tray. */
.awh .aw-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	margin: 0 20px;
	border-radius: 0 0 12px 12px;
	overflow: hidden;
	background: linear-gradient(180deg, #111111 0%, #1A1A1A 38%, #1A1A1A 100%);
	box-shadow: inset 0 14px 18px -12px rgba(0, 0, 0, .85);
}

/* ⚠️ The existing tray becomes a plain half. It is not edited: these rules simply undo the
   width, margin, radius, background and shadow it carries when it stands alone, at a
   specificity that beats its own `.awh button.awlt-tab`. Remove this block and the old tray
   comes back exactly as it was. */
.awh .aw-strip button.awlt-tab {
	width: 100%;
	margin: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transition: background 120ms;
}
.awh .aw-strip button.awlt-tab:hover { filter: none; transform: none; background: rgba(255, 255, 255, .03); }
.awh .aw-strip button.awlt-tab:active { transform: none; }

.awh .aw-strip .aw-half {
	position: relative;
	display: flex; flex-direction: column; justify-content: flex-start; gap: 10px;
	min-width: 0;
	padding: 14px 18px 12px;
	background: transparent; border: 0; text-align: left;
	color: inherit; text-decoration: none; cursor: pointer;
	transition: background 120ms;
	font-family: 'LM Pro', ui-sans-serif, system-ui, sans-serif;
}
.awh .aw-strip .aw-half,
.awh .aw-strip .aw-half:hover,
.awh .aw-strip .aw-half:focus { color: #F2F0EA; text-decoration: none; }
.awh .aw-strip .aw-half:hover { background: rgba(255, 255, 255, .03); }
.awh .aw-strip .aw-half:focus-visible { outline: 2px solid rgba(253, 184, 39, .4); outline-offset: -2px; }

/* The faint amber divider, brightest in the middle.
   ⚠️ Scoped to the sibling selector, not `> * + *`: aw-latest-tab.php emits its modal as a
   second child of the wrapper, and `* + *` would draw a divider inside the open sheet. */
.awh .aw-strip button.awlt-tab ~ .aw-half::before {
	content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(228,172,1,0) 0%, rgba(245,189,22,.75) 50%, rgba(228,172,1,0) 100%);
}

.awh .aw-strip .aw-head { display: flex; align-items: center; gap: 10px; }
.awh .aw-strip .aw-sw .aw-title {
	font-family: 'LM Pro', ui-sans-serif, system-ui, sans-serif;
	font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	color: #2EC4A5;
}
.awh .aw-strip .aw-meta {
	margin-left: auto;
	font-family: 'LM Pro', ui-sans-serif, system-ui, sans-serif;
	font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: #8A8880; white-space: nowrap;
}

/* ---------------------------------------------------------------- the heatmap */
.awh .aw-strip .sw-body { display: flex; align-items: flex-end; gap: 24px; min-width: 0; }
.awh .aw-strip .sw-map { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.awh .aw-strip .sw-months {
	display: grid; grid-template-columns: 22px repeat(13, minmax(0, 1fr));
	column-gap: 3px; height: 12px;
}
.awh .aw-strip .sw-months span { grid-row: 1; font-size: 10px; line-height: 12px; color: #8A8880; white-space: nowrap; }
.awh .aw-strip .sw-rows { display: flex; gap: 3px; }
.awh .aw-strip .sw-days {
	display: grid; grid-template-rows: repeat(7, 10px); row-gap: 3px; width: 22px;
	font-size: 9px; line-height: 10px; color: #6E6C67;
}
.awh .aw-strip .sw-grid {
	flex: 1; min-width: 0;
	display: grid; grid-template-rows: repeat(7, 10px);
	grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px;
}
.awh .aw-strip .sw-cell { height: 10px; border-radius: 2px; background: #262626; }
.awh .aw-strip .sw-cell[data-l="1"] { background: #4A3A0F; }
.awh .aw-strip .sw-cell[data-l="2"] { background: #7A5D0C; }
.awh .aw-strip .sw-cell[data-l="3"] { background: #B88A06; }
.awh .aw-strip .sw-cell[data-l="4"] { background: #F5BD16; }
.awh .aw-strip .sw-cell.is-future { background: transparent; }
.awh .aw-strip .sw-cell.is-today { outline: 1px solid #F5BD16; outline-offset: 1px; }

.awh .aw-strip .sw-total {
	flex: none; align-self: center;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	padding: 14px 18px; border: 1px solid #2E2A1E; border-radius: 10px; background: #141414;
}
.awh .aw-strip .sw-total .n { display: flex; align-items: baseline; gap: 8px; }
.awh .aw-strip .sw-total .n b {
	font-family: 'LM Pro', ui-sans-serif, system-ui, sans-serif;
	font-weight: 700; font-size: 26px; line-height: 1; color: #F2F0EA;
	font-variant-numeric: tabular-nums;
}
.awh .aw-strip .sw-total .n span { font-size: 13px; color: #C9C7C1; }
.awh .aw-strip .sw-legend { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #6E6C67; }
.awh .aw-strip .sw-legend i { width: 9px; height: 9px; border-radius: 2px; }

/* ------------------------------------------------------------------ the live line */
.awh .aw-strip .sw-live {
	display: flex; align-items: center; gap: 10px;
	height: 30px; padding: 0 12px; border-radius: 8px;
	border: 1px solid #1B5C55; background: #0F1F1D; min-width: 0;
}
.awh .aw-strip .sw-live-label {
	flex: none;
	font-family: 'LM Pro', ui-sans-serif, system-ui, sans-serif;
	font-weight: 700; font-size: 10px; letter-spacing: .12em; color: #2EC4A5;
}
.awh .aw-strip .sw-pulse { position: relative; width: 7px; height: 7px; flex: none; }
.awh .aw-strip .sw-pulse::before,
.awh .aw-strip .sw-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2EC4A5; }
.awh .aw-strip .sw-pulse::before { animation: sw-strip-pulse 1.6s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.awh .aw-strip .sw-ticker { position: relative; flex: 1; min-width: 0; height: 18px; overflow: hidden; display: block; }
.awh .aw-strip .sw-msg {
	position: absolute; inset: 0;
	font-size: 13px; line-height: 18px; color: #F2F0EA;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	opacity: 0; transform: translateY(12px);
	transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.awh .aw-strip .sw-msg.is-current { opacity: 1; transform: none; }
.awh .aw-strip .sw-msg.is-prev { opacity: 0; transform: translateY(-12px); }

@keyframes sw-strip-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.8); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.awh .aw-strip .sw-pulse::before { animation: none; }
	.awh .aw-strip .sw-msg { transition: none; }
}

/* tab.css narrows the tray at 640px (`width:calc(100% - 24px); margin:0 12px;
   padding:12px 14px 10px`). The wrapper takes the margin now, both halves the padding. */
@media (max-width: 640px) {
	.awh .aw-strip { margin: 0 12px; }
	.awh .aw-strip button.awlt-tab,
	.awh .aw-strip .aw-half { padding: 12px 14px 10px; }
	.awh .aw-strip .sw-body { gap: 14px; }
}