/* Open Altio from 320 px up, mobile first (the agreed design, prototype/open-altio-look 400d2b8).

   The rules outside any media query are the phone's. 768, 1024 and 1440 add to them; where a wider
   screen wants design/next's own value back it says revert-layer, which hands the property back to
   the layered stylesheets (vendor/ and app.css). This file is unlayered and loaded last.

   Ruled 15-Oct: Administration and the SQL box work on phones; below 1024 the side panel is a drawer,
   and from 1024 it sits beside the page, folded by default until 1440; on phones lists become cards
   and number tables scroll inside their own frame. 44 px to press on touch screens, 40 px with a mouse.
   The page-by-page reasons are in ~/Documents/open-altio-responsive/inventory.md. */

/* ---- sizes: no text under 12 px; 44 px to press on a touch screen ---- */
:root { --text-pill: 12px; --text-chip: 12px; --text-tag: 12px; --text-xs: 12px; }
@media (pointer: coarse) {
  :root { --hit-target: 44px; }
  :is(.btn, .row, .menu-item, .product-tab, .tabs-line-tab, .oa-cat-pick, .oa-choice, .oa-filter-row, .oa-smq-scope, .oa-kind,
      .search-input, .field-input, select) { min-height: 44px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  /* the MedDRA version and upload button keep their small size in the name line; their press reaches 44 px */
  .oa-meddra-up { min-width: 0; min-height: 0; }
  :is(.oa-meddra-up, button.oa-meddra-chip) { position: relative; }
  .oa-meddra-up::after { content: ''; position: absolute; inset: -11px -1px; }
  button.oa-meddra-chip::after { content: ''; position: absolute; inset: -13px 0; }
  :is(.slide-switch-part, .view-switch-half, .oa-cut-input, .dashboard-sort, .signal-cases-sort, .oa-col, .tabs-line-tab) { min-height: 44px; }
  :is(.dashboard-sort, .signal-cases-sort, .oa-col, .tabs-line-tab) { min-width: 44px; }
  .oa-countline .oa-link { display: inline-flex; align-items: center; min-height: 44px; }
  .oa-download-list a { display: inline-flex; align-items: center; min-height: 44px; }
  :is(a.brand-home, .oa-back, .oa-links a) { display: inline-flex; align-items: center; min-height: 44px; }
  a.brand-home { min-width: 44px; }
  label.tick { min-height: 44px; align-items: center; }
  label.tick input { width: 20px; height: 20px; }
  /* a chart's bar is thin; its press reaches the whole column */
  .oa-col-bar { position: relative; }
  .oa-col-bar::after { content: ''; position: absolute; inset: -12px -6px; }
}

/* ---- the frame (phone): a top bar, and the side panel as a drawer over the page ---- */
.frame-page { padding: 0 var(--space-8) 96px; }
.oa-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 56px; margin: 0 calc(-1 * var(--space-8)) var(--space-8); padding: var(--space-3) var(--space-6);
  background: var(--page); border-bottom: var(--hairline) solid var(--line);
}
.oa-topbar .brand-home { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--ink); white-space: nowrap; }
/* the narrowest phones keep the mark; the name comes back from 400 px */
.oa-topbar .brand-name { display: none; }
@media (min-width: 400px) { .oa-topbar .brand-name { display: inline; } }
.oa-topbar .icon-btn :is(.icon, .icon svg) { width: 20px; height: 20px; }
.oa-improve-top { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 44px; justify-content: center; }
.oa-improve-top :is(.icon, .icon svg) { width: 16px; height: 16px; }
.oa-improve-top .oa-improve-words { display: none; }
.frame-page > .oa-improve, .frame-page > .side-rail { display: none; }
.side-panel {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
  width: min(300px, calc(100vw - 40px)); height: 100%; max-height: none; margin: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.oa-scrim { display: none; }
.frame[data-side-panel-state="open"] .oa-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: var(--scrim); }

/* ---- the filter menus (phone): one sheet, the list of filters first, then one filter with a Back step ---- */
.menu.oa-filter-menu:popover-open {
  inset: 0; width: 100vw; height: 100dvh; max-height: none; border-radius: 0; border: 0;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
}
.oa-sheet-bar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: var(--hairline) solid var(--line); }
.oa-sheet-title { flex: 1 1 auto; font-weight: var(--weight-strong); color: var(--ink); }
.oa-sheet-back { display: inline-flex; align-items: center; gap: var(--space-3); }
.oa-sheet-back :is(.icon, .icon svg) { width: 16px; height: 16px; }
.oa-filter-menu[data-pane="rows"] .oa-sheet-back { display: none; }
.oa-filter-menu[data-pane="options"] .oa-sheet-title { display: none; }
.oa-filter-menu[data-pane="rows"] .oa-filter-options, .oa-filter-menu[data-pane="options"] .oa-filter-rows { display: none; }
.oa-filter-menu .oa-filter-rows { border-right: 0; overflow-y: auto; }
.oa-filter-menu .oa-filter-row .filter-value { max-width: 55vw; }

/* ---- windows (phone): full-screen sheets; the body scrolls, the actions stay at the foot ---- */
dialog:is(.dialog, .oa-dialog, .oa-case-window) {
  width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0;
}
dialog .dialog-body { flex: 1 1 auto; padding: var(--space-8); }
dialog .dialog-head { padding: var(--space-4) var(--space-4) var(--space-4) var(--space-8); }

/* ---- lists read row by row (phone): cards, each cell under its column's name ---- */
table.oa-cardable { display: block; table-layout: auto; }
table.oa-cardable :is(colgroup, thead) { display: none; }
table.oa-cardable :is(tbody, tfoot) { display: block; }
table.oa-cardable :is(tbody, tfoot) tr { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-9); padding: var(--space-7) var(--space-7); border-bottom: var(--hairline) solid var(--line); }
table.oa-cardable :is(tbody, tfoot) :is(td, th) { display: block; flex: 1 1 100%; min-width: 0; padding: 0; border: 0; width: auto; max-width: none; text-align: left; white-space: normal; }
table.oa-cardable tbody :is(td, th)[data-label]:not(:first-child)::before {
  content: attr(data-label); display: block; margin-bottom: var(--space-1);
  color: var(--ink-faint); font-size: var(--text-xs); font-weight: var(--weight-regular); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
table.oa-cardable tbody :is(td, th):first-child { font-weight: var(--weight-medium); color: var(--ink); }
/* cases fit the width below 1440: fewer columns instead of a 980 px table */
table.oa-cases { min-width: 0; }
/* a case: its number, then received, age, sex and country side by side, then drugs, reactions, outcome */
table.oa-cases.oa-cardable tbody td:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5)) { flex: 0 0 auto; max-width: 100%; overflow: visible; text-overflow: clip; }
.oa-sort-phone { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-5); color: var(--ink-soft); font-size: var(--text-md); }
.oa-sort-phone select { flex: 1 1 auto; }

/* ---- number tables, at every width: they scroll inside their frame, the first column held ---- */
.dashboard-frame:has(> table:is(.oa-stats, .oa-sql-table)) { overflow-x: auto; }
table:is(.oa-stats, .oa-sql-table) :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
table.oa-stats { min-width: 600px; }
.oa-card-cols { overflow-x: auto; }
.oa-card-cols .oa-coltable { min-width: 560px; }

/* ---- grids and rows of controls (phone): one column, wrapping ---- */
:is(.oa-form-grid, .oa-tiles, .oa-charts, .oa-case-cols, .oa-cmq-cols, .oa-years-pick, .oa-workspace) { grid-template-columns: minmax(0, 1fr); }
:is(.oa-fields, .oa-card-facts) { grid-template-columns: minmax(0, 1fr); }
:is(.oa-fields, .oa-card-facts) dt:not(:first-child) { margin-top: var(--space-4); }
:is(.oa-toolbar, .oa-notes-bar, .oa-release-bar, .oa-release-acts, .oa-card-head, .oa-card-name, .oa-card-acts, .oa-card-cols-bar, .oa-pager, .oa-sql-foot, .oa-sql-head, .oa-title-row, .oa-cutoffs) { flex-wrap: wrap; }
/* the tabs may scroll sideways, so the page's column must never squeeze them to nothing; the extra pixel
   keeps the chosen tab's foot inside the strip, where it covers the panel's top line */
.product-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; position: relative; z-index: 1; padding-bottom: var(--hairline); margin-bottom: calc(-1 * var(--hairline)); }
.product-tabs .product-tab { flex: 0 0 auto; }
.oa-countline { flex: 1 1 100%; order: 3; margin: 0; }
/* on a phone Filters and Export are icons, so they sit in one row with the role switch */
.oa-toolbar :is(.oa-filters-btn, .oa-export-btn) .oa-btn-words { display: none; }
.oa-toolbar :is(.oa-filters-btn, .oa-export-btn) { min-width: 44px; justify-content: center; padding-inline: var(--space-5); }
.oa-toolbar .oa-export-btn { margin-left: auto; }
.oa-toolbar .oa-role { flex: 1 1 auto; min-width: 0; }
.oa-toolbar .oa-role .view-switch-half { padding-inline: var(--space-4); }
.oa-stat-find, .oa-audit-find, .oa-col-find { flex: 1 1 100%; }
.oa-cutoffs { justify-content: flex-start; gap: var(--space-4) var(--space-8); }
.oa-notes-bar .oa-note { max-width: none; flex: 1 1 100%; text-align: left; }
.oa-audit-view .oa-notes-bar .oa-spacer { display: none; }
.oa-audit-view .oa-notes-bar > .btn { flex: 1 1 0; justify-content: center; }
.oa-release .oa-release-bar { flex-direction: column; }
.oa-catalogue { position: static; max-height: 60vh; }
.signal-cases-window-foot { flex-wrap: wrap; gap: var(--space-4); }
.signal-cases-window-foot > :is(p, span):first-child { flex: 1 1 100%; }
.oa-sql-foot .btn-primary { margin-left: auto; }
.oa-sql-bar { flex-wrap: wrap; white-space: normal; row-gap: var(--space-3); }
.product-panel { --panel-pad-x: var(--space-6); --panel-pad-y: var(--space-6); }
.oa-setting-row { flex-direction: column; align-items: flex-start; }
/* a refusal of the zip's name takes two lines on a phone: its place is kept, so the password box never moves */
.oa-meddra-read { min-height: 3em; }
/* the years chart: every fifth year named on a phone; the number of a year shows on pressing it */
.oa-cols[data-grain="year"] .oa-col-slot:not(:nth-child(5n+1)) .oa-col-label { visibility: hidden; }

/* signed-out pages: the cards fill the width, less the gutters; Improve this as an icon */
.oa-improve > span:not(.icon) { display: none; }
.door > .oa-improve { top: var(--space-4); right: var(--space-4); }
.door-card { width: auto; max-width: 400px; margin: 0 var(--space-8); }

/* ======================================================================================== */
@media (min-width: 768px) {
  .frame-page { padding: 0 var(--space-11) 140px; }
  .oa-topbar { margin: 0 calc(-1 * var(--space-11)) var(--space-10); padding: var(--space-3) var(--space-10); }
  .oa-improve-top .oa-improve-words { display: inline; }
  .oa-improve-top { padding-inline: var(--space-7); }


  .menu.oa-filter-menu:popover-open {
    inset: revert-layer; width: revert-layer; height: revert-layer; max-height: calc(100vh - 32px); border-radius: revert-layer; border: revert-layer;
    grid-template-columns: revert-layer; grid-template-rows: revert-layer;
  }
  .oa-filter-menu .oa-sheet-bar { display: none; }
  .oa-filter-menu[data-pane] :is(.oa-filter-options, .oa-filter-rows) { display: revert-layer; }
  .oa-filter-menu .oa-filter-rows { border-right: revert-layer; overflow-y: revert-layer; }
  .oa-filter-menu .oa-filter-row .filter-value { max-width: revert-layer; }

  dialog:is(.dialog, .oa-dialog, .oa-case-window) {
    width: revert-layer; max-width: calc(100vw - 32px); height: revert-layer; max-height: calc(100dvh - 32px); margin: auto; border: revert-layer; border-radius: revert-layer;
  }
  dialog .dialog-body { flex: revert-layer; padding: revert-layer; }
  dialog .dialog-head { padding: revert-layer; }

  table.oa-cardable { display: revert-layer; table-layout: revert-layer; }
  table.oa-cardable :is(colgroup, thead, tbody, tfoot) { display: revert-layer; }
  table.oa-cardable :is(tbody, tfoot) tr { display: revert-layer; flex-wrap: revert-layer; gap: revert-layer; padding: revert-layer; border-bottom: revert-layer; }
  table.oa-cardable :is(tbody, tfoot) :is(td, th) { display: revert-layer; flex: revert-layer; min-width: revert-layer; padding: revert-layer; border: revert-layer; width: revert-layer; max-width: revert-layer; text-align: revert-layer; white-space: revert-layer; }
  table.oa-cardable tbody :is(td, th)[data-label]:not(:first-child)::before { content: none; }
  table.oa-cardable tbody :is(td, th):first-child { font-weight: revert-layer; color: revert-layer; }
  .oa-sort-phone { display: none; }
  /* a tablet's cases: country and outcome are in the case window */
  table.oa-cases :is(col, th, td):is(:nth-child(5), :nth-child(8)) { display: none; }

  :is(.oa-form-grid, .oa-tiles, .oa-charts, .oa-case-cols, .oa-cmq-cols, .oa-years-pick) { grid-template-columns: revert-layer; }
  :is(.oa-fields, .oa-card-facts) { grid-template-columns: revert-layer; }
  :is(.oa-fields, .oa-card-facts) dt:not(:first-child) { margin-top: revert-layer; }
  .oa-toolbar :is(.oa-filters-btn, .oa-export-btn) .oa-btn-words { display: revert-layer; }
  .oa-toolbar :is(.oa-filters-btn, .oa-export-btn) { min-width: revert-layer; justify-content: revert-layer; padding-inline: revert-layer; }
  .oa-toolbar .oa-role { flex: revert-layer; min-width: revert-layer; }
  .oa-toolbar .oa-role .view-switch-half { padding-inline: revert-layer; }
  .oa-audit-view .oa-notes-bar .oa-spacer { display: revert-layer; }
  .oa-audit-view .oa-notes-bar > .btn { flex: revert-layer; justify-content: revert-layer; }
  .oa-audit-find { flex: revert-layer; }
  .oa-col-find { flex: revert-layer; }
  .oa-notes-bar .oa-note { max-width: revert-layer; flex: revert-layer; text-align: revert-layer; }
  .signal-cases-window-foot { flex-wrap: revert-layer; }
  .signal-cases-window-foot > :is(p, span):first-child { flex: revert-layer; }
  .product-panel { --panel-pad-x: revert-layer; --panel-pad-y: revert-layer; }
  .oa-setting-row { flex-direction: revert-layer; align-items: revert-layer; }
  .oa-meddra-read { min-height: revert-layer; }
  .oa-cols[data-grain="year"] .oa-col-slot:not(:nth-child(5n+1)) .oa-col-label { visibility: revert-layer; }
  .oa-improve > span:not(.icon) { display: revert-layer; }
  .door > .oa-improve { top: revert-layer; right: revert-layer; }
  .door-card { width: revert-layer; max-width: revert-layer; margin: revert-layer; }
}

/* ======================================================================================== */
@media (min-width: 1024px) {
  .frame-page { padding: revert-layer; }
  .oa-topbar { display: none; }
  .frame-page > .oa-improve, .frame-page > .side-rail { display: revert-layer; }
  .side-panel { position: revert-layer; top: revert-layer; left: revert-layer; bottom: revert-layer; z-index: revert-layer; width: revert-layer; height: revert-layer; max-height: revert-layer; margin: revert-layer; border-radius: revert-layer; }
  .frame[data-side-panel-state] .oa-scrim { display: none; }
  /* the folded rail: the open panel's places at the open panel's heights (the measures are in app.css,
     .frame); the room under Sign out is the release line's, so the foot's icons line up too */
  .frame[data-side-panel-state="closed"] .oa-rail {
    position: fixed; top: var(--side-edge); left: var(--side-edge); bottom: var(--side-edge); z-index: 20;
    flex-direction: column; align-items: center; gap: var(--side-gap);
    width: calc(2 * (var(--hairline) + var(--side-pad) + var(--row-pad-x)) + var(--side-icon));
    margin: 0; padding: var(--side-pad) 0 calc(var(--side-pad) + var(--side-gap) + var(--side-foot));
    overflow: hidden auto; scrollbar-width: none;
    background: var(--panel); border: var(--hairline) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  }
  .oa-rail-item {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: var(--side-row); height: var(--side-row); border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-soft); cursor: pointer;
  }
  .oa-rail-item:hover { background: var(--mist); color: var(--ink); }
  .oa-rail-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-deep); }
  .oa-rail-item :is(.icon, .icon svg) { width: var(--side-icon); height: var(--side-icon); }
  .oa-rail-line { flex: none; width: 28px; height: var(--hairline); margin: var(--side-line) 0; background: var(--line); }
  .oa-rail .oa-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; font-size: var(--text-xs); }
  .oa-rail-menu { min-width: 220px; }
  .oa-sql-bar { flex-wrap: revert-layer; white-space: revert-layer; }

  table.oa-cases :is(col, th, td):nth-child(8) { display: revert-layer; }

  .oa-release .oa-release-bar { flex-direction: revert-layer; }
  :is(.oa-notes-bar, .oa-release-bar, .oa-release-acts, .oa-card-acts, .oa-card-cols-bar, .oa-pager, .oa-sql-foot, .oa-sql-head, .oa-title-row) { flex-wrap: revert-layer; }
}

/* ======================================================================================== */
@media (min-width: 1440px) {
  table.oa-cases :is(col, th, td):nth-child(5) { display: revert-layer; }
  table.oa-cases { min-width: revert-layer; }
  .oa-stat-find { flex: revert-layer; }
  .oa-cutoffs { justify-content: revert-layer; gap: revert-layer; }
  :is(.oa-toolbar, .oa-cutoffs, .oa-card-head, .oa-card-name) { flex-wrap: revert-layer; }
  .oa-countline { flex: revert-layer; order: revert-layer; margin: revert-layer; min-width: 0; }
  .oa-toolbar .oa-export-btn { margin-left: revert-layer; }

}

/* ---- the release page: two columns once the page itself is wide enough, whatever the side panel does ---- */
.oa-release { container-type: inline-size; }
@container (min-width: 860px) {
  .oa-workspace { grid-template-columns: 304px minmax(0, 1fr); }
  .oa-catalogue { position: revert-layer; max-height: revert-layer; }
  .oa-cat-cols, .oa-cat-pick { grid-template-columns: minmax(0, 1fr) 84px; }
  .oa-card-cols .oa-coltable { min-width: 0; }
}
@container (min-width: 1120px) {
  .oa-workspace { grid-template-columns: revert-layer; }
  .oa-cat-cols, .oa-cat-pick { grid-template-columns: revert-layer; }
}
/* on a phone a long table name wraps rather than being cut */
.oa-cat-pick code { white-space: normal; overflow-wrap: anywhere; }
@container (min-width: 860px) { .oa-cat-pick code { white-space: revert-layer; overflow-wrap: revert-layer; } }

/* How it works below 1024: the dropdown picks the process; the list beside it comes back at 1024 */
.oa-how { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.oa-howpick { display: flex; flex-direction: column; gap: var(--space-2); }
.oa-howlist { display: none; }
.oa-outcomes { grid-template-columns: minmax(0, 1fr); }
.oa-howstep { gap: var(--space-5); }
/* on touch screens the link to a process's steps is a full-size target */
@media (pointer: coarse) { .oa-mailgroup-open { min-height: 44px; } }
.oa-how-link { display: none; }
.oa-how-line { display: inline-flex; align-items: center; gap: var(--space-3); align-self: flex-end; min-height: 44px; margin: var(--space-2) 0; color: var(--accent); font-size: var(--text-md); text-decoration: none; }
.oa-how-line :is(.icon, .icon svg) { width: 15px; height: 15px; }
@media (min-width: 768px) {
  .oa-outcomes { grid-template-columns: revert-layer; }
  .oa-howstep { gap: revert-layer; }
  .oa-how-link { display: revert-layer; }
  .oa-how-line { display: none; }
}
@media (min-width: 1024px) {
  .oa-how { grid-template-columns: revert-layer; gap: revert-layer; }
  .oa-howpick { display: none; }
  .oa-howlist { display: revert-layer; }
}

/* To decide on a phone: the decision goes under the words, the buttons sharing the width */
.oa-decide-item { flex-direction: column; align-items: stretch; gap: var(--space-5); }
.oa-decide-acts > :is(.btn, a.btn) { flex: 1 1 0; justify-content: center; }
@media (min-width: 768px) {
  .oa-decide-item { flex-direction: revert-layer; align-items: revert-layer; gap: revert-layer; }
  .oa-decide-acts > :is(.btn, a.btn) { flex: revert-layer; justify-content: revert-layer; }
}

/* the page's column never squeezes its title, subtitle or tabs: only the panel takes what is left */
.product-page > :not(.product-panel) { flex-shrink: 0; }
/* on a phone the role switch, Filters and Export share one row */
.oa-toolbar { gap: var(--space-4); }
.oa-toolbar .oa-role .view-switch-half { padding-inline: var(--space-3); white-space: nowrap; }
/* the switch starts from nothing and takes the room the two icons leave */
.oa-toolbar .oa-role { flex: 1 1 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oa-toolbar .oa-role .view-switch-half { font-size: var(--text-sm); padding-inline: var(--space-2); overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) {
  .oa-toolbar { gap: revert-layer; }
  .oa-toolbar .oa-role { flex: revert-layer; grid-template-columns: revert-layer; }
  .oa-toolbar .oa-role .view-switch-half { font-size: revert-layer; padding-inline: revert-layer; overflow: revert-layer; text-overflow: revert-layer; }
}

/* Emails to Altio on a phone: the words, the button, then who gets it, so the button never moves */
.oa-mail-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); }
.oa-mail-row > .btn { grid-column: 1; grid-row: auto; justify-self: start; }
@media (min-width: 768px) {
  .oa-mail-row { grid-template-columns: revert-layer; row-gap: revert-layer; }
  .oa-mail-row > .btn { grid-column: revert-layer; grid-row: revert-layer; justify-self: revert-layer; }
}

/* View as (#66): the banner sits at the foot of a phone, its width less the gutters, saying only whose
   view it is; from 768 it says more, in the bottom right corner, clear of the side panel and the rail.
   Pages keep room under them so it never hides their last line. */
.oa-viewing { left: var(--space-8); right: var(--space-8); bottom: var(--space-8); }
.oa-viewing > .icon, .oa-viewing-more { display: none; }
body[data-viewing] .door { padding-bottom: 112px; }
body[data-viewing] .oa-apply { padding-bottom: 120px; }
@media (min-width: 768px) {
  .oa-viewing { left: auto; right: var(--space-10); bottom: var(--space-10); max-width: 520px; }
  .oa-viewing > .icon, .oa-viewing-more { display: revert-layer; }
  body[data-viewing] .door { padding-bottom: revert-layer; }
}
@media (min-width: 1024px) {
  body[data-viewing] .frame-page { padding-bottom: 120px; }
}