/*
 * The panel's shape language, applied to Element.
 *
 * Colour is theme-able and shape is not, so this is the half that has to be a
 * stylesheet. Three kinds of rule live here, in this order: variable overrides
 * and radii, which are safe; the sign in and welcome screens, which Element
 * hands over to the deployment on purpose; and at the end, the controls this
 * server has no use for, which are hidden rather than removed so that an
 * upgrade renaming a selector shows a button again instead of breaking a page.
 */
:root {
  /*
   * The panel's radius ladder. Four for anything you press, six for what those
   * sit in, eight for a card, eleven for a dialog.
   */
  --e-radius-control: 4px;
  --e-radius-inner: 6px;
  --e-radius-card: 8px;
  --e-radius-dialog: 11px;
}

/* Element's own radius variables, where it has them. */
:root,
.cpd-theme-dark,
.cpd-theme-light {
  --cpd-radius-pill-effect: var(--e-radius-control);
  --cpd-space-scale: 1;
}

/*
 * Controls. Element rounds buttons and fields hard, which is the single
 * loudest difference from the panel now that the colours agree.
 */
.mx_AccessibleButton,
.mx_Dialog button,
.mx_Field,
.mx_Field input,
.mx_Field select,
.mx_Field textarea,
.mx_SearchBox,
.mx_Login_submit,
.mx_StyledRadioButton,
button.cpd-button,
.cpd-button {
  border-radius: var(--e-radius-control) !important;
}

/* The things controls sit in. */
.mx_RoomTile,
.mx_RoomSublist,
.mx_SpaceButton,
.mx_UserMenu,
.mx_ContextualMenu,
.mx_AutoCompleteWrapper,
.mx_Tooltip {
  border-radius: var(--e-radius-inner) !important;
}

/* Cards and dialogs. */
.mx_Dialog,
.mx_RoomSummaryCard,
.mx_BaseCard,
.mx_EventTile_line .mx_EventTile_content pre,
.mx_ReplyChain {
  border-radius: var(--e-radius-card) !important;
}

.mx_Dialog_fixedWidth,
.mx_Dialog_lightbox .mx_Dialog {
  border-radius: var(--e-radius-dialog) !important;
}

/*
 * Depth is an edge, not a shadow. The panel made this trade everywhere and it
 * is the other half of why the two look related: Element casts black blur under
 * menus and cards, which on a dark page reads as a phone app.
 */
.mx_ContextualMenu,
.mx_BaseCard {
  box-shadow: 0 0 0 1px var(--cpd-color-border-interactive-secondary, #343a40) !important;
}

/*
 * A dialog is the exception, and gets depth instead of an edge.
 *
 * A hairline works on a menu, which is small and sits close to what opened it.
 * On something the size of the settings dialog the same line reads as a drawn
 * rectangle around the page, and the corner is where it shows: the ring is
 * square to the element and the dialog is not.
 */
.mx_Dialog {
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

/*
 * What is behind it, blurred. Element dims the app to 40% and leaves it legible
 * underneath, so the eye keeps trying to read two screens at once. Blur settles
 * that without making the room any darker.
 */
.mx_Dialog_background {
  background-color: rgba(9, 11, 12, 0.55) !important;
  opacity: 1 !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* The avatar is the one thing that stays round, as it is in the panel. */
.mx_BaseAvatar,
.mx_BaseAvatar img {
  border-radius: 9999px !important;
}

/*
 * The sign in screen.
 *
 * Element's own welcome page carries a footer of links to its blog, its
 * Mastodon and its GitHub, which are four invitations to leave an internal
 * tool, and a "Powered by Matrix" that is true and is not this company's
 * business to advertise. The selectors are read out of the running build
 * rather than guessed, and they hide rather than remove, so an Element upgrade
 * that renames them shows the links again instead of breaking the page.
 */
.mx_AuthFooter {
  display: none !important;
}

/*
 * The auth card draws itself now.
 *
 * Element wraps it in two rounded layers, a translucent pane at 36px and the
 * card at 24px inside it. A hairline ring on the outer element, which is what
 * used to be here, sat outside both and read as a second box around the first.
 */


/*
 * The welcome page.
 *
 * Element sanitises the embedded page before it renders it, and class, width
 * and height attributes are all dropped on the way through. Nothing in
 * brand/welcome.html can be addressed by name, so these are plain element
 * selectors under Element's own container, and that file is kept to the four
 * elements they expect.
 */
/*
 * Element sizes the auth card to its contents, and the welcome page is four
 * short elements, so without a floor it comes out as a 239px strip six hundred
 * pixels tall. On the content, not the modal around it: the modal stretches and
 * the card inside does not follow. Only the welcome card, since the sign in
 * form sets its own width.
 */
/*
 * Element frosts the auth card by painting 59% white over it. That is right on
 * its light theme. On a dark one the form paints itself back in, and the half
 * of the card that is not the form is left as a grey slab beside it.
 */
.mx_AuthPage_modalContent {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

.mx_AuthPage_modalContent:has(.mx_WelcomePage) {
  min-width: 380px;
}

.mx_WelcomePage_body {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.mx_WelcomePage_body > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.mx_WelcomePage_body img {
  width: 72px;
  height: 72px;
}

.mx_WelcomePage_body h1 {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cpd-color-text-primary, #e7e8e9);
}

.mx_WelcomePage_body p {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px;
  color: var(--cpd-color-text-secondary, #c0c5c9);
}

/*
 * The way in.
 *
 * Element's stock welcome page carries the sign in button itself, so replacing
 * that page with the company's own took the button with it and left a logo and
 * no door.
 */
.mx_WelcomePage_body a {
  margin-top: 8px;
  padding: 12px 30px;
  border-radius: 999px;
  background: var(--cpd-color-bg-action-primary-rest, #156d7f);
  color: var(--cpd-color-text-on-solid-primary, #fff);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.mx_WelcomePage_body a:hover {
  background: var(--cpd-color-bg-action-primary-hovered, #125e6d);
  text-decoration: none;
}

* The chrome a one company server has no use for.
 *
 * Element is built for somebody who joins servers, makes rooms and organises
 * them into spaces. Nobody here does any of that: the rooms are the list in
 * rooms.conf, every account is put in all of them, and there is one server that
 * nothing else can reach. Every control for those jobs is either a dead end or
 * a way for somebody to end up somewhere the rest of the company is not.
 *
 * Anchored to data-testid rather than to class names, because this part of
 * Element is built from a component library whose classes are generated
 * ("_header_1b9rm_8") and change on every release. The test ids are what
 * Element's own tests hold on to, so they are the closest thing to a contract
 * this markup has. Read out of the running build rather than guessed.
 *
 * Hidden rather than removed. An upgrade that renames one of these shows a
 * button again, which somebody notices and says out loud; a rule that quietly
 * matched the wrong element would not be noticed at all.
 *
 * What deliberately stays: the profile menu, the settings gear, and threads.
 * They are how somebody changes their password or their name.
 */

/* The space list, and "Create a space" under it. There is one space and this
   is it, so the whole tree is a control with a single value. The bar itself
   stays: settings and the profile live at the bottom of it. */
.mx_SpacePanel .mx_SpaceTreeLevel,
.mx_SpacePanel_toggleCollapse {
  display: none !important;
}

/*
 * The room list header keeps its title and loses its buttons.
 *
 * The header is one row with two groups in it: the title on the left, and on
 * the right the add menu ("New room", "New space", a direct message), the
 * section collapse toggle, and a new chat button. The right hand group is the
 * container's last child, which is the only thing about it that is not a
 * generated class name.
 */
[data-testid="room-list-header"] > * > *:last-child {
  display: none !important;
}

/* The filter row. Five chips over four rooms. */
[data-testid="primary-filters"] {
  display: none !important;
}

/* Explore, which searches a directory holding exactly the rooms everybody is
   already in, and offers to create one when it finds nothing. */
[data-testid="room-list-search"] button[aria-label="Explore rooms"] {
  display: none !important;
}