/* The trigger stays in the footer; the popover clears clipped paper and frames. */
.view-picker {
  --view-paper: var(--surface, #fff);
  --view-ink: var(--ink, #000);
  --view-rule: var(--rule, #a8a8a8);
  --view-active-paper: var(--view-ink);
  --view-active-ink: var(--view-paper);
  position: relative; display: inline-flex; align-self: center; flex: none;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap;
}
.view-toggle {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
.view-toggle:is(:hover, [aria-expanded="true"]) { text-decoration: underline; text-underline-offset: 3px; }
.view-toggle:focus-visible { outline: 1px dotted currentColor; outline-offset: 3px; }
.view-picker .view-options {
  position: fixed; inset: auto; margin: 0; padding: 5px;
  width: max-content; min-width: 210px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto;
  border: 1px solid var(--view-rule); border-radius: 0;
  background: var(--view-paper); color: var(--view-ink);
  font: 500 12px/1.5 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .03em; text-transform: none; text-align: left; white-space: nowrap;
}
.view-options:popover-open { display: flex; flex-direction: column; }
.view-picker .view-option {
  display: flex; align-items: center; gap: 10px; flex: none; width: 100%; min-height: 36px;
  margin: 0; padding: 7px 12px; border: 0; border-radius: 0;
  background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left;
  cursor: pointer;
}
.view-icon { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; }
.view-icon svg { display: block; width: 20px; height: 20px; }
.view-icon-line { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.view-icon-pixels, .view-icon-characters { display: none; }
.view-option-label { flex: 1; }
/* The receipt prints the views on its paper instead (receipt.css). */
.view-coupon { display: none; }
.view-option::after {
  content: ""; flex: none; width: 5px; height: 9px; margin: 0 3px 3px 5px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); visibility: hidden;
}
.view-option[aria-checked="true"]::after { visibility: visible; }
.view-picker .view-option:is(:hover, :focus-visible) { background: var(--view-active-paper); color: var(--view-active-ink); outline: none; }
.document-page footer nav > .view-picker { padding-block: 8px; color: var(--ink-secondary); font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: 12px; line-height: inherit; letter-spacing: 0.13em; text-transform: uppercase; }
.taskbar > .view-picker { padding: 5px 4px; }
html[data-view="terminal"] .view-picker, body[data-view="terminal"] .view-picker { text-transform: lowercase; }
html[data-view="terminal"] .document-page .view-picker { color: inherit; font: inherit; font-size: 13px; letter-spacing: 0; text-transform: lowercase; }
html[data-view="sky"] .document-page footer nav > .view-picker { align-self: flex-end; padding: 0; font: 400 8px/1.5 "IBM Plex Mono", ui-monospace, monospace; }
body[data-view="sky"] .bottom-line > .view-picker { align-self: flex-end; }
html[data-view="front-page"] .document-page footer nav > .view-picker { font: 500 12px/1.4 "Archivo", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.06em; }

:is(html[data-view="sky"] .document-page, body[data-view="sky"]) .view-picker {
  --view-paper: #040406; --view-ink: #f2f2ee; --view-rule: #ffffff2b;
}
:is(html[data-view="sky"] .document-page, body[data-view="sky"]) .view-toggle { padding: 6px 0 6px 12px; }
:is(html[data-view="sky"] .document-page, body[data-view="sky"]) .view-options {
  font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
}
:is(html[data-view="sky"] .document-page, body[data-view="sky"]) .view-icon-line { stroke-width: .9; }
:is(html[data-view="front-page"] .document-page, body[data-view="front-page"]) .view-options {
  padding: 4px; border-top: 3px double var(--view-ink);
  font: 500 12px/1.4 "Archivo", "Helvetica Neue", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase;
}
:is(html[data-view="front-page"] .document-page, body[data-view="front-page"]) .view-icon-line { stroke-width: 1.4; stroke-linejoin: miter; }
:is(html[data-view="terminal"] .document-page, body[data-view="terminal"]) .view-picker {
  --view-paper: #0c0c0c; --view-ink: #d4d4d4; --view-rule: #0dbc79;
  --view-active-paper: #0dbc79; --view-active-ink: #0c0c0c;
}
:is(html[data-view="terminal"] .document-page, body[data-view="terminal"]) .view-options {
  padding: 4px; font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0; text-transform: lowercase;
}
:is(html[data-view="terminal"] .document-page, body[data-view="terminal"]) .view-icon { width: 3ch; }
:is(html[data-view="terminal"] .document-page, body[data-view="terminal"]) .view-icon svg { display: none; }
:is(html[data-view="terminal"] .document-page, body[data-view="terminal"]) .view-icon-characters { display: inline; font: inherit; letter-spacing: 0; }
:is(html[data-view="solar-system"] .document-page, body[data-view="solar-system"]) .view-icon-line { display: none; }
:is(html[data-view="solar-system"] .document-page, body[data-view="solar-system"]) .view-icon-pixels { display: block; fill: currentColor; shape-rendering: crispEdges; }
:is(html[data-view="solar-system"] .document-page, body[data-view="solar-system"]) .view-picker {
  --view-paper: #06060a; --view-ink: #f2f2ee; --view-rule: #4c4c60;
  font-family: "Departure Mono", "Courier New", monospace; font-weight: 400; font-size: 11px; letter-spacing: 1px;
  --view-active-paper: #ff47b6; --view-active-ink: #06060a;
}
:is(html[data-view="solar-system"] .document-page, body[data-view="solar-system"]) .view-options {
  font: 16.5px/1.3 "Departure Mono", "Courier New", monospace; letter-spacing: 0;
}
.taskbar .view-options {
  padding: 3px; border: 0;
  box-shadow: inset -1px -1px var(--bevel-dark), inset 1px 1px var(--bevel-light), inset -2px -2px var(--bevel-shadow), inset 2px 2px var(--bevel-hi);
  font: 16px/1.25 "Pixelify Sans", "Courier New", monospace; letter-spacing: 0;
}
@media (pointer: coarse) {
  .view-picker .view-option { min-height: 44px; }
  :is(html[data-view="sky"] .document-page, body[data-view="sky"]) .view-toggle { min-height: 32px; }
}
@media (forced-colors: active) {
  .view-picker .view-option:is(:hover, :focus-visible) { outline: 1px solid Highlight; outline-offset: -2px; }
}