/* permafrostdemo.sevrak.com: the look-alike host around Permafrost (Absolute eaRth, the same frame as the Relay
   preview), the preview controls, the tour, and the host's own document list and viewer. Permafrost's own pages
   are its real interface and carry their own styles; nothing here reaches into them. */

@font-face { font-family: 'Manrope Variable'; font-style: normal; font-display: swap; font-weight: 200 800; src: url('/app/assets/manrope-latin-wght-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'Familjen Grotesk Variable'; font-style: normal; font-display: swap; font-weight: 400 700; src: url('/app/assets/familjen-grotesk-latin-wght-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800; src: url('/app/assets/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations'); }

:root {
	/* Aero host chrome, as in the Relay preview's look-alike frame. Not Permafrost tokens. */
	--aero-rail: #D0D9E7; --aero-head: #E8EDF4; --aero-launch: #EF5F11; --aero-line: #BFCADB; --aero-ink: #1F2A37; --aero-muted: #5A6778;
	--aero-row: #F5F7FB; --aero-sel: #E3EBF7; --aero-link: #1C5FA8;
	/* The preview's own controls: dark ink with an offset shadow, so they read as the preview's and not the product's. */
	--grey-0: #FFFFFF; --grey-100: #F2F2F2; --grey-200: #E4E4E4; --grey-300: #C4C4C4; --grey-400: #A4A4A4; --grey-600: #676767; --grey-800: #404040; --grey-950: #191919;
	/* Permafrost's glacial cyan leads the tour and the switch. */
	--primary: #226a87; --primary-hover: #1c566f; --on-primary: #FFFFFF; --focus-ring: #226a87;
	--ink-strong: #16242b; --ink-muted: #51636d;
	--x-ui: 'Manrope Variable', 'Segoe UI', Roboto, Arial, sans-serif;
	--x-display: 'Familjen Grotesk Variable', 'Segoe UI', Roboto, Arial, sans-serif;
	--x-data: 'JetBrains Mono Variable', Consolas, 'Courier New', monospace;
	--x-host: system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
	--x-dur: 160ms; --x-ease: cubic-bezier(0.2, 0, 0, 1);
}

html, body { margin: 0; height: 100%; }
body { background: #fff; color: var(--aero-ink); font: 13px/1.4 var(--x-host); -webkit-font-smoothing: antialiased; }
#app { height: 100%; display: flex; flex-direction: column; }
.ic { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- the frame */
.host { flex: 1; min-height: 0; display: grid; grid-template: 44px 1fr / 52px 1fr; }
.host-rail { grid-row: 1 / 3; background: var(--aero-rail); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0; border-right: 1px solid var(--aero-line); }
.host-launch { width: 32px; height: 32px; display: grid; place-items: center; background: var(--aero-launch); color: #fff; border-radius: 3px; margin-bottom: 8px; }
.host-launch .ic { width: 20px; height: 20px; }
.host-tile { width: 36px; height: 36px; display: grid; place-items: center; color: var(--aero-muted); border-radius: 3px; border: 0; background: none; padding: 0; }
.host-tile .ic { width: 18px; height: 18px; stroke-linecap: round; stroke-linejoin: round; }
button.host-tile { cursor: pointer; }
button.host-tile:hover { background: rgba(255, 255, 255, .55); color: var(--aero-ink); }
button.host-tile:focus-visible { outline: 2px solid var(--aero-launch); outline-offset: 1px; }
.host-tile.is-current { background: #fff; box-shadow: inset 3px 0 0 var(--aero-launch); color: var(--aero-ink); }
.host-head { background: var(--aero-head); display: flex; align-items: center; gap: 14px; padding: 0 16px; padding-right: 480px; min-width: 0; border-bottom: 1px solid var(--aero-line); font: 13px/1 var(--x-host); color: var(--aero-ink); }
.host-brand { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; font: 600 14px/1 var(--x-host); color: var(--aero-ink); }
.host-tag { font-weight: 700; color: var(--aero-launch); letter-spacing: .01em; }
.host-crumbs { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; padding: 4px 0 4px 14px; border-left: 1px solid var(--aero-line); line-height: 1.4; }
.host-crumb, .host-sep { white-space: nowrap; }
.host-crumb.is-app { font-weight: 600; }
.host-sep { color: var(--aero-muted); }
.host-search { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: 0 100 240px; min-width: 0; overflow: hidden; height: 28px; padding: 0 10px; background: #fff; border: 1px solid var(--aero-line); border-radius: 3px; color: var(--aero-muted); }
.host-user { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--aero-line); font-size: 11px; font-weight: 600; flex: none; }
.host-level, .host-views { display: inline-flex; border: 1px solid var(--aero-line); border-radius: 3px; overflow: hidden; background: #fff; flex: none; }
.host-level button, .host-views button { border: 0; background: #fff; padding: 5px 12px; font: 600 12px/1.2 var(--x-host); color: var(--aero-muted); min-height: 28px; cursor: pointer; }
.host-level button + button, .host-views button + button { border-left: 1px solid var(--aero-line); }
.host-level button[aria-pressed="true"], .host-views button[aria-pressed="true"] { background: var(--aero-ink); color: #fff; }
.host-level button:focus-visible, .host-views button:focus-visible { outline: 2px solid var(--aero-launch); outline-offset: -2px; }
/* The rail's Permafrost and Documents tiles, as tabs in the head for widths where the rail is hidden. */
.host-views { display: none; }
.host-content { position: relative; min-height: 0; min-width: 0; }
.host-content > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #eef3f5; }
.host-content > iframe[hidden] { display: none; }

html[data-frame="off"] .host { grid-template: 1fr / 1fr; }
html[data-frame="off"] .host-rail, html[data-frame="off"] .host-head { display: none; }
html[data-frame="off"] .host-content { grid-row: 1 / -1; grid-column: 1 / -1; }
html[data-capture] .host-head { padding-right: 16px; }

/* ---------------------------------------------------------------- preview controls */
.preview-ctl { position: fixed; top: 8px; right: 10px; z-index: 70; display: flex; align-items: stretch; gap: 8px; }
.frame-switch { display: flex; align-items: center; padding: 3px 10px 3px 8px; background: var(--grey-950); color: var(--grey-0); box-shadow: 3px 3px 0 var(--grey-600); }
.tgl { position: relative; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; min-height: 22px; }
.tgl input { position: absolute; left: 0; top: 1px; width: 36px; height: 20px; margin: 0; opacity: 0; cursor: pointer; }
.tgl i { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--grey-800); box-shadow: inset 0 0 0 1.5px var(--grey-400); flex: none; transition: background var(--x-dur); }
.tgl i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--grey-300); transition: transform var(--x-dur) var(--x-ease); }
.tgl input:checked + i { background: #2f86a8; box-shadow: none; }
.tgl input:checked + i::after { background: var(--grey-0); transform: translateX(16px); }
.tgl input:focus-visible + i { outline: 2px solid var(--grey-0); outline-offset: 2px; }
.fs-l { font: 600 11px/1 var(--x-data); letter-spacing: .06em; text-transform: uppercase; color: var(--grey-0); }
.tgl-l { font: 600 11px/1 var(--x-data); text-transform: uppercase; letter-spacing: .04em; color: var(--grey-300); min-width: 2.2em; }
.tgl-l::before { content: "Off"; }
.tgl input:checked ~ .tgl-l { color: var(--grey-0); }
.tgl input:checked ~ .tgl-l::before { content: "On"; }
.demo-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 12px 3px 10px; border: 0; background: var(--grey-950); color: var(--grey-0); box-shadow: 3px 3px 0 var(--grey-600); font: 600 11px/1 var(--x-data); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; text-decoration: none; white-space: nowrap; }
.demo-btn .ic { width: 12px; height: 12px; }
.demo-btn:hover { background: var(--grey-800); }
.demo-btn:focus-visible { outline: 2px solid var(--grey-0); outline-offset: 2px; }
.demo-btn--cta { background: #2f86a8; box-shadow: 3px 3px 0 var(--grey-950); }
.demo-btn--cta:hover { background: #226a87; }
html[data-capture] .preview-ctl { display: none; }

/* ---------------------------------------------------------------- the tour */
.tour { position: fixed; inset: 0; z-index: 200; }
.tour-spot { position: fixed; border-radius: 4px; box-shadow: 0 0 0 200vmax rgba(12, 14, 18, .62); outline: 2px solid #2f86a8; pointer-events: none; transition: top .35s var(--x-ease), left .35s var(--x-ease), width .35s var(--x-ease), height .35s var(--x-ease); }
.tour-spot.is-none { outline: 0; }
.tour-card { position: fixed; box-sizing: border-box; width: min(380px, calc(100vw - 24px)); padding: 16px 18px 14px; background: var(--grey-0); color: var(--ink-strong); border: 1px solid var(--grey-950); box-shadow: 4px 4px 0 var(--grey-600); }
.tour-card::before { content: ""; position: absolute; width: 12px; height: 12px; background: var(--grey-0); border: 1px solid var(--grey-950); transform: rotate(45deg); }
.tour-card[data-side="bottom"]::before { top: -7px; left: calc(var(--ax) - 6px); border-right: 0; border-bottom: 0; }
.tour-card[data-side="top"]::before { bottom: -7px; left: calc(var(--ax) - 6px); border-left: 0; border-top: 0; }
.tour-card[data-side="right"]::before { left: -7px; top: calc(var(--ay) - 6px); border-top: 0; border-right: 0; }
.tour-card[data-side="left"]::before { right: -7px; top: calc(var(--ay) - 6px); border-bottom: 0; border-left: 0; }
.tour-card[data-side="none"]::before, .tour-card[data-side="over"]::before { display: none; }
.tour-count { margin: 0 0 6px; font: 600 11px/1 var(--x-data); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.tour-h { margin: 0 36px 8px 0; font: 700 20px/1.25 var(--x-display); letter-spacing: -.01em; color: var(--ink-strong); }
.tour-h:focus { outline: none; }
.tour-body { margin: 0; font: 400 15px/1.55 var(--x-ui); color: var(--ink-strong); }
.tour-link { margin: 12px 0 0; font: 700 15px/1.4 var(--x-ui); }
.tour-link a { color: var(--primary); text-underline-offset: 3px; }
.tour-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 3px; border: 1px solid transparent; font: 700 14px/1 var(--x-ui); white-space: nowrap; cursor: pointer; }
.btn-quiet { background: transparent; border-color: var(--grey-300); color: var(--ink-strong); }
.btn-quiet:hover { background: var(--grey-100); }
.tour-next { background: var(--primary); color: var(--on-primary); }
.tour-next:hover { background: var(--primary-hover); }
.tour-nav .btn:disabled { opacity: .45; cursor: default; }
.tour-nav .btn:focus-visible, .tour-link a:focus-visible, .tour-x:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tour-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--ink-muted); cursor: pointer; }
.tour-x:hover { color: var(--ink-strong); }

/* ---------------------------------------------------------------- the host's document list */
.lists { height: 100%; display: flex; flex-direction: column; background: #fff; font: 13px/1.4 var(--x-host); color: var(--aero-ink); }
.lists-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px; border-bottom: 1px solid var(--aero-line); background: #fff; }
.lists-title { margin: 0; font: 600 16px/1.2 var(--x-host); }
.lists-bar label { display: inline-flex; align-items: center; gap: 8px; color: var(--aero-muted); }
.lists-bar select, .ae-select { height: 30px; padding: 0 8px; border: 1px solid var(--aero-line); border-radius: 3px; background: #fff; color: var(--aero-ink); font: 13px var(--x-host); }
.lists-count { color: var(--aero-muted); font-variant-numeric: tabular-nums; }
.lists-spacer { flex: 1; }
.ae-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--aero-line); border-radius: 3px; background: #fff; color: var(--aero-ink); font: 600 13px var(--x-host); cursor: pointer; }
.ae-btn:hover { background: var(--aero-row); }
.ae-btn:disabled { color: #9aa6b5; cursor: default; background: #fff; }
.ae-btn:focus-visible, .lists select:focus-visible, .lists input:focus-visible, .ae-link:focus-visible { outline: 2px solid var(--aero-launch); outline-offset: 1px; }
.ae-btn--primary { background: var(--aero-ink); color: #fff; border-color: var(--aero-ink); }
.ae-btn--primary:hover { background: #33404f; }
.mass { position: relative; }
.mass-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px; margin: 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid var(--aero-line); border-radius: 3px; box-shadow: 0 6px 18px rgba(20, 30, 45, .16); }
.mass-menu button { display: block; width: 100%; padding: 8px 14px; border: 0; background: none; text-align: left; font: 13px var(--x-host); cursor: pointer; }
.mass-menu button:hover, .mass-menu button:focus-visible { background: var(--aero-sel); outline: none; }
.mass-menu button:disabled { color: #9aa6b5; cursor: default; background: none; }
.mass-menu .is-pf { font-weight: 600; }
.mass-menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--aero-line); }
.mass-menu.is-left { left: 0; right: auto; }
.lists-table-wrap { flex: 1; min-height: 0; overflow: auto; }
.lists table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lists th, .lists td { padding: 7px 12px; border-bottom: 1px solid #e3e8f0; text-align: left; white-space: nowrap; }
.lists th { position: sticky; top: 0; z-index: 1; background: var(--aero-head); font-weight: 600; color: var(--aero-muted); border-bottom: 1px solid var(--aero-line); }
.lists tbody tr:nth-child(even) { background: var(--aero-row); }
.lists tbody tr.is-sel { background: var(--aero-sel); }
.lists td.num, .lists th.num { text-align: right; }
.lists td.file { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.lists .chk { width: 28px; }
.lists input[type="checkbox"] { width: 16px; height: 16px; margin: 0; vertical-align: -3px; accent-color: var(--aero-ink); }
.ae-link { padding: 0; border: 0; background: none; color: var(--aero-link); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.frz { display: inline-flex; align-items: center; gap: 6px; }
.frz-yes { color: #1c566f; font-weight: 600; }
.frz-moving { font: 600 10px/1 var(--x-host); letter-spacing: .04em; text-transform: uppercase; color: var(--aero-muted); padding: 2px 5px; border: 1px solid var(--aero-line); border-radius: 2px; background: #fff; }
.lists-foot { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--aero-line); background: var(--aero-head); color: var(--aero-muted); }

/* The mass-operation dialog, as the platform hosts a custom page in it. */
ux-dialog-container { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
ux-dialog-overlay { position: fixed; inset: 0; z-index: 49; background: rgba(20, 28, 40, .45); }
.ae-dialog { position: relative; z-index: 51; display: flex; flex-direction: column; width: min(760px, 100%); max-height: calc(100vh - 32px); background: #fff; border: 1px solid var(--aero-line); border-radius: 4px; box-shadow: 0 18px 50px rgba(15, 23, 35, .3); overflow: hidden; }
.ae-dialog-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--aero-line); background: var(--aero-head); font-weight: 600; }
.ae-dialog-head .lists-spacer { flex: 1; }
.ae-dialog-body { position: relative; min-height: 260px; height: 560px; max-height: calc(100vh - 90px); }
.ae-dialog-body iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------- the host's viewer */
.viewer { position: fixed; inset: 0; z-index: 30; display: grid; grid-template: auto 1fr / 1fr 300px; background: #5f6b79; }
.viewer-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; background: var(--aero-head); border-bottom: 1px solid var(--aero-line); }
.viewer-bar .ctrl { font: 600 14px var(--x-host); }
.viewer-bar .file { color: var(--aero-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36vw; }
.viewer-tools { display: inline-flex; gap: 6px; padding-left: 12px; border-left: 1px solid var(--aero-line); }
.viewer-doc { min-width: 0; min-height: 0; overflow: auto; padding: 24px; display: grid; justify-items: center; align-content: start; }
.page { box-sizing: border-box; width: min(612px, 100%); aspect-ratio: 612 / 792; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .3); padding: 9% 11.8%; font-family: Helvetica, Arial, sans-serif; color: #000; }
.ph-brand { font-weight: 700; font-size: clamp(12px, 2.6vw, 16px); color: #af8c56; }
.ph-rule { height: 2px; margin: 4px 0 22px; background: #af8c56; }
.ph-h { margin: 0 0 22px; font-weight: 700; font-size: clamp(15px, 3.1vw, 19px); }
.ph-sub { margin: 0 0 12px; font-weight: 700; font-size: clamp(12px, 2.2vw, 13px); }
.ph-p { margin: 0 0 14px; font-size: clamp(11px, 2vw, 12px); line-height: 1.35; color: #404040; }
.ph-p b { text-decoration: underline; }
.ph-small { margin-top: 30px; font-size: clamp(10px, 1.8vw, 11px); line-height: 1.4; color: #737373; }
.native-page .ln { height: 9px; margin: 0 0 12px; background: #e4e7ec; border-radius: 1px; }
.native-page .ln.h { height: 14px; width: 55%; margin-bottom: 22px; background: #cfd5de; }
.native-page .ln.s { width: 72%; }
.native-media { width: min(760px, 100%); aspect-ratio: 16 / 9; background: #1b222b; display: grid; place-items: center; color: #b7c1cd; font: 13px var(--x-host); box-shadow: 0 4px 18px rgba(0, 0, 0, .3); }
.viewer-side { background: #fff; border-left: 1px solid var(--aero-line); overflow: auto; }
.side-sec { padding: 14px 16px; border-bottom: 1px solid #e3e8f0; }
.side-sec h3 { margin: 0 0 10px; font: 600 12px/1 var(--x-host); letter-spacing: .04em; text-transform: uppercase; color: var(--aero-muted); }
.side-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.side-row span:first-child { color: var(--aero-muted); }
.side-choices label { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.viewer-note { margin: 10px 0 0; color: var(--aero-muted); }
.toast { position: fixed; left: 50%; bottom: 18px; z-index: 60; transform: translateX(-50%); max-width: min(520px, calc(100vw - 24px)); padding: 10px 14px; background: var(--grey-950); color: #fff; box-shadow: 3px 3px 0 var(--grey-600); font: 13px/1.4 var(--x-ui); }

@media (max-width: 1060px) {
	.host-search { display: none; }
	.demo-btn--cta { display: none; }
	.host-head { padding-right: 260px; }
}
@media (max-width: 860px) {
	.host { grid-template-columns: 0 1fr; }
	.host-rail { visibility: hidden; }
	.host-crumbs, .host-user { display: none; }
	.host-views { display: inline-flex; }
	.host-head { gap: 10px; padding-right: 230px; }
	.preview-ctl { right: 6px; gap: 6px; }
	.viewer { grid-template: auto 1fr auto / 1fr; }
	.viewer-side { border-left: 0; border-top: 1px solid var(--aero-line); max-height: 38vh; }
	.lists .col-cust, .lists .col-type { display: none; }
}
/* Narrow screens: the preview controls get a strip of their own above the page, so they never sit on the
   host's head or, with the frame off, on Permafrost's own. */
@media (max-width: 760px) {
	#app { box-sizing: border-box; padding-top: 40px; }
	.preview-ctl { top: 0; left: 0; right: 0; height: 40px; box-sizing: border-box; align-items: center; justify-content: flex-end; padding: 0 10px 2px; background: #fff; border-bottom: 1px solid var(--aero-line); }
	html[data-capture] #app { padding-top: 0; }
	.host { grid-template-rows: auto 1fr; }
	.host-head { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; }
}
@media (max-width: 640px) {
	.tgl-l { display: none; }
	.demo-btn { padding: 3px 9px 3px 8px; }
	.lists .col-file { display: none; }
	.viewer-bar .file { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tour-spot, .tgl i, .tgl i::after { transition: none; }
}