/* ==========================================================================================
   Timeline Viewer — the page around a chart (level 1 of the Interactive Timeline Builder; owner's Q30 VIEWER, 2026-10-10)
   ==========================================================================================
   Made for phones first (360 px) and big screens; used by Design\Templates\viewer_index.html.j2 and viewer_chart.html.j2.
   The chart sheets themselves are styled by series.css + a theme file and are NOT touched here (only scaled, hidden or shown).
   ========================================================================================== */

/* ------------------------------------------------------------------------------------------ */
/* ----------------------------------- Control panel ---------------------------------------- */
/* ------------------------------------------------------------------------------------------ */
:root {
	--viewer-bar:            #3b2a1d;                 /* toolbar and page header (dark, warm) */
	--viewer-bar-text:       #fbf6ea;
	--viewer-bar-button:     rgba(251, 246, 234, .12);
	--viewer-bar-button-on:  #f6eedb;                 /* the chosen button */
	--viewer-bar-button-on-text: #3b2a1d;
	--viewer-backdrop:       #8d8478;                 /* around the sheets (the same grey-brown as chart.html) */
	--viewer-backdrop-dark:  #1d1a16;                 /* "dark room" */
	--viewer-page:           #f3efe6;                 /* the index page */
	--viewer-card:           #ffffff;
	--viewer-ink:            #2a1f14;
	--viewer-ink-soft:       #5a4a38;
	--viewer-line:           #e0d6bd;
	--viewer-accent:         #7a2a1f;
	--viewer-focus:          #ffbf47;
	--viewer-toolbar-height: 52px;
	--viewer-radius:         10px;
}

/* ------------------------------------------------------------------------------------------ */
/* ----------------------------------- Both pages ------------------------------------------- */
/* ------------------------------------------------------------------------------------------ */
.viewer-page, .viewer-bar { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }          /* NOT on body.viewer-chart: the sheets inherit the series fonts from series.css's body rule */
.viewer-page a, .viewer-bar a { color: inherit; }
.viewer-bar button:focus-visible, .viewer-bar a:focus-visible, .card a:focus-visible, .viewer-page a:focus-visible { outline: 3px solid var(--viewer-focus); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------------------------------ */
/* ----------------------------------- The index page --------------------------------------- */
/* ------------------------------------------------------------------------------------------ */
body.viewer-page { background: var(--viewer-page); color: var(--viewer-ink); line-height: 1.5; }
.viewer-page .page-head { background: var(--viewer-bar); color: var(--viewer-bar-text); padding: 28px 16px 26px; }
.viewer-page .page-head .in { max-width: 1100px; margin: 0 auto; }
.viewer-page .page-head h1 { margin: 0 0 6px; font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.15; font-family: var(--font-title, Georgia, serif); font-weight: 650; }
.viewer-page .page-head p { margin: 0; max-width: 46em; font-size: 1.08rem; opacity: .94; }
.viewer-page .promises { max-width: 1100px; margin: 18px auto 0; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.viewer-page .promises span { background: var(--viewer-card); border: 1px solid var(--viewer-line); border-radius: 999px; padding: 4px 14px; font-size: .92rem; }
.viewer-page main { max-width: 1100px; margin: 0 auto; padding: 18px 16px 40px; }
.viewer-page h2 { font-size: 1.35rem; margin: 22px 0 10px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.card { background: var(--viewer-card); border: 1px solid var(--viewer-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06); overflow: hidden; display: flex; flex-direction: column; }
.card .thumb { display: block; background: #e9dfc4; aspect-ratio: 200 / 155; }
.card .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card h3 { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.card .meta { color: var(--viewer-ink-soft); font-size: .88rem; }
.card .about { color: var(--viewer-ink-soft); font-size: .93rem; margin: 2px 0 6px; }
.card .actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.button { display: inline-block; border-radius: 999px; padding: 6px 15px; font-weight: 600; font-size: .92rem; text-decoration: none; border: 2px solid var(--viewer-accent); color: var(--viewer-accent); background: transparent; }
.button.primary { background: var(--viewer-accent); color: #fff; }
.button:hover { filter: brightness(1.08); }
.viewer-page footer { max-width: 1100px; margin: 0 auto; padding: 0 16px 36px; color: var(--viewer-ink-soft); font-size: .88rem; }

/* ------------------------------------------------------------------------------------------ */
/* ----------------------------------- The chart page: toolbar ------------------------------ */
/* ------------------------------------------------------------------------------------------ */
body.viewer-chart { background: var(--viewer-backdrop); padding-top: var(--viewer-toolbar-height); }       /* beats series.css "body { background: #8d8478 }" by order */
html[data-room="dark"] body.viewer-chart { background: var(--viewer-backdrop-dark); }
.viewer-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; min-height: var(--viewer-toolbar-height); background: var(--viewer-bar); color: var(--viewer-bar-text);
              display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 6px 14px; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.viewer-bar .vb-back { text-decoration: none; font-weight: 600; white-space: nowrap; }
.viewer-bar .vb-title { font-weight: 700; margin-right: auto; min-width: 8em; max-width: 30em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-bar .vb-title small { font-weight: 400; opacity: .8; margin-left: 6px; }
.viewer-bar .vb-group { display: inline-flex; border-radius: 999px; background: var(--viewer-bar-button); padding: 2px; gap: 2px; }
.viewer-bar button, .viewer-bar .vb-menu summary { font: inherit; font-size: .9rem; cursor: pointer; border: 0; border-radius: 999px; padding: 5px 12px; color: var(--viewer-bar-text); background: transparent; }
.viewer-bar button:hover, .viewer-bar .vb-menu summary:hover { background: rgba(251, 246, 234, .22); }
.viewer-bar button[aria-pressed="true"] { background: var(--viewer-bar-button-on); color: var(--viewer-bar-button-on-text); font-weight: 700; }
.viewer-bar button:disabled { opacity: .45; cursor: not-allowed; }
.viewer-bar .vb-solo { background: var(--viewer-bar-button); }
.viewer-bar .vb-menu { position: relative; }
.viewer-bar .vb-menu summary { list-style: none; background: var(--viewer-bar-button); }
.viewer-bar .vb-menu summary::-webkit-details-marker { display: none; }
.viewer-bar .vb-menu .vb-list { position: absolute; right: 0; top: 110%; min-width: 15em; background: var(--viewer-card); color: var(--viewer-ink); border-radius: var(--viewer-radius); box-shadow: 0 8px 24px rgba(0,0,0,.35); padding: 6px; display: flex; flex-direction: column; }
.viewer-bar .vb-menu .vb-list a { padding: 7px 10px; border-radius: 6px; text-decoration: none; }
.viewer-bar .vb-menu .vb-list a:hover { background: #f3ead2; }
.viewer-bar .vb-menu .vb-list small { color: var(--viewer-ink-soft); }
.viewer-bar .vb-label { font-size: .8rem; opacity: .85; margin-right: -6px; }
.viewer-bar .vb-extra { display: contents; }                           /* wide screens: the look, zoom, room, print and downloads controls sit in the same row as the rest */
.viewer-bar .vb-only-small { display: none; }
.viewer-bar [hidden] { display: none !important; }                       /* ".group { display: inline-flex }" would otherwise win over the hidden attribute */

/* ------------------------------------------------------------------------------------------ */
/* ----------------------------------- The chart page: stage -------------------------------- */
/* ------------------------------------------------------------------------------------------ */
#stage { padding: 20px 0 40px; }
#sheets { zoom: var(--viewer-zoom, 1); }                                 /* set by viewer.js AFTER the chart has packed its labels (never while it measures) */
html[data-view="chart"] #sheets .sheet:not(:first-child) { display: none; }
html[data-view="notes"] #sheets .sheet:first-child { display: none; }
html[data-view="phone"] #sheets { display: none; }
html[data-room="dark"] #sheets .sheet { filter: brightness(.92); }
#phone { display: none; }
html[data-view="phone"] #phone { display: block; }
#phone .phone-frame { margin: 0 auto; width: min(100%, 420px); height: calc(100vh - var(--viewer-toolbar-height) - 40px); border: 0; border-radius: 18px; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.4); display: block; }
.stage-note { text-align: center; color: #fff; opacity: .9; font-size: .92rem; margin: 0 16px 14px; }
html[data-room="dark"] .stage-note { opacity: .7; }
noscript .stage-note { background: #fff3cd; color: #5a4a38; border-radius: 8px; padding: 10px; }

/* ------------------------------------------------------------------------------------------ */
/* ----------------------------------- Small screens ---------------------------------------- */
/* ------------------------------------------------------------------------------------------ */
@media (max-width: 720px) {
	body.viewer-chart { padding-top: 0; }
	.viewer-bar { position: static; }
	.viewer-bar .vb-title { flex-basis: 100%; max-width: none; order: 2; }
	.viewer-bar .vb-back { order: 1; }
	.viewer-bar .vb-only-small { display: inline-flex; }
	.viewer-bar .vb-extra { display: none; flex-basis: 100%; flex-wrap: wrap; gap: 6px 10px; }
	.viewer-bar .vb-extra.open { display: flex; }
	#phone .phone-frame { height: calc(100vh - 120px); width: 100%; border-radius: 0; }
}

/* ------------------------------------------------------------------------------------------ */
/* ----------------------------------- Printing: only the sheets that are shown, at full size - */
/* ------------------------------------------------------------------------------------------ */
@media print {
	body.viewer-chart, html[data-room="dark"] body.viewer-chart { background: none; padding-top: 0; }
	.viewer-bar, .stage-note, #phone { display: none !important; }
	#stage { padding: 0; }
	#sheets { zoom: 1 !important; }
	#sheets .sheet { margin: 0; box-shadow: none; filter: none !important; }
}