/* Shelf navigation: the desktop tabs and panels (Lane A). Loaded asynchronously.
   Contract: docs/plans/2026-09-26-navigation-contract.md sections 8 and 13.
   Look: reference/nav-redesign/v5/build.py (SHELF_CSS and the .nav__btn rules), mapped onto the contract's class names.
   Every rule targets divein-shelf-* classes (never WordPress's menu-item / current-menu-* classes); the element
   resets are :where()-wrapped so they carry no specificity. Closed panels are hidden only by their `hidden`
   attribute (critical CSS keeps [hidden] display:none). Hover effects live inside @media (hover:hover). */

/* ---- Component-scoped values (the prototype's --ease and --shadow-panel; shelf-header.css defines the
   shared custom properties on .divein-shelf-active, the fallbacks equal them) ---- */
.divein-shelf-menu {
	--dsp-ease: var(--divein-shelf-ease, cubic-bezier(.16, 1, .3, 1));
	--dsp-shadow: var(--divein-shelf-shadow-panel, 0 18px 38px -14px rgba(7, 39, 90, .30), 0 3px 10px -3px rgba(7, 39, 90, .12));
}

/* ---- Zero-specificity resets inside the Shelf menu ---- */
:where(.divein-shelf-menu) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(.divein-shelf-menu) :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.divein-shelf-menu) :where(li) { margin: 0; padding: 0; }
:where(.divein-shelf-menu) :where(p) { margin: 0; }
:where(.divein-shelf-menu) :where(a) { color: inherit; text-decoration: none; }
:where(.divein-shelf-menu) :where(img) { display: block; max-width: 100%; }
:where(.divein-shelf-menu) :where(button) { font: inherit; color: inherit; }
:where(.divein-shelf-menu) :where(svg) { width: 14px; height: 14px; flex: none; }

/* Foxiz's `.menu-item a > span` (main.css:4994) makes every span directly inside a menu link an inline-flex
   with a gap; same specificity, later in the cascade, so Shelf spans keep their own layout. */
.divein-shelf-menu a > span { position: static; display: inline; column-gap: normal; align-items: normal; }

/* ---- The tab row: its look is critical CSS (shelf-header.css), painted before this sheet loads. Only the
   list items' layout is here. ---- */
.divein-shelf-menu > .divein-shelf-tab { display: flex; align-items: center; position: static; }

/* Visible focus on every panel link (the tab buttons' focus ring is in shelf-header.css). */
.divein-shelf-panel a:focus-visible {
	outline: 2px solid var(--lightblue-600) !important;
	outline-offset: 2px;
	border-radius: 3px;
}

/* ---- The panel ---- */
.divein-shelf-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #fff;
	border-bottom: 1px solid var(--gray-200);
	box-shadow: var(--dsp-shadow);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--gray-900);
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	white-space: normal;
	-webkit-font-smoothing: antialiased;
}
@media (min-width: 1200px) {
	.divein-shelf-panel:not([hidden]) {
		max-height: calc(100dvh - var(--divein-shelf-panel-top, 0px));
		overflow-y: auto;
	}
}
.divein-shelf-panel__inner { max-width: 1080px; margin: 0 auto; padding: 22px 20px 24px; }

/* Without JavaScript (the Shelf script marks html.divein-shelf-ready once it drives the panels), a tab's panel
   shows while focus is inside the tab, so a keyboard reaches every link (repair Amendment 9). */
html:not(.divein-shelf-ready) body.divein-shelf-active .divein-shelf-tab:focus-within > .divein-shelf-panel[hidden] { display: block !important; }

/* Entrance, only once the script drives the panels; the prototype's one authored moment. */
html.divein-shelf-ready .divein-shelf-panel:not([hidden]) { animation: divein-shelf-panel-in .3s var(--dsp-ease) both; }
html.divein-shelf-ready .divein-shelf-panel:not([hidden]) .divein-shelf-groups > .divein-shelf-group:not(.divein-shelf-group--gear_index, .divein-shelf-group--plan, .divein-shelf-group--latest_articles, .divein-shelf-group--latest_news),
html.divein-shelf-ready .divein-shelf-panel:not([hidden]) .divein-shelf-lead,
html.divein-shelf-ready .divein-shelf-panel:not([hidden]) .divein-shelf-column--rows {
	animation: divein-shelf-rise .55s var(--dsp-ease) both;
	animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes divein-shelf-panel-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes divein-shelf-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.divein-shelf-menu .divein-shelf-panel,
	.divein-shelf-menu .divein-shelf-panel *,
	.divein-shelf-menu .divein-shelf-tab__btn,
	.divein-shelf-menu .divein-shelf-tab__chev { animation: none !important; transition: none !important; }
}

/* ---- Panel head: title, subtitle, hub button ---- */
.divein-shelf-panel .divein-shelf-panel__head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 10px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--blue-900);
}
.divein-shelf-panel .divein-shelf-panel__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 17px;
	line-height: 1.5;
	letter-spacing: -.02em;
	color: var(--blue-900);
}
.divein-shelf-panel .divein-shelf-panel__subtitle { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gray-600); }

.divein-shelf-panel .divein-shelf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	color: #fff;
	background: var(--blue-900);
	border: 2px solid var(--blue-900);
	border-radius: var(--radius-inner-4);
	padding: 0 16px;
	min-height: 38px;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s var(--dsp-ease), border-color .15s var(--dsp-ease), transform .15s var(--dsp-ease), box-shadow .15s var(--dsp-ease);
}
.divein-shelf-panel .divein-shelf-btn svg { width: 14px; height: 14px; flex: none; }
.divein-shelf-panel .divein-shelf-panel__cta { margin-left: auto; min-height: 36px; }
.divein-shelf-panel .divein-shelf-panel__cta svg { transition: transform .24s var(--dsp-ease); }
@media (hover: hover) {
	.divein-shelf-panel .divein-shelf-btn:hover { color: #fff; background: var(--blue-800); border-color: var(--blue-800); transform: translateY(-1px); box-shadow: var(--shadow-primary); }
	.divein-shelf-panel .divein-shelf-panel__cta:hover svg { transform: translateX(3px); }
}

/* ---- Group grids (the prototype's .sh / .sh__tiles, per panel key) ---- */
.divein-shelf-panel .divein-shelf-groups {
	--row-gap: 16px;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--row-gap) 22px;
	align-items: start;
}
.divein-shelf-panel .divein-shelf-groups--gear,
.divein-shelf-panel .divein-shelf-groups--snork { --row-gap: 14px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--row-gap) 22px; }
.divein-shelf-panel .divein-shelf-groups--boats { --row-gap: 14px; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--row-gap) 18px; }
/* Destinations: the wide regions span three rows; the two stacked regions sit in rows one and two of the last
   column; the third row is flexible, so a tall wide region never pushes the second stacked region down. */
.divein-shelf-panel .divein-shelf-groups--dest { grid-template-rows: auto auto 1fr; }
/* Articles: three equal columns (owner's thirds, 2026-09-24): lead | Latest | Featured above By subject. */
.divein-shelf-panel .divein-shelf-groups--arts { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; }

.divein-shelf-panel .divein-shelf-group { min-width: 0; }
.divein-shelf-panel .divein-shelf-tile { min-width: 0; }

/* ---- Tiles: a photograph, a heading or card link, text links ---- */
.divein-shelf-panel .divein-shelf-tile__head,
.divein-shelf-panel .divein-shelf-tile__link { display: block; min-width: 0; }
.divein-shelf-panel .divein-shelf-tile__image {
	display: block;
	aspect-ratio: 5 / 2;
	border-radius: 10px;
	overflow: hidden;
	background: var(--beige-100);
	margin-bottom: 9px;
	position: relative;
}
.divein-shelf-panel .divein-shelf-tile__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .7s var(--dsp-ease);
}
.divein-shelf-panel .divein-shelf-tile__image--wide { aspect-ratio: auto; height: 104px; }
.divein-shelf-panel .divein-shelf-tile__image--short { aspect-ratio: auto; height: 68px; }
.divein-shelf-panel .divein-shelf-tile__image--photo { aspect-ratio: 3 / 2; }
.divein-shelf-panel .divein-shelf-tile__image--window { aspect-ratio: 16 / 9; }
.divein-shelf-panel .divein-shelf-tile__title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: -.01em;
	color: var(--blue-900);
	margin-bottom: 5px;
	transition: color .13s var(--dsp-ease);
}
.divein-shelf-panel .divein-shelf-tile__title svg { width: 13px; height: 13px; color: var(--lightblue-600); flex: none; transition: transform .2s var(--dsp-ease); }
@media (hover: hover) {
	.divein-shelf-panel a.divein-shelf-tile__head:hover .divein-shelf-tile__title,
	.divein-shelf-panel a.divein-shelf-tile__link:hover .divein-shelf-tile__title { color: var(--blue-600); }
	.divein-shelf-panel a.divein-shelf-tile__head:hover .divein-shelf-tile__title svg,
	.divein-shelf-panel a.divein-shelf-tile__link:hover .divein-shelf-tile__title svg { transform: translateX(3px); }
	.divein-shelf-panel a.divein-shelf-tile__head:hover img,
	.divein-shelf-panel a.divein-shelf-tile__link:hover img,
	.divein-shelf-panel a.divein-shelf-lead:hover img { transform: scale(1.06); }
}

.divein-shelf-panel .divein-shelf-tile__links > li > a,
.divein-shelf-panel .divein-shelf-tile__links > li > .divein-shelf-link-heading { display: block; font-size: 13.5px; line-height: 1.25; padding: 2px 0; }
.divein-shelf-panel .divein-shelf-tile__links--c2 { columns: 2; column-gap: 18px; }
.divein-shelf-panel .divein-shelf-tile__links--c3 { columns: 3; column-gap: 18px; }
.divein-shelf-panel .divein-shelf-tile__links--c2 > li,
.divein-shelf-panel .divein-shelf-tile__links--c3 > li { break-inside: avoid; }
.divein-shelf-panel .divein-shelf-link-heading { font-weight: 700; color: var(--blue-900); }

/* Destinations layouts (contract 7.4). */
.divein-shelf-panel .divein-shelf-group--w3 { grid-column: span 3; grid-row: span 3; }
.divein-shelf-panel .divein-shelf-group--w2 { grid-column: span 2; grid-row: span 3; }
.divein-shelf-panel .divein-shelf-group--stack { grid-column: -2 / -1; }
.divein-shelf-panel .divein-shelf-group--stack + .divein-shelf-group--stack {
	margin-top: -6px; /* the stack's own 10px gap */
	margin-bottom: calc(-1 * var(--row-gap)); /* cancels the gap before the flexible third row */
}

/* ---- A text link: navy, the site's soft green underline; lighter navy and a darker, thicker line on hover ---- */
.divein-shelf-panel .divein-shelf-text-link {
	color: var(--blue-900);
	text-decoration: underline;
	text-decoration-color: var(--green-300);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .13s var(--dsp-ease), text-decoration-color .13s var(--dsp-ease);
}
@media (hover: hover) {
	.divein-shelf-panel a.divein-shelf-text-link:hover,
	.divein-shelf-panel a:hover .divein-shelf-text-link { color: var(--blue-600); text-decoration-color: var(--green-500); text-decoration-thickness: 2px; }
}
/* The owner's '›' marker (D5 option A) in a 12px hanging gutter; option B is removing this one class's rule. */
.divein-shelf-panel .divein-shelf-text-link--marked::before {
	content: "\203A";
	display: inline-block;
	width: 12px;
	margin-left: -12px;
	color: var(--lightblue-600);
	font-weight: 600;
	text-decoration: none;
}
/* In an index cell the gutter would sit on the photo, so the marker stays in line with the name. */
.divein-shelf-panel .divein-shelf-index-grid__cell .divein-shelf-text-link--marked::before { width: 10px; margin-left: 0; }

/* ---- Labels ---- */
.divein-shelf-panel .divein-shelf-label {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gray-600);
	padding-bottom: 6px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--gray-200);
}

/* ---- The gear index: one grid of guides, a photograph and a name each ---- */
.divein-shelf-panel .divein-shelf-group--gear_index {
	grid-column: 1 / -1;
	margin-top: calc(12px - var(--row-gap));
	padding-top: 12px;
	border-top: 1px solid var(--gray-100);
}
.divein-shelf-panel .divein-shelf-group--gear_index > .divein-shelf-label,
.divein-shelf-panel .divein-shelf-group--plan > .divein-shelf-label { border: 0; padding-bottom: 0; margin-bottom: 6px; }
.divein-shelf-panel .divein-shelf-index-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px 14px; align-items: start; }
.divein-shelf-panel .divein-shelf-index-grid .divein-shelf-group--gear_group,
.divein-shelf-panel .divein-shelf-index-grid__group { display: contents; }
.divein-shelf-panel .divein-shelf-index-grid__item { min-width: 0; }
.divein-shelf-panel .divein-shelf-index-grid__cell {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	min-width: 0;
	padding: 3px 10px 3px 3px;
	margin: 0 -10px 0 -3px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.25;
	color: var(--blue-900);
	transition: background .13s var(--dsp-ease);
}
.divein-shelf-panel .divein-shelf-index-grid__cell img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; background: var(--beige-100); }
.divein-shelf-panel .divein-shelf-index-grid__cell .divein-shelf-text-link { display: block; min-width: 0; }
@media (hover: hover) {
	.divein-shelf-panel a.divein-shelf-index-grid__cell:hover { background: var(--blue-50); }
}

/* ---- Destination index regions (the prototype's .sh__rest > .sh__cols: six columns, 16px gaps) ---- */
.divein-shelf-panel .divein-shelf-group--index {
	grid-row: 4;
	position: relative;
	margin-top: calc(12px - var(--row-gap));
	padding-top: 12px;
	/* The shelf grid has 22px gaps; these columns have 16px, so each is 5px wider and shifted by its index. */
	margin-left: calc(var(--j, 0) * -1px);
	margin-right: calc(var(--j, 0) * 1px - 5px);
}
.divein-shelf-panel .divein-shelf-group--index::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: -16px;
	border-top: 1px solid var(--gray-100);
}
.divein-shelf-panel .divein-shelf-group--index:not(:has(+ .divein-shelf-group--index))::before { right: 0; }
.divein-shelf-panel .divein-shelf-index-group__title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 10.5px;
	line-height: 1.5;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--blue-900);
	padding-bottom: 4px;
	border-bottom: 1px solid var(--gray-200);
	margin-bottom: 3px;
	min-height: 38px;
	transition: color .13s var(--dsp-ease);
}
.divein-shelf-panel .divein-shelf-index-group__title img { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; flex: none; background: var(--beige-100); }
.divein-shelf-panel a.divein-shelf-index-group__title svg { width: 12px; height: 12px; margin-left: auto; flex: none; color: var(--lightblue-600); transition: transform .2s var(--dsp-ease); }
@media (hover: hover) {
	.divein-shelf-panel a.divein-shelf-index-group__title:hover { color: var(--blue-600); }
	.divein-shelf-panel a.divein-shelf-index-group__title:hover svg { transform: translateX(3px); }
}
.divein-shelf-panel .divein-shelf-index-group__links > li > a,
.divein-shelf-panel .divein-shelf-index-group__links > li > .divein-shelf-link-heading { display: block; font-size: 13.5px; line-height: 1.25; padding: 2px 0; }

/* ---- Plan your trip: small photographs, bold names, chevrons ---- */
.divein-shelf-panel .divein-shelf-group--plan {
	grid-column: 1 / -1;
	margin-top: calc(12px - var(--row-gap));
	padding-top: 12px;
	border-top: 1px solid var(--gray-100);
}
.divein-shelf-panel .divein-shelf-plan__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
.divein-shelf-panel .divein-shelf-plan__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 40px;
	min-width: 0;
	padding: 2px 10px 2px 2px;
	margin: 0 -10px 0 -2px;
	border-radius: 10px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1.25;
	color: var(--blue-900);
	transition: background .13s var(--dsp-ease), color .13s var(--dsp-ease);
}
.divein-shelf-panel .divein-shelf-plan__item img { width: 52px; height: 36px; border-radius: 7px; object-fit: cover; flex: none; background: var(--beige-100); }
.divein-shelf-panel .divein-shelf-plan__item > span { display: block; flex: 1; min-width: 0; }
.divein-shelf-panel .divein-shelf-plan__item svg { width: 15px; height: 15px; color: var(--lightblue-600); flex: none; transition: transform .2s var(--dsp-ease); }
@media (hover: hover) {
	.divein-shelf-panel a.divein-shelf-plan__item:hover { background: var(--blue-50); color: var(--blue-600); }
	.divein-shelf-panel a.divein-shelf-plan__item:hover svg { transform: translateX(3px); }
}

/* ---- Editorial panels: a lead, rows with dates, a rail ---- */
.divein-shelf-panel .divein-shelf-group--latest_articles {
	grid-column: span 2;
	grid-row: span 2;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 22px;
	align-items: start;
}
.divein-shelf-panel .divein-shelf-group--featured,
.divein-shelf-panel .divein-shelf-groups--arts > .divein-shelf-group--subjects { grid-column: 3; }
.divein-shelf-panel .divein-shelf-group--latest_news {
	grid-column: span 4;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 22px;
	align-items: start;
}
.divein-shelf-panel .divein-shelf-lead { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.divein-shelf-panel .divein-shelf-lead .divein-shelf-tile__image { margin: 0; }
.divein-shelf-panel .divein-shelf-group--latest_articles .divein-shelf-lead__image { height: 250px; }
.divein-shelf-panel .divein-shelf-group--latest_news .divein-shelf-lead__image { height: 200px; }
.divein-shelf-panel .divein-shelf-lead__title {
	display: block;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 20px;
	line-height: 1.25;
	letter-spacing: -.015em;
	color: var(--blue-900);
	transition: color .13s var(--dsp-ease);
}
.divein-shelf-panel .divein-shelf-lead__summary { display: block; font-size: 14px; line-height: 1.5; color: var(--gray-700); }
.divein-shelf-panel .divein-shelf-meta { display: block; font-size: 12px; line-height: 1.4; color: var(--gray-600); }
.divein-shelf-panel .divein-shelf-meta b { font-weight: 600; color: var(--blue-600); }
.divein-shelf-panel .divein-shelf-column { min-width: 0; display: flex; flex-direction: column; }
.divein-shelf-panel .divein-shelf-row {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 8px 10px 8px 6px;
	margin: 0 -10px 0 -6px;
	border-radius: 10px;
	transition: background .13s var(--dsp-ease);
}
.divein-shelf-panel .divein-shelf-row + .divein-shelf-row { border-top: 1px solid var(--gray-100); }
.divein-shelf-panel .divein-shelf-row img { width: 96px; height: 64px; border-radius: 8px; object-fit: cover; flex: none; background: var(--beige-100); }
.divein-shelf-panel .divein-shelf-row > span { display: block; min-width: 0; flex: 1; }
.divein-shelf-panel .divein-shelf-row > svg { width: 14px; height: 14px; color: var(--lightblue-600); flex: none; transition: transform .2s var(--dsp-ease); }
.divein-shelf-panel .divein-shelf-row__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--blue-900);
	margin-bottom: 3px;
	transition: color .13s var(--dsp-ease);
}
@media (hover: hover) {
	.divein-shelf-panel a.divein-shelf-lead:hover .divein-shelf-lead__title { color: var(--blue-600); }
	.divein-shelf-panel a.divein-shelf-row:hover { background: var(--blue-50); }
	.divein-shelf-panel a.divein-shelf-row:hover .divein-shelf-row__title { color: var(--blue-600); }
	.divein-shelf-panel a.divein-shelf-row:hover > svg { transform: translateX(3px); }
}

/* By subject */
.divein-shelf-panel .divein-shelf-subject {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	padding: 0 10px 0 6px;
	margin: 0 -10px 0 -6px;
	border-radius: 10px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.5;
	color: var(--blue-900);
	transition: background .13s var(--dsp-ease), color .13s var(--dsp-ease);
}
.divein-shelf-panel .divein-shelf-group--subjects li + li > .divein-shelf-subject { border-top: 1px solid var(--gray-100); }
.divein-shelf-panel .divein-shelf-subject svg { width: 14px; height: 14px; color: var(--lightblue-600); transition: transform .2s var(--dsp-ease); }
@media (hover: hover) {
	.divein-shelf-panel a.divein-shelf-subject:hover { background: var(--blue-50); color: var(--blue-600); }
	.divein-shelf-panel a.divein-shelf-subject:hover svg { transform: translateX(3px); }
}

/* News sections on the beige plate */
.divein-shelf-panel .divein-shelf-sections-panel { grid-column: span 2; min-width: 0; background: var(--beige-50); border-radius: 12px; padding: 14px 12px 10px; }
.divein-shelf-panel .divein-shelf-sections-panel > .divein-shelf-label { border-color: var(--beige-300); margin: 0 6px 4px; }
.divein-shelf-panel .divein-shelf-sections-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.divein-shelf-panel .divein-shelf-sections-grid__item {
	display: block;
	min-height: 60px;
	padding: 7px 8px;
	border-radius: 8px;
	box-shadow: 0 1px 0 var(--beige-300);
	transition: background .13s var(--dsp-ease);
}
.divein-shelf-panel .divein-shelf-sections-grid > li:nth-last-child(-n+2) > .divein-shelf-sections-grid__item { box-shadow: none; }
.divein-shelf-panel .divein-shelf-sections-grid__item b {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.5;
	color: var(--blue-900);
	transition: color .13s var(--dsp-ease);
}
.divein-shelf-panel .divein-shelf-sections-grid__item b svg { width: 13px; height: 13px; color: var(--lightblue-600); flex: none; transition: transform .2s var(--dsp-ease); }
.divein-shelf-panel .divein-shelf-sections-grid__item > span { display: block; font-size: 12px; line-height: 1.35; color: var(--gray-600); }
@media (hover: hover) {
	.divein-shelf-panel a.divein-shelf-sections-grid__item:hover { background: #fff; }
	.divein-shelf-panel a.divein-shelf-sections-grid__item:hover b { color: var(--blue-600); }
	.divein-shelf-panel a.divein-shelf-sections-grid__item:hover b svg { transform: translateX(3px); }
}

/* ---- Paid Featured cards (Codex checkpoint, contract 7.5 item 6): 2x2, photo above title, lightest blue.
   Shared with the phone Articles screen (two cards; phone spacing in shelf-mobile.css). ---- */
:is(.divein-shelf-panel, .divein-shelf-drawer) .divein-shelf-featured__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
:is(.divein-shelf-panel, .divein-shelf-drawer) .divein-shelf-featured__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--lightblue-100);
	border-radius: 10px;
	background: var(--lightblue-5);
	overflow: hidden;
	transition: border-color .15s var(--divein-shelf-ease), box-shadow .15s var(--divein-shelf-ease);
}
:is(.divein-shelf-panel, .divein-shelf-drawer) .divein-shelf-featured__image { display: block; aspect-ratio: 16 / 9; background: var(--lightblue-50); overflow: hidden; }
:is(.divein-shelf-panel, .divein-shelf-drawer) .divein-shelf-featured__image img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .7s var(--divein-shelf-ease); }
:is(.divein-shelf-panel, .divein-shelf-drawer) .divein-shelf-featured__copy { display: grid; grid-template-columns: minmax(0, 1fr) 12px; gap: 4px 5px; padding: 8px; flex: 1; align-content: start; }
:is(.divein-shelf-panel, .divein-shelf-drawer) .divein-shelf-featured__tag {
	display: block;
	grid-column: 1 / -1;
	color: var(--orange-800);
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
}
:is(.divein-shelf-panel, .divein-shelf-drawer) .divein-shelf-featured__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--blue-900);
	overflow-wrap: anywhere;
	transition: color .15s var(--divein-shelf-ease);
}
:is(.divein-shelf-panel, .divein-shelf-drawer) .divein-shelf-featured__copy > svg { width: 12px; height: 12px; margin-top: 2px; color: var(--lightblue-600); transition: transform .2s var(--divein-shelf-ease); }
@media (hover: hover) {
	:is(.divein-shelf-panel, .divein-shelf-drawer) a.divein-shelf-featured__card:hover { border-color: var(--lightblue-300); box-shadow: var(--shadow-sm); }
	:is(.divein-shelf-panel, .divein-shelf-drawer) a.divein-shelf-featured__card:hover img { transform: scale(1.06); }
	:is(.divein-shelf-panel, .divein-shelf-drawer) a.divein-shelf-featured__card:hover .divein-shelf-featured__title { color: var(--blue-600); }
	:is(.divein-shelf-panel, .divein-shelf-drawer) a.divein-shelf-featured__card:hover .divein-shelf-featured__copy > svg { transform: translateX(2px); }
}

/* ---- The page dim behind an open panel (prototype .scrim, build.py:197). divein-shelf.js appends it to <body> and
   opens it with the `hidden` attribute; the More card leaves the page undimmed. It sits under the header, whose
   panels stay clickable, and over the page, so a click beside a panel closes it. ---- */
.divein-shelf-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(7, 39, 90, .18); }