/**
 * Cancer Data View — landing page styles.
 *
 * Shared by the derived landing page and the Power BI demo page, so the two
 * demos differ in what sits behind the click and not in their chrome.
 *
 * Sizes are written for the theme's 10px root (bootstrap.css:290) and borrow
 * the scale in use on .cds and the Data MVP — see cancer-data-view.css.
 */

/* ---- Prototype CSS. Scoped under .cdvl so it cannot leak. --------------- */
.cdvl {
	/* Same rhythm as the Data MVP hero and .cds — 32px clear of the header,
	   64px clear of the footer. */
	padding: 32px 0 64px;
	--cdvl-ink:      #0b0b0b;
	--cdvl-ink-2:    #52514e;
	--cdvl-line:     #e2e1dd;
	--cdvl-surface:  #ffffff;
	--cdvl-soft:     #f7f7f5;
	--cdvl-accent:   #2a78d6;
	--cdvl-accent-w: #eef4fd;
}
.cdvl__head { margin: 0 0 30px; }
.cdvl__title { font-size: 34px; line-height: 1.2; margin: 0 0 10px; color: var(--cdvl-ink); }
.cdvl__intro { color: var(--cdvl-ink-2); max-width: 68ch; }
.cdvl__intro p:last-child { margin-bottom: 0; }

.cdvl__card { border: 1px solid var(--cdvl-line); border-radius: 6px; background: var(--cdvl-surface);
	padding: 26px 28px; margin-bottom: 26px; }
.cdvl__card:last-of-type { margin-bottom: 0; }
.cdvl__h2 { font-size: 18px; font-weight: 700; color: var(--cdvl-ink); margin: 0 0 16px; }
.cdvl__h3 { font-size: 15px; font-weight: 700; color: var(--cdvl-ink); margin: 0 0 8px;
	letter-spacing: .01em; }
.cdvl__rule { border: 0; border-top: 1px solid var(--cdvl-line); margin: 28px 0 24px; }
.cdvl__empty { color: var(--cdvl-ink-2); margin: 0; }

/* search */
.cdvl__search { position: relative; margin-bottom: 26px; }
.cdvl__searchIcon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	font-size: 15px; opacity: .55; pointer-events: none; }
.cdvl__search input { width: 100%; padding: 13px 16px 13px 42px; font-size: 16px;
	border: 1px solid var(--cdvl-line); border-radius: 5px; background: var(--cdvl-surface);
	color: var(--cdvl-ink); }
.cdvl__search input:focus { outline: 2px solid var(--cdvl-accent); outline-offset: 1px; border-color: var(--cdvl-accent); }

/* the eight theme cards */
.cdvl__grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: 12px; }
.cdvl__tile { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; gap: 3px; padding: 16px 18px;
	border: 1px solid var(--cdvl-line); border-radius: 5px; background: var(--cdvl-surface);
	text-decoration: none; transition: border-color .15s, background .15s; }
a.cdvl__tile:hover { border-color: var(--cdvl-accent); background: var(--cdvl-accent-w); text-decoration: none; }
a.cdvl__tile:focus-visible { outline: 2px solid var(--cdvl-accent); outline-offset: 2px; }
.cdvl__tileName { font-size: 16px; color: var(--cdvl-ink); }
a.cdvl__tile .cdvl__tileName { color: var(--cdvl-accent); font-weight: 600; }
.cdvl__tileMeta { font-size: 12.5px; color: var(--cdvl-ink-2); }
/* An empty card is shown, not hidden: the mockup lists all eight themes, and a
   missing one would read as "we forgot it" rather than "no data yet". */
.cdvl__tile.is-empty { background: var(--cdvl-soft); border-style: dashed; }
.cdvl__tile.is-empty .cdvl__tileName { color: var(--cdvl-ink-2); }

/* Popular is a bulleted shortlist in two columns, as the mockup draws it. It
   keeps its bullets while the by-theme list keeps its arrows — the two are
   told apart by the marker, not by one of them going without. */
.cdvl__quick { margin: 0; padding: 0 0 0 20px; columns: 2; column-gap: 36px; }
.cdvl__quick li { break-inside: avoid; }
.cdvl__quick a { color: var(--cdvl-accent); text-decoration: none; }
.cdvl__quick a:hover { text-decoration: underline; }
.cdvl__quick a:focus-visible { outline: 2px solid var(--cdvl-accent); outline-offset: 2px; }

/* main.css sets `#content ul { list-style: disc; margin-left: 20px }` with an
   ID selector, which outranks a plain class — that is where the stray bullet
   beside the arrow came from. Both lists carry their own affordance, so the
   inherited bullet and indent are turned off at matching specificity rather
   than with !important. */
#content .cdvl__quick,
#content .cdvl__rows {
	/* the same rule also hands down font-size 1.357em / weight 300 / #555 */
	margin-left: 0; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--cdvl-ink); }
/* Padding rather than margin carries the indent, so the bullets stay inside
   the column box instead of being clipped at a column edge. */
#content .cdvl__quick { list-style: disc; padding-left: 20px; }
#content .cdvl__rows  { list-style: none; }
#content .cdvl__quick li { margin-bottom: 9px; }
#content .cdvl__rows li  { margin-bottom: 0; }

/* While a search is running the browse UI is hidden, not removed — the same
   nodes come back when the box is cleared. */
[data-cdvl-browse][hidden] { display: none !important; }

/* by-theme list */
.cdvl__group + .cdvl__group { margin-top: 26px; }
.cdvl__group[hidden] { display: none; }
.cdvl__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cdvl-line); }
.cdvl__rows li { border-bottom: 1px solid var(--cdvl-line); }
.cdvl__rows li[hidden] { display: none; }
.cdvl__rows a { display: -ms-flexbox; display: flex; -ms-flex-align: baseline; align-items: baseline; gap: 10px; padding: 11px 4px;
	text-decoration: none; color: var(--cdvl-accent); }
.cdvl__rows a:hover { background: var(--cdvl-accent-w); text-decoration: none; }
.cdvl__rows a:focus-visible { outline: 2px solid var(--cdvl-accent); outline-offset: -2px; }
.cdvl__arrow { color: var(--cdvl-accent); }
.cdvl__rowName { -ms-flex: 1 1 auto; flex: 1 1 auto; }
.cdvl__rowFrom { -ms-flex: 0 0 auto; flex: 0 0 auto; font-size: 12.5px; color: var(--cdvl-ink-2); }

@media (max-width: 700px) {
	.cdvl__grid { -ms-grid-columns: 1fr; grid-template-columns: 1fr; }
	.cdvl__quick { columns: 1; }
	.cdvl__card { padding: 20px 18px; }
	.cdvl__rowFrom { display: none; }
}

/* One row per dashboard; several indicators fold under a button. */
.cdvl__dash[hidden] { display: none; }
.cdvl__dashBtn { display: -ms-flexbox; display: flex; -ms-flex-align: baseline; align-items: baseline; gap: 10px; width: 100%; margin: 0; padding: 11px 4px;
	border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left;
	font: inherit; color: var(--cdvl-accent); text-transform: none; letter-spacing: 0; cursor: pointer; }
.cdvl__dashBtn:hover { background: var(--cdvl-accent-w); }
.cdvl__dashBtn:focus-visible { outline: 2px solid var(--cdvl-accent); outline-offset: -2px; }
.cdvl__chev { display: inline-block; width: 1em; text-align: center; font-size: 1.2em; line-height: 1;
	transition: transform .15s ease; }
.cdvl__dashBtn[aria-expanded="true"] .cdvl__chev { transform: rotate(90deg); }
#content .cdvl__sub, .cdvl__sub { list-style: none; margin: 0; padding: 0 0 0 24px; border-top: 1px solid var(--cdvl-line); }
.cdvl__sub[hidden] { display: none; }
.cdvl__sub li:last-child { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .cdvl__chev { transition: none; } }