/*
  src/web/assets/pages.css

  The layout of the account and administration pages: the CSS of the factory console's identity
  application's parts, the rules of design/console/components/ with their values unchanged, each
  class under a global name. A class is renamed to its file's name then the class,
  `.page-frame-body`, `.field-input`, and to the file's name alone when the class is the file's
  name or its last word, `.button`, `.status-mark`, `.app-bar`. The parts read the `--id-*` tokens
  of identity-tokens.css, loaded before this file.

  Three blocks, in order. First the two typefaces and the scheme, the only properties the parts
  read of the console's tokens.css. Then the base, the service's own, for what the console's
  global stylesheet gives. Then the parts, one block per file of the record, and after each what
  the service adds to it, marked `the service's own`.

  Left out of the record's rules: the sheet's pull over the console's padding, since no console
  frame surrounds it; the section's arrival, which takes a `style` attribute the pages' policy
  refuses and would replay on every press; the frame's foot, which holds the fixture's words; and
  every rule no part of frame.ts draws: the frame's hidden heading, the not-found page's address,
  the mark of what ends soon, the search's shortcut, a person's initials and the column they
  take, the list's column heads and its actions' column, and the rest of person-opened. Of
  person-page, person-credential, add-person and event-list no rule is taken: a person's page is
  the page's head, sections and lists of lines, which page-frame and people-page already draw,
  and the form to add a person stands in the page as every form here does. A page that draws
  one adds its rule from the record.

  Taken from design/console/, the copy of walreyes/tucum-factory-console, branch the-clean-slate,
  commit 7f379ceba523214a94772efdff710816b98ebd70
  (console/frontend/src/applications/identity/components/ and console/frontend/src/styles/).
*/

/* tokens.css: the two variables next/font defines in the console, then its lines 53 and 54, and
   the scheme under its two dark selectors */

:root {
  --font-geist: "Geist";
  --font-geist-mono: "Geist Mono";
  --font-sans: var(--font-geist), system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* the base, the service's own: what the console's global stylesheet gives and design/console/
   does not hold. The body carries the ground so the browser paints it past the sheet's edges. A
   word longer than its line, a name or an address a person typed, breaks instead of widening the
   page. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--id-ground);
}

.sheet {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-wrap: anywhere;
}

/* sheet.module.css */

.sheet {
  container: identity / inline-size;
  background: var(--id-ground);
  color: var(--id-ink);
  font-family: var(--id-font);
  font-size: var(--id-text);
  font-weight: var(--id-weight);
  font-variant-numeric: tabular-nums;
  line-height: var(--id-leading);
  caret-color: var(--id-ink);
  -webkit-font-smoothing: antialiased;
}

.sheet a {
  color: inherit;
  text-decoration: none;
}

.sheet :focus-visible {
  outline: var(--id-stroke) solid var(--id-ink);
  outline-offset: var(--id-stroke);
}

.sheet ::selection {
  background: var(--id-fill);
}

.sheet code,
.sheet kbd {
  font-family: var(--id-font-mono);
}

/* page-frame.module.css */

.page-frame-body {
  max-width: var(--id-page-width);
  margin: 0 auto;
  padding: var(--id-7) var(--id-pad) var(--id-8);
}

.page-frame-pageHead {
  margin-bottom: var(--id-8);
  padding-bottom: var(--id-6);
  border-bottom: var(--id-hairline) solid var(--id-rule);
}

.page-frame-pageTitle {
  margin: 0;
  font-size: var(--id-text-head);
  line-height: var(--id-leading-head);
  font-weight: var(--id-weight-strong);
  letter-spacing: var(--id-tracking-title);
}

.page-frame-pageFacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--id-1) var(--id-4);
  margin: var(--id-2) 0 0;
  color: var(--id-ink-2);
}

.page-frame-section {
  min-width: 0;
}

.page-frame-section + .page-frame-section {
  margin-top: var(--id-8);
}

.page-frame-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--id-4);
  margin-bottom: var(--id-4);
}

.page-frame-title {
  margin: 0;
  font-size: var(--id-text-title);
  line-height: var(--id-leading-title);
  font-weight: var(--id-weight-strong);
  letter-spacing: var(--id-tracking-title);
}

.page-frame-count {
  margin-left: var(--id-2);
  color: var(--id-ink-3);
  font-weight: var(--id-weight);
}

.page-frame-body .page-frame-more {
  color: var(--id-ink-3);
  transition: color var(--id-quick) var(--id-ease);
}

.page-frame-body .page-frame-more:hover {
  color: var(--id-ink);
}

.page-frame-empty {
  margin: 0;
  padding: var(--id-3) 0;
  border-top: var(--id-hairline) solid var(--id-rule);
  color: var(--id-ink-3);
}

@container identity (max-width: 40rem) {
  .page-frame-body {
    padding-inline: var(--id-4);
  }
}

/* page-frame, the service's own: a link inside the empty line or a line of facts is underlined,
   since the sheet's links carry no mark of their own and these stand in a sentence */

.page-frame-empty a,
.page-frame-pageFacts a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* page-frame, the service's own, for the people pages. What stands under a head's facts, over
   its hairline: the search at the left and a way at the right, and a refusal under both. A mark
   in the facts stands off its words. A section a link or a redirect names by its id opens a
   section's distance under the window's top, as a line does. */

.page-frame-pageBelow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--id-2) var(--id-5);
  margin-top: var(--id-4);
}

.page-frame-pageBelow > .consequence-said {
  flex: 0 0 100%;
}

.page-frame-section[id] {
  scroll-margin-top: var(--id-8);
}

/* page-frame, the service's own: what a section with an id says of itself whole, over its
   list, a consequence, an outcome or a refusal, stands off the list's first hairline as the
   record's person-credential sets what a group's action opens. The account page's sections
   carry no id and keep what they had. */

.page-frame-section[id] > .consequence-said {
  padding: 0 0 var(--id-3);
}

/* app-bar.module.css */

.app-bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--id-6);
  height: var(--id-bar-height);
  padding: 0 var(--id-pad);
  background: var(--id-bar);
  border-bottom: var(--id-hairline) solid var(--id-rule);
}

.app-bar-views {
  display: flex;
  align-items: stretch;
  gap: var(--id-6);
  min-width: 0;
}

.app-bar .app-bar-view {
  display: flex;
  align-items: center;
  gap: var(--id-2);
  position: relative;
  color: var(--id-ink-3);
  white-space: nowrap;
  transition: color var(--id-quick) var(--id-ease);
}

.app-bar .app-bar-view:hover,
.app-bar .app-bar-view[aria-current="page"] {
  color: var(--id-ink);
}

.app-bar-view[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(-1 * var(--id-hairline));
  left: 0;
  height: var(--id-hairline);
  background: var(--id-ink);
}

.app-bar-end {
  display: flex;
  align-items: center;
  gap: var(--id-3);
}

@container identity (max-width: 40rem) {
  .app-bar {
    gap: var(--id-4);
    padding: 0 var(--id-4);
  }

  .app-bar-views {
    gap: var(--id-4);
    overflow-x: auto;
  }
}

/* app-bar, the service's own. The console's frame names the application beside its bar; these
   pages stand alone at their host, so the bar opens with the service's name, in the ink at the
   strong weight, and the views follow it. Its end holds who is signed in, in the second ink, cut
   with an ellipsis when the bar is short. In a narrow container the bar is two lines: the name
   and the person, then the views on the bar's edge. */

.app-bar-name {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: var(--id-4);
  font-weight: var(--id-weight-strong);
  letter-spacing: var(--id-tracking-title);
  white-space: nowrap;
}

.app-bar-views {
  flex: 1 1 auto;
}

.app-bar-end {
  min-width: 0;
  margin-left: auto;
}

.app-bar-person {
  overflow: hidden;
  color: var(--id-ink-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@container identity (max-width: 40rem) {
  .app-bar[data-views] {
    flex-wrap: wrap;
    row-gap: 0;
    height: auto;
  }

  .app-bar-name {
    margin-right: 0;
  }

  .app-bar[data-views] .app-bar-name,
  .app-bar[data-views] .app-bar-end {
    height: calc(var(--id-bar-height) - var(--id-3));
  }

  .app-bar[data-views] .app-bar-end {
    flex: 1 1 0;
    justify-content: flex-end;
  }

  .app-bar[data-views] .app-bar-views {
    flex: 0 0 100%;
    order: 1;
    height: calc(var(--id-bar-height) - var(--id-4));
  }
}

/* button.module.css */

.button {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: var(--id-control);
  padding: 0;
  border: 0;
  border-radius: var(--id-radius-control);
  background: none;
  color: var(--id-ink-3);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--id-quick) var(--id-ease),
    opacity var(--id-quick) var(--id-ease);
}

.button:hover {
  color: var(--id-ink);
}

.button[data-look="primary"],
.button[data-look="primary"]:hover {
  padding: 0 var(--id-3);
  background: var(--id-ink);
  color: var(--id-on-ink);
  font-weight: var(--id-weight-strong);
}

.button[data-look="primary"]:hover {
  opacity: 0.88;
}

.button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* button, the service's own: a link drawn as a button keeps the button's colours over the
   sheet's rule for a link, and a button the script has not shown yet takes no room */

.sheet a.button {
  color: var(--id-ink-3);
}

.sheet a.button:hover {
  color: var(--id-ink);
}

.sheet a.button[data-look="primary"],
.sheet a.button[data-look="primary"]:hover {
  color: var(--id-on-ink);
}

.button[hidden] {
  display: none;
}

/* field.module.css */

.field {
  display: grid;
  gap: var(--id-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field-label {
  padding: 0;
  color: var(--id-ink-3);
  font-size: var(--id-text-meta);
  line-height: var(--id-leading-meta);
}

.field-input {
  width: 100%;
  height: var(--id-control);
  padding: 0 var(--id-3);
  border: 0;
  border-radius: var(--id-radius-control);
  background: var(--id-fill);
  color: var(--id-ink);
  font: inherit;
}

/* field.module.css: the choice, its legend and a line per option */

.field-choice .field-label {
  margin-bottom: var(--id-2);
}

.field-option {
  display: flex;
  align-items: baseline;
  gap: var(--id-2);
  cursor: pointer;
}

.field-option input {
  margin: 0;
  accent-color: var(--id-ink);
  transform: translateY(1px);
}

.field-means {
  color: var(--id-ink-3);
}

/* field, the service's own: on a touch screen a field's text is 16px so the browser does not
   zoom into it. Then the form, which the console draws on a surface it opens and these pages
   draw in the page: its fields side by side, each as wide as the console's bar field, with the
   button at their end on the inputs' line, and what the form says under them. */

.form {
  display: grid;
  gap: var(--id-2);
  margin: 0;
}

.form-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--id-3) var(--id-4);
}

.form-fields > .field {
  flex: 0 1 var(--id-field);
}

@media (pointer: coarse) {
  .field-input,
  .search-field-field {
    font-size: 1rem;
  }
}

/* field, the service's own, for a form with a choice: the choice is as wide as its options, the
   fields stand at the form's top with their labels on one line, and the button stands on the
   inputs' line, a label and its gap under the top. */

.form-fields > .field-choice {
  flex: 0 1 auto;
}

.form-fields:has(> .field-choice) {
  align-items: flex-start;
}

.form-fields:has(> .field-choice) > .button {
  margin-top: calc(var(--id-leading-meta) + var(--id-2));
}

/* search-field.module.css */

.search-field {
  display: flex;
  align-items: center;
  position: relative;
}

.search-field-field {
  width: var(--id-field);
  height: var(--id-control);
  padding: 0 var(--id-8) 0 var(--id-3);
  border: 0;
  border-radius: var(--id-radius-control);
  background: var(--id-fill);
  color: var(--id-ink);
  font: inherit;
}

.search-field-field::placeholder {
  color: var(--id-ink-3);
}

.search-field-field::-webkit-search-cancel-button {
  display: none;
}

@container identity (max-width: 52rem) {
  .search-field-field {
    width: calc(var(--id-field) * 0.6);
    padding-right: var(--id-3);
  }
}

/* search-field, the service's own: the search is a form in the page's head, not in the bar, with
   `Search` beside its field and no room kept for the shortcut the record draws at the field's
   end, and in a narrow container the field takes the line's width, since
   the words it holds while empty are longer than the bar's. */

.search-field {
  gap: var(--id-4);
  margin: 0;
}

.search-field-field {
  padding-right: var(--id-3);
}

@container identity (max-width: 52rem) {
  .search-field {
    flex: 1 1 100%;
  }

  .search-field-field {
    flex: 1 1 auto;
    width: auto;
  }
}

/* status-mark.module.css */

.status-mark {
  display: inline-block;
  flex: none;
  width: var(--id-mark);
  height: var(--id-mark);
  border-radius: 50%;
  vertical-align: middle;
}

.status-mark[data-status="active"] {
  background: var(--id-active);
}

.status-mark[data-status="refused"] {
  border-radius: 1px;
  background: var(--id-refused);
  transform: rotate(45deg) scale(0.86);
}

.status-mark[data-status="off"] {
  box-shadow: inset 0 0 0 var(--id-stroke) var(--id-ink-3);
}

/* consequence.module.css */

.consequence-said {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--id-2) var(--id-5);
  padding-top: var(--id-2);
}

.consequence-text {
  flex: 1 1 18rem;
  max-width: 44rem;
  margin: 0;
  color: var(--id-ink-2);
}

.consequence-text > [data-status] {
  margin-right: var(--id-3);
}

.consequence-buttons {
  display: flex;
  align-items: center;
  gap: var(--id-4);
}

/* consequence, the service's own: the buttons are a form, which has no margin of its own, and a
   link inside what is said is underlined */

form.consequence-buttons {
  margin: 0;
}

.consequence-text a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* reason.module.css */

.reason {
  margin: 0;
  color: var(--id-ink);
}

.reason-detail {
  color: var(--id-ink-3);
}

.reason > [data-status] {
  margin-right: var(--id-2);
}

/* missing.module.css */

.missing-fact {
  margin: 0;
  font-size: var(--id-text-head);
  line-height: var(--id-leading-head);
  font-weight: var(--id-weight-strong);
}

.missing-way {
  margin: var(--id-6) 0 0;
  color: var(--id-ink-2);
}

.missing-way a:hover {
  color: var(--id-ink);
}

/* missing, the service's own: what a whole page says under its fact, a refusal or one sentence,
   no wider than reads well */

.missing-said {
  max-width: 44rem;
  margin: var(--id-3) 0 0;
  color: var(--id-ink-2);
}

.missing-said > [data-status] {
  margin-right: var(--id-3);
}

/* person-opened.module.css: what is shown once, the surface, its secret and its foot */

.person-opened-surface {
  display: grid;
  gap: var(--id-5);
  max-width: 60rem;
  padding: var(--id-5);
  border-radius: var(--id-radius);
  background: var(--id-surface);
  box-shadow: var(--id-shadow);
}

.person-opened-secret {
  display: block;
  padding: var(--id-3);
  border-radius: var(--id-radius-control);
  background: var(--id-fill);
  font-family: var(--id-font-mono);
  font-size: var(--id-text-meta);
  line-height: var(--id-leading);
  overflow-wrap: anywhere;
  user-select: all;
}

.person-opened-line {
  margin: 0;
}

.person-opened-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--id-3) var(--id-5);
  padding-top: var(--id-4);
  border-top: var(--id-hairline) solid var(--id-rule);
}

.person-opened-line {
  flex: 1 1 18rem;
  max-width: 44rem;
  color: var(--id-ink-2);
}

.person-opened-buttons {
  display: flex;
  align-items: center;
  gap: var(--id-4);
  margin: 0;
}

/* person-opened, the service's own: the surface stands a section's distance over what follows
   it, and the secret selects whole in Safari too */

.person-opened-surface {
  margin-bottom: var(--id-8);
}

.person-opened-secret {
  -webkit-user-select: all;
}

/* people-page.module.css: the line of a list, under a hairline, none around */

.people-page-person {
  display: grid;
  grid-template-columns: var(--columns);
  column-gap: var(--id-5);
}

.people-page-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--id-hairline) solid var(--id-rule);
}

.people-page-lines > li {
  border-top: var(--id-hairline) solid var(--id-rule);
}

.people-page-person {
  row-gap: var(--id-2);
  align-items: center;
  position: relative;
  margin: 0 calc(-1 * var(--id-3));
  padding: var(--id-3);
  border-radius: var(--id-radius-control);
  transition: background-color var(--id-quick) var(--id-ease);
}

.people-page-person:hover {
  background: var(--id-fill);
}

.people-page-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--id-1) var(--id-4);
  position: relative;
  z-index: 2;
}

.people-page-below {
  display: grid;
  gap: var(--id-2);
  position: relative;
  z-index: 2;
}

/* people-page.module.css: the roles counted, a role's meaning beside its heading, and who a line
   is: the name, the link that covers the line, and the email under it */

.page-frame-pageFacts .people-page-role {
  color: var(--id-ink-3);
  transition: color var(--id-quick) var(--id-ease);
}

.people-page-role strong {
  color: var(--id-ink);
  font-weight: var(--id-weight-strong);
}

.page-frame-pageFacts .people-page-role:hover,
.page-frame-pageFacts .people-page-role[aria-current] {
  color: var(--id-ink);
}

.page-frame-pageFacts .people-page-role[aria-current] {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.people-page-means {
  color: var(--id-ink-3);
  font-size: var(--id-text);
  font-weight: var(--id-weight);
  letter-spacing: 0;
}

.people-page-nameLine,
.people-page-email,
.people-page-standing {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-page-name {
  font-weight: var(--id-weight-strong);
}

.people-page-name::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--id-radius-control);
  z-index: 1;
}

.people-page-person .people-page-name:focus-visible {
  outline: none;
}

.people-page-name:focus-visible::after {
  outline: var(--id-stroke) solid var(--id-ink);
  outline-offset: calc(-1 * var(--id-stroke));
}

.people-page-you {
  margin-left: var(--id-2);
  color: var(--id-ink-3);
}

.people-page-email {
  color: var(--id-ink-3);
  font-size: var(--id-text-meta);
  line-height: var(--id-leading-meta);
}

.people-page-standing > [data-status] {
  margin-right: var(--id-2);
}

/* people-page, the service's own, for the people pages. The list of people has three columns,
   who, what lets them in and when they were last seen, the first as wide as the record's, the
   last at the line's end and wide enough for `seen 16 min ago` with its mark: its lines hold no
   action, so the record's fourth column is not there. The role's link in a head's facts is not underlined until it is the chosen one.
   A role's meaning stands off the heading's count. Beside a name, `you` is at the plain weight,
   as the email under it is. A state said under a line or among a head's facts is in the ink.
   Every list of a person's page gives its first column the width of the list's, so what follows
   the first cell starts at one place down the page, in the role's line and in a session's alike.
   A list whose line is a sentence gives it the width a sentence reads well in, at the plain
   weight in the second ink, on as many lines as it takes, with its press at the line's end. */

.people-page-lines.people-page-index {
  --columns: 19rem minmax(0, 1fr) 9rem;
}

.people-page-index .people-page-cell:nth-child(3) {
  color: var(--id-ink-3);
  text-align: right;
}

.page-frame-pageFacts .people-page-role {
  text-decoration: none;
}

.people-page-means {
  margin-left: var(--id-3);
}

.people-page-you,
.people-page-email {
  font-weight: var(--id-weight);
}

.people-page-standing {
  color: var(--id-ink);
}

.people-page-lines.people-page-record {
  --columns: 19rem;
}

.people-page-lines.people-page-sentence {
  --columns: minmax(0, 44rem);
}

.people-page-sentence .people-page-cell:first-child {
  color: var(--id-ink-2);
  font-weight: var(--id-weight);
  white-space: normal;
}

@container identity (max-width: 64rem) {
  .people-page-lines.people-page-index {
    --columns: 15rem minmax(0, 1fr) 9rem;
  }

  .people-page-lines.people-page-record {
    --columns: 15rem;
  }
}

/* In a narrow container a line of a person's page is two columns: what it is and its press on
   the first line, then its facts two to a line, so the lines of a list fold the same way however
   long their words are; a line's one fact takes the line's width. */

@container identity (max-width: 44rem) {
  .people-page-record .people-page-person {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-flow: row;
  }

  .people-page-record .people-page-cell:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .people-page-record .people-page-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-left: 0;
  }

  .people-page-record .people-page-cell:nth-child(2):nth-last-child(-n + 2) {
    grid-column: 1 / -1;
  }
}

/* people-page, the service's own. A list with no class of its own for its columns lays its cells
   out as the first twice as wide as each of the others, however many there are; a list's own
   class sets `--columns` and the line follows it, as the console's lists do. A cell's text is cut
   with an ellipsis and never widens the line. What is said under a line stands outside its
   columns, under the cells and inside the line's hairlines, so it reads the same under any
   columns. In a narrow container the first cell takes the line and the others follow under it,
   side by side, each as tall as a button, so a line with a button and one without are the same
   height, and a mark that says nothing takes no room, since nothing is under it to line up
   with. A line a link or a redirect names by its id opens a section's distance under the
   window's top. */

.people-page-lines {
  --columns: minmax(0, 2fr);
}

.people-page-person {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.people-page-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-page-cell:first-child {
  font-weight: var(--id-weight-strong);
}

.people-page-cell + .people-page-cell {
  color: var(--id-ink-2);
}

.people-page-cell > [data-status] {
  margin-right: var(--id-2);
}

.people-page-below {
  margin-top: calc(-1 * var(--id-1));
  padding-bottom: var(--id-3);
}

.people-page-lines > li[id] {
  scroll-margin-top: var(--id-8);
}

@container identity (max-width: 44rem) {
  .people-page-person {
    display: flex;
    flex-wrap: wrap;
    gap: var(--id-1) var(--id-4);
  }

  .people-page-cell:first-child {
    flex: 0 0 100%;
  }

  .people-page-cell + .people-page-cell {
    line-height: var(--id-control);
  }

  .people-page-cell > [data-status="none"] {
    display: none;
  }

  .people-page-actions {
    margin-left: auto;
  }
}

/* events-page.module.css: the choice of a kind, a field on the fill with a small caret drawn at
   its end, and the way further back, a quiet word under the last day */

.events-page-field {
  position: relative;
  display: inline-flex;
}

.events-page-field::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--id-3);
  width: var(--id-1);
  height: var(--id-1);
  border-right: var(--id-stroke) solid var(--id-ink-3);
  border-bottom: var(--id-stroke) solid var(--id-ink-3);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

.events-page-select {
  height: var(--id-control);
  max-width: 16rem;
  padding: 0 var(--id-7) 0 var(--id-3);
  border: 0;
  border-radius: var(--id-radius-control);
  background: var(--id-fill);
  color: var(--id-ink);
  font: inherit;
  appearance: none;
  cursor: pointer;
}

.events-page-select option,
.events-page-select optgroup {
  background: var(--id-surface);
  color: var(--id-ink);
}

.events-page-earlier .events-page-way {
  color: var(--id-ink-3);
  transition: color var(--id-quick) var(--id-ease);
}

.events-page-earlier .events-page-way:hover {
  color: var(--id-ink);
}

.events-page-earlier {
  margin: var(--id-6) 0 0;
  padding: var(--id-4) 0 0 calc(9rem + var(--id-4));
  border-top: var(--id-hairline) solid var(--id-rule);
}

/* events-page, the service's own. A day here is a section, its lines from the page's edge under
   their own hairlines, so the way further back starts at the page's edge and draws no second
   hairline under the last day's. On a touch screen the choice's text is 16px, as a field's. */

.events-page-earlier {
  padding: 0;
  border-top: 0;
}

@media (pointer: coarse) {
  .events-page-select {
    font-size: 1rem;
  }
}