/* Open Altio from 320 px up, mobile first. SPDX-License-Identifier: Apache-2.0

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

   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, the SQL results among them, scroll
   inside their own frame. 44 px to press on touch screens, 40 px with a mouse. */

/* ---- sizes: no text under 12 px; 44 px to press on a touch screen ---- */
:root { --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; }
  /* a choice's words stay at the middle of its 44 px, its count on their first line */
  .oa-choice { padding-block: calc((44px - 1lh) / 2); }
  :is(.slide-switch-part, .view-switch-half, .sort-head, .oa-col, .tabs-line-tab) { min-height: 44px; }
  :is(.sort-head, .oa-col, .tabs-line-tab) { min-width: 44px; }
  .oa-countline .oa-link, .oa-dup-tick { 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-links a) { display: inline-flex; align-items: center; min-height: 44px; }
  a.brand-home { min-width: 44px; }
  :is(.oa-strip-edit, .oa-clear, .oa-title-spellings) { display: inline-flex; align-items: center; min-height: 44px; }
  /* 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; }
}
/* iOS zooms into a text box under 16 px as it takes focus: on a phone or a touch screen none is */
@media (max-width: 767px), (pointer: coarse) {
  :is(input:not([type="checkbox"], [type="radio"]), textarea, select) { font-size: 16px; }
}
/* nothing hovers on a touch screen: a pinned product's options and a card's pin are always there */
@media (hover: none) {
  .side-panel .chat-row .chat-dots { width: auto; padding-right: var(--space-2); overflow: visible; opacity: 1; }
  .oa-tile-slot > .oa-pin { opacity: 1; }
}

/* ---- the frame (phone): a top bar, and the side panel as a drawer over the page ---- */
/* on a phone every page ends as far from the foot as it starts from the sides */
:root { --page-foot: var(--space-8); }
.frame-page { padding: 0 var(--space-8) var(--page-foot); }
.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-corner, .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; }

/* ---- dialogs (phone): full-screen sheets; the body scrolls, the actions stay at the foot ---- */
dialog:is(.dialog, .oa-dialog, .oa-case-dialog) {
  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; position: static; background: none; box-shadow: none; }
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%; }
.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 (oa-freeze) ---- */
.dashboard-frame:has(> table.oa-sql-table) { overflow-x: auto; }
.oa-card-cols { overflow-x: auto; }
.oa-card-cols .oa-coltable { min-width: 640px; }

/* ---- grids and rows of controls (phone): one column, wrapping ---- */
:is(.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-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) { 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, in one row */
.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-col-find { flex: 1 1 100%; }
.oa-release .oa-release-bar { flex-direction: column; }
.oa-catalogue { position: static; max-height: 60vh; }
.dialog-foot { flex-wrap: wrap; gap: var(--space-4); }
.dialog-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; }
/* 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; }

/* a page of one card fills the width, less the gutters; Improve this is an icon */
.oa-improve > span:not(.icon) { display: none; }
.door-card { width: auto; max-width: 400px; margin: 0 var(--space-8); }

/* ======================================================================================== */
@media (min-width: 768px) {
  .frame-page { padding: 0 var(--space-11) var(--page-foot); }
  :root { --page-foot: var(--space-11); }
  .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-dialog) {
    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; position: revert-layer; background: revert-layer; box-shadow: 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 dialog */
  table.oa-cases :is(col, th, td):is(:nth-child(5), :nth-child(8)) { display: none; }

  :is(.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-col-find { flex: revert-layer; }
  .dialog-foot { flex-wrap: revert-layer; }
  .dialog-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-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-card { width: revert-layer; max-width: revert-layer; margin: revert-layer; }
}

/* ======================================================================================== */
@media (min-width: 1024px) {
  :root { --page-foot: revert-layer; }
  .frame-page { padding: revert-layer; }
  .oa-topbar { display: none; }
  .frame-page > .oa-corner, .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 foot's icons 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;
    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-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-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; }
  :is(.oa-toolbar, .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: 320px 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; } }

/* 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 Filters and Export share one row; the drug's switch takes the line's width, its
   roles the line under it */
.oa-toolbar { gap: var(--space-4); }
.oa-drugbar .oa-unit { --view-switch-half: calc((100% - 2 * var(--view-switch-pad)) / 2); flex: 1 1 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oa-drugbar .oa-unit .view-switch-half { padding-inline: var(--space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) {
  .oa-toolbar { gap: revert-layer; }
  .oa-drugbar .oa-unit { --view-switch-half: revert-layer; flex: revert-layer; grid-template-columns: revert-layer; }
  .oa-drugbar .oa-unit .view-switch-half { padding-inline: revert-layer; white-space: revert-layer; overflow: revert-layer; text-overflow: revert-layer; }
}


/* the system organ class takes the outcome's place from 1024 to 1439, and goes with it below 1024 */
@media (min-width: 768px) and (max-width: 1023px) { table.oa-cases.oa-soc :is(col, th, td):nth-child(9) { display: none; } }
@media (min-width: 1024px) and (max-width: 1439px) { table.oa-cases.oa-soc :is(col, th, td):nth-child(8) { display: none; } }
table.oa-cases.oa-soc th { white-space: normal; }