/* The summary export (web/js/components/exportsummary.js). Everything is scoped to .xs, which exists only when the server prints a PDF. */

html[data-pdf], html[data-pdf] body { background: #fffdf9 !important; }
html[data-pdf] #app-nav, html[data-pdf] #app-footer, html[data-pdf] .snap-banner, html[data-pdf] .skip { display: none !important; }
html[data-pdf] * { animation: none !important; transition: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.xs { width: 100%; max-width: 7.3in; margin: 0 auto; padding: 0; color: var(--text-body); font: 400 11.5px/1.45 var(--font-ui); }
.xs *, .xs *::before, .xs *::after { box-sizing: border-box; }
:where(.xs h1, .xs h2, .xs p, .xs ul, .xs ol) { margin: 0; padding: 0; }
.xs ul, .xs ol { list-style: none; }
.xs b { font-weight: 600; color: var(--text-heading); }

/* Masthead */
.xs-mast { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--border-hairline); color: var(--text-secondary); font-size: 10.5px; }
.xs-lockup { height: 22px; width: auto; display: block; }
.xs-mast b { color: var(--encore-buffalo-brown); font-weight: 600; }

/* Hero: who, the score, the level, one line */
.xs-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 28px; align-items: end; margin-top: 12px; padding: 16px 24px 14px; border-radius: 22px; background: var(--encore-yellow-sheet); break-inside: avoid; }
.xs-ident { display: flex; align-items: center; gap: 14px; grid-column: 1 / -1; }
.xs-ident .lv-brand { flex: none; display: flex; align-items: center; justify-content: center; height: 54px; min-width: 54px; padding: 0 12px; margin: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(34, 34, 34, 0.08); }
.xs-ident .lv-brand-img { height: 28px; width: auto; max-width: 140px; object-fit: contain; display: block; }
.xs-ident .lv-brand-img.is-tile { height: 38px; width: 38px; }
.xs-ident .lv-brand-img.is-invert { filter: invert(1); }
.xs-name { font: 400 32px/1 var(--font-display); letter-spacing: -0.02em; color: var(--text-heading); }
.xs-meta { margin-top: 5px; color: var(--text-secondary); font-size: 11px; }

.xs-score { display: contents; }
.xs-scoreline { grid-column: 2; grid-row: 2 / span 3; align-self: center; display: flex; align-items: baseline; gap: 6px; justify-self: end; }
.xs-num { font: 400 96px/0.82 var(--font-display); letter-spacing: -0.05em; color: var(--encore-izmir-blue); font-variant-numeric: tabular-nums lining-nums; }
.xs-of { font: 500 16px/1 var(--font-ui); color: var(--text-secondary); }
.xs-tags { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.xs-tags .chip { height: 26px; font-size: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(34, 34, 34, 0.1); }
.xs-tags .chip--level { background: var(--encore-buffalo-brown); color: var(--text-on-brand); box-shadow: none; }
.xs-tags .chip--level .icon--meter, .xs-tags .chip--level svg { color: var(--text-on-brand); }
.xs-delta { color: var(--text-secondary); font-size: 11px; }
.xs-verdict { grid-column: 1; margin-top: 8px; font: 500 14px/1.35 var(--font-ui); color: var(--text-heading); max-width: 38ch; }
.xs-rank { grid-column: 1; margin-top: 4px; color: var(--text-secondary); font-size: 10.5px; }

/* Sections */
.xs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; margin-top: 16px; align-items: start; }
.xs-sec { break-inside: avoid; margin-top: 16px; }
.xs-grid .xs-sec { margin-top: 0; }
.xs-sec h2 { font: 400 20px/1.05 var(--font-display); letter-spacing: -0.01em; color: var(--encore-buffalo-brown); padding-bottom: 7px; margin-bottom: 9px; border-bottom: 1px solid var(--border-hairline); }
.xs-lead { margin-bottom: 10px; color: var(--text-heading); font-size: 12px; line-height: 1.4; }
.xs-note { margin-top: 7px; color: var(--text-secondary); font-size: 9.5px; }

/* Score by area */
.xs-areas { display: grid; gap: 6px; }
.xs-area { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.xs-area-name { font-weight: 600; color: var(--text-heading); font-size: 11px; }
.xs-bar { display: block; height: 9px; border-radius: 99px; background: rgba(34, 34, 34, 0.09); overflow: hidden; }
.xs-bar i { display: block; height: 100%; border-radius: 99px; background: var(--encore-izmir-blue); }
.xs-area.is-none .xs-bar { background: repeating-linear-gradient(135deg, rgba(34, 34, 34, 0.1) 0 3px, transparent 3px 6px); }
.xs-area-pts { min-width: 54px; text-align: right; color: var(--text-secondary); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.xs-area.is-none .xs-area-pts { font-size: 9px; max-width: 78px; line-height: 1.15; }

/* Level ladder */
.xs-ladder { display: grid; gap: 5px; }
.xs-rung { display: grid; grid-template-columns: 30px minmax(0, 1fr) 40px; gap: 10px; align-items: center; padding: 7px 12px 7px 8px; border-radius: 12px; background: rgba(34, 34, 34, 0.045); break-inside: avoid; }
.xs-rung-n { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(34, 34, 34, 0.12); font: 400 15px/1 var(--font-display); color: var(--text-secondary); }
.xs-rung > div { display: grid; gap: 1px; }
.xs-rung b { font-size: 11.5px; }
.xs-rung span { color: var(--text-secondary); font-size: 10.5px; line-height: 1.3; }
.xs-rung i { justify-self: end; font: 600 8.5px/1 var(--font-ui); letter-spacing: 0.07em; text-transform: uppercase; font-style: normal; color: var(--encore-izmir-blue); }
.xs-rung.is-past .xs-rung-n { background: rgba(25, 70, 186, 0.12); color: var(--encore-izmir-blue); box-shadow: none; }
.xs-rung.is-here { background: var(--encore-izmir-blue); }
.xs-rung.is-here b, .xs-rung.is-here span, .xs-rung.is-here i { color: #fff; }
.xs-rung.is-here .xs-rung-n { background: #fff; color: var(--encore-izmir-blue); box-shadow: none; }
.xs-rung.is-next { background: #fff; box-shadow: inset 0 0 0 1.5px var(--encore-izmir-blue); }
.xs-next { margin-top: 12px; font-size: 11px; color: var(--text-body); }

/* Outcomes */
.xs-themes { display: grid; gap: 7px; }
.xs-theme { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; break-inside: avoid; }
.xs-theme > div { display: grid; gap: 1px; }
.xs-theme b { font-size: 11.5px; }
.xs-theme span { color: var(--text-secondary); font-size: 10.5px; line-height: 1.35; }
.xs-theme svg { margin-top: 1px; }

/* Agents table */
.xs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 10.5px; }
.xs-table th, .xs-table td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--border-hairline); vertical-align: middle; }
.xs-table thead th { padding-top: 0; color: var(--text-secondary); font: 600 9.5px/1.1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.05em; }
.xs-table tbody th { font-weight: 400; white-space: nowrap; }
.xs-table tbody th b { display: block; font-size: 11.5px; }
.xs-table tbody th small { color: var(--text-secondary); font-size: 9.5px; }
.xs-table tbody tr:last-child th, .xs-table tbody tr:last-child td { border-bottom: 0; }
.xs-cell { white-space: nowrap; }
.xs-cell span { margin-left: 5px; vertical-align: middle; }
.xs-cell svg { display: inline-block; vertical-align: middle; }
.xs-cell--unknown { color: var(--text-secondary); }

/* Fix first and what works. The second page starts here. */
.xs-page2 { break-before: page; padding-top: 4px; }
.xs-page2 .xs-grid:first-child { margin-top: 0; }
.xs-levels-sec { margin-top: 26px; }
.xs-grid--fix { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.xs-gaps { display: grid; gap: 10px; counter-reset: gap; }
.xs-gaps li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 9px; align-items: start; break-inside: avoid; }
.xs-gaps li > div { display: grid; gap: 2px; }
.xs-gaps b { font-size: 11.5px; }
.xs-gaps span { color: var(--text-secondary); font-size: 10.5px; line-height: 1.35; }
.xs-gaps em { font: 400 17px/1 var(--font-display); font-style: normal; color: var(--encore-buffalo-brown); font-variant-numeric: tabular-nums; }
.xs-works { align-self: start; padding: 16px 18px 18px; border-radius: 18px; background: var(--encore-yellow-sheet); }
.xs-works h2 { border-bottom-color: rgba(34, 34, 34, 0.12); }
.xs-works ul { display: grid; gap: 9px; }
.xs-works li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 10.5px; line-height: 1.35; color: var(--text-body); }

/* Footer */
.xs-foot { margin-top: 24px; padding-top: 10px; border-top: 1px solid var(--border-hairline); color: var(--text-secondary); font-size: 9.5px; line-height: 1.45; }
.xs-foot p + p { margin-top: 3px; }

@media print {
  html[data-pdf] body { background: var(--encore-buttercream-bright) !important; font-size: 11.5px; }
  .xs { max-width: none; }
}

/* The Export PDF button and its two choices (web/js/components/exportmenu.js). */
.xm { position: relative; display: inline-flex; }
.xm-btn .xm-chev { display: inline-flex; margin-left: 2px; transition: transform var(--duration-fast) var(--ease-standard); }
.xm-btn[aria-expanded="true"] .xm-chev { transform: rotate(180deg); }
.xm-btn:disabled { opacity: 0.7; cursor: progress; }
.xm-list { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; display: grid; gap: 2px; width: min(340px, calc(100vw - 32px)); padding: 6px; border-radius: 18px; background: var(--encore-buttercream-bright); box-shadow: var(--shadow-inset-hairline), 0 12px 32px rgba(34, 34, 34, 0.16); }
.xm--right .xm-list { left: auto; right: 0; }
.xm-list[hidden] { display: none; }
.xm-item { display: grid; gap: 2px; width: 100%; padding: 10px 14px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; font: inherit; color: var(--text-heading); }
.xm-item b { font: 600 15px/1.2 var(--font-ui); }
.xm-item span { font: 400 13px/1.35 var(--font-ui); color: var(--text-secondary); }
.xm-item:hover, .xm-item:focus-visible { background: var(--surface-muted); outline: none; }
.xm-item:focus-visible { box-shadow: 0 0 0 2px var(--border-focus); }
/* In the action column of the overview the button is as wide as the others, and its choices open under it, inside the column's edge. */
@media (min-width: 900px) { .ov-actions > .xm { display: flex; width: 100%; } .ov-actions > .xm .xm-btn { width: 100%; justify-content: center; } .ov-actions .xm-list { width: 100%; min-width: 280px; right: 0; left: auto; } }
@media (max-width: 899.98px) { .ov-actions > .xm { display: flex; width: 100%; } .ov-actions > .xm .xm-btn { width: 100%; justify-content: center; } .ov-actions .xm-list { width: 100%; } }
@media print { .xm { display: none !important; } }