/* The portal's adapter sheet.

   The look of the portal is Salesforce's Lightning Design System (static/slds), used as shipped. Nothing here designs
   anything. These rules only (1) let a plain HTML element wear the design system's own style where it styles a different
   element (a <button> where it styles an <a>, a <dialog> round its modal), (2) switch things off, and (3) let parts the
   design system lays out for a desk fit a phone.
   No colour, font, radius or shadow of our own: where a value is needed it is one of the design system's tokens.
   tests/test_design.py holds every ui*.css file to that. */

/* The grey behind the panels fills the window, whatever the page's height (the token .slds-theme_shade uses) */
html { background: var(--slds-g-color-neutral-base-95); }
body { min-height: 100vh; }

/* hidden always hides, whatever display a class gives the element */
[hidden] { display: none !important; }

/* <dialog> is only the browser's top layer round the design system's modal and backdrop */
dialog.ax-dialog { inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; border: 0; padding: 0; background: transparent; color: inherit; overflow: visible; }
dialog.ax-dialog::backdrop { background: transparent; }
/* The page behind an open dialog does not scroll */
html:has(dialog:modal) { overflow: hidden; }

/* A menu item that is a <button> (it posts, or opens a dialog) reads as the menu's links do: the declarations of
   .slds-dropdown__item > a, with its ring when the keyboard is on it and its grey when it cannot be chosen */
.slds-dropdown__item > button, .slds-dropdown__item > form > button { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: .5rem .75rem; border: 0; background-color: transparent; color: var(--slds-g-color-neutral-base-10); font: inherit; text-align: inherit; cursor: pointer; }
.slds-dropdown__item > button:hover, .slds-dropdown__item > button:focus, .slds-dropdown__item > form > button:hover, .slds-dropdown__item > form > button:focus { outline: 0; background-color: var(--slds-g-color-neutral-base-95); }
.slds-dropdown__item > button:focus, .slds-dropdown__item > form > button:focus { box-shadow: var(--slds-g-shadow-inset-focus-1); }
.slds-dropdown__item > button:disabled, .slds-dropdown__item > form > button:disabled { background-color: transparent; color: var(--slds-g-color-neutral-base-80); cursor: default; }

/* A stage on a record's path that is a <button> (it posts the stage) fills its chevron as the design system's link does */
button.slds-path__link { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; }
button.slds-path__link:disabled { cursor: default; }

/* The bell's count does not bounce on every page: the design system animates it for a notification arriving in a page that
   stays open, and ours are separate pages */
.slds-notification-badge.slds-show-notification { animation: none; }

/* A workspace that has switched the AI off does not see what would use it */
.ax-no-ai [data-ai] { display: none !important; }

/* A tag's colour is one of eight the workspace chooses from, shown as the design system's swatch in its own palette */
.ax-tag-grey { background: var(--slds-g-color-neutral-base-60); }
.ax-tag-red { background: var(--slds-g-color-palette-red-50); }
.ax-tag-orange { background: var(--slds-g-color-palette-orange-60); }
.ax-tag-yellow { background: var(--slds-g-color-palette-yellow-80); }
.ax-tag-green { background: var(--slds-g-color-palette-green-50); }
.ax-tag-teal { background: var(--slds-g-color-palette-teal-50); }
.ax-tag-blue { background: var(--slds-g-color-palette-blue-50); }
.ax-tag-purple { background: var(--slds-g-color-palette-purple-50); }

/* On a phone a page header's buttons and controls go under its title instead of pushing it off the screen, a strip of
   buttons too wide for the screen wraps, and its facts sit two to a row (the design system's header is laid out for a
   desk; 47.9375em is the top of its own "small" range) */
@media (max-width: 47.9375em) {
  /* The message after an action is as wide as the page: the declarations of the design system's own
     .slds-region_narrow .slds-notify_toast (its toast for a narrow column); at a desk the toast is at least 30rem wide */
  .slds-notify_toast { min-width: auto; width: 100%; margin-left: 0; }
  .slds-page-header__row { flex-wrap: wrap; }
  .slds-page-header__col-title, .slds-page-header__col-meta, .slds-page-header__col-actions, .slds-page-header__col-controls { flex: 1 1 100%; max-width: 100%; margin-left: 0; }
  .slds-page-header__col-actions, .slds-page-header__col-controls { padding-top: var(--slds-g-spacing-2); }
  .slds-page-header__controls { flex-wrap: wrap; gap: var(--slds-g-spacing-1); }
  .slds-page-header__control { max-width: 100%; margin-left: 0; }
  .slds-page-header__controls .slds-button-group-list { flex-wrap: wrap; row-gap: var(--slds-g-spacing-1); }
  .slds-page-header__detail-row { flex-wrap: wrap; }
  .slds-page-header__detail-block { flex: 0 0 50%; max-width: 50%; padding: 0 var(--slds-g-spacing-3) var(--slds-g-spacing-2) 0; }
}

/* On a touch screen the design system makes boxes and buttons 2.75rem tall but leaves a native list at its desk height,
   and takes a date box's side padding away. Both are given the touch sheet's own figures. */
@media (pointer: coarse) and (hover: none) {
  .slds-select { height: 2.75rem; }
  .slds-input[type=date], .slds-input[type=datetime-local] { padding: 0 var(--slds-g-spacing-3); }
}

/* A table's cell is one line unless it says slds-cell-wrap, but the design system's button lets its own label break. In a
   table that is squeezed, a row's button keeps its words on one line, as the rest of its row does, and the room comes
   from the columns that may wrap */
@media (min-width: 48em) { .slds-table td:not(.slds-cell-wrap) .slds-button { white-space: nowrap; } }

/* A table that turns into blocks on a phone resets the padding of a row's first <td> but not of a first <th>, which is
   what names the record in our rows */
@media (max-width: 47.9375em) {
  /* A table whose rows carry a menu has no sideways-scrolling box round it (the box would cut the open menu off), so a long
     value with no break in it (an address standing in for a name, a link in a note) must be allowed to break, or it
     pushes the whole page sideways */
  .slds-table .slds-cell-wrap { overflow-wrap: anywhere; }
  .slds-max-medium-table_stacked.slds-table_cell-buffer tr > th:first-child, .slds-max-medium-table_stacked-horizontal.slds-table_cell-buffer tr > th:first-child { padding-left: var(--slds-g-spacing-3); }
}

/* The timeline's line down the side is drawn one layer behind its entry (z-index -1 in the design system). The entry keeps
   its own layers, so that the line stays in front of the panel or page the timeline sits on */
.slds-timeline__media { z-index: 0; }

/* Where the design system stops putting labels beside boxes (a phone) it still indents the words under the box */
@media (max-width: 47.9375em) { .slds-form-element_horizontal .slds-form-element__help { margin-left: 0; } }