/* Copyright YCI Canada. All rights reserved. This runs the SnapEE sample on snapee.ca. You may read it. Copying or reusing it is not permitted (see the Terms of Use at https://snapee.ca/terms/). */
/* snapee.ca/sample-report: the demo page. A made-up portal beside the SnapEE popup. */
:root { --navy: #13315c; --teal: #0b6b62; --ink: #16202e; --muted: #4b5a6d; --line: #d7dfe9; --tint: #f4f7fb; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: "Segoe UI", -apple-system, Arial, sans-serif; color: var(--ink); background: #fff; line-height: 1.45; }
a { color: var(--teal); }
.sample-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 20px; background: var(--navy); color: #fff; font-size: 14px; }
.sample-bar a { color: #fff; }
.sample-bar .sb-brand { font-weight: 700; text-decoration: none; font-size: 16px; }
.sample-bar .sb-text { flex: 1 1 320px; }
.sample-bar .sb-cta { background: #fff; color: var(--navy); font-weight: 700; padding: 7px 14px; border-radius: 4px; text-decoration: none; white-space: nowrap; }
.demo { max-width: 1120px; margin: 0 auto; padding: 24px 20px 48px; }
.demo h1 { font-size: 28px; line-height: 1.2; margin: 0 0 8px; color: var(--navy); }
.file-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.file-switch a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--navy); font-size: 14px; background: #fff; }
.file-switch a[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.demo-lead { margin: 0 0 20px; max-width: 760px; color: var(--muted); font-size: 16px; }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.portal { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(19, 49, 92, .08); min-height: 560px; }
.portal-top { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #e9eef5; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.portal-top .dots { width: 44px; height: 10px; background: radial-gradient(circle, #b9c4d3 4px, transparent 4.5px) 0 50% / 15px 10px repeat-x; }
.portal-url { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 2px 12px; }
.walkbar { margin: 0 auto; width: max-content; max-width: 96%; background: var(--navy); color: #fff; font-size: 13px; padding: 7px 12px; border-radius: 0 0 8px 8px; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.walkbar .fake-btn { margin-left: 10px; background: #fff; color: var(--navy); font-weight: 700; padding: 2px 10px; border-radius: 4px; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.portal-body { padding: 20px 24px 28px; }
.portal-body h2 { font-size: 20px; margin: 0 0 4px; color: var(--ink); }
.portal-body .lede { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.portal-body h3 { font-size: 15px; margin: 18px 0 6px; padding: 6px 10px; background: #4c7bb5; color: #fff; border-radius: 3px; }
table.forms { width: 100%; border-collapse: collapse; font-size: 14px; }
table.forms th, table.forms td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
table.forms th { background: var(--tint); font-size: 13px; }
table.forms tr.reading td { background: #fff7df; }
table.forms td.status { color: #1b6b2f; font-weight: 600; }
.fake-form-btn { display: inline-block; background: #26344a; color: #fff; padding: 3px 12px; border-radius: 3px; font-size: 13px; }
.reading-line { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.spinner { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--teal); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.preview { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.preview li { padding: 7px 0; border-bottom: 1px solid var(--line); animation: appear .4s ease both; }
.preview .q { display: block; color: var(--muted); font-size: 13px; }
.preview .a { color: #1155cc; font-weight: 600; }
@keyframes appear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.track { display: flex; gap: 5px; margin: 14px 0 0; }
.track span { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.track span.on { background: var(--teal); }
.popup-col { position: sticky; top: 16px; }
.coach { margin: 0 0 10px; padding: 10px 12px; border-left: 4px solid var(--teal); background: var(--tint); font-size: 14px; }
.popup-frame { width: 340px; max-width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 6px 20px rgba(19, 49, 92, .16); }
.demo-links { margin: 10px 0 0; font-size: 14px; display: flex; gap: 16px; align-items: center; }
.demo-links button { background: none; border: 0; padding: 0; color: var(--teal); text-decoration: underline; font: inherit; cursor: pointer; }
.demo-note { margin: 22px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 860px) { .stage { grid-template-columns: 1fr; } .popup-col { position: static; order: -1; } .popup-frame { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } .preview li { animation: none; } }

/* the made-up APR portal: the layout cues of the real one, with no flag, no wordmark and no government signature */
.portal-body { font-family: "Noto Sans", "Segoe UI", Arial, sans-serif; color: #333; padding: 0 28px 32px; }
.portal-body h2.page { font-size: 30px; font-weight: 700; margin: 6px 0 12px; padding-bottom: 6px; border-bottom: 1px solid #af3c43; color: #333; }
.portal-body h3 { background: #4c7bb5; font-size: 22px; padding: 8px 12px; margin: 22px 0 0; border-radius: 0; }
.p-top { padding-top: 14px; font-size: 14px; }
.p-top p { margin: 0 0 6px; }
.crumbs { color: #284162; }
.signed { text-align: right; }
.signed .plink { margin-left: 10px; color: #284162; text-decoration: underline; }
.toolbar { display: flex; flex-wrap: wrap; margin: 16px 0 10px; border: 1px solid #c8c8c8; border-radius: 3px; width: max-content; max-width: 100%; background: #f1f1f1; }
.toolbar .tb { padding: 8px 16px; font-size: 15px; color: #284162; border-right: 1px solid #c8c8c8; }
.toolbar .tb:last-child { border-right: 0; }
.toolbar .tb::before { margin-right: 8px; font-size: 14px; }
.tb-again::before { content: "\21BB"; } .tb-print::before { content: "\2399"; } .tb-issue::before { content: "\2709"; } .tb-help::before { content: "?"; display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 50%; background: #284162; color: #fff; font-size: 11px; }
.portal-body .lede { font-size: 15px; color: #333; margin: 0 0 14px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: #284162; text-decoration: underline; cursor: pointer; }
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 14px; }
.panel { border: 1px solid #aaa; border-radius: 3px; }
.panel-head { background: #f5f5f5; border-bottom: 1px solid #aaa; padding: 10px 14px; font-size: 20px; font-weight: 600; }
.panel-body { padding: 10px 14px 6px; font-size: 14px; }
.panel-body p { margin: 0 0 8px; }
table.docs { width: 100%; border-collapse: collapse; font-size: 14px; }
table.docs th { background: #e8e8e8; text-align: left; padding: 10px; border: 1px solid #ddd; font-size: 14px; }
table.docs td { background: #f5f5f5; padding: 10px; border: 1px solid #ddd; vertical-align: top; }
table.docs td.provided { color: #2f6b2c; }
.star, .req { color: #b3261e; } .req { font-weight: 600; }
.qmark { display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; background: #284162; color: #fff; font-weight: 700; font-size: 14px; }
table.forms td, table.forms th { background-clip: padding-box; }
table.forms td { background: #f5f5f5; }
table.forms th { background: #e8e8e8; }
table.forms td.status.locked { color: #a52019; font-size: 17px; }
.lock { display: inline-block; position: relative; width: 12px; height: 9px; background: #a52019; border-radius: 2px; margin-right: 10px; vertical-align: -1px; }
.lock::before { content: ""; position: absolute; left: 2px; top: -6px; width: 4px; height: 6px; border: 2px solid #a52019; border-bottom: 0; border-radius: 4px 4px 0 0; }
.fake-form-btn { background: #26344a; padding: 6px 14px; font-size: 14px; }
@media (max-width: 700px) { .panels { grid-template-columns: 1fr; } .signed { text-align: left; } }