/* ---------- MoreGeek logo ----------
 *
 * The logo is a custom icon (overrides/.icons/moregeek/logo.svg, fill and
 * stroke = currentColor), inlined by the theme, so its colour is set here:
 * light mode #191919, dark mode #f0f0f0. .md-logo covers the header and the
 * logo in the mobile navigation drawer.
 */
.md-logo {
  color: #191919;
}

[data-md-color-scheme="slate"] .md-logo {
  color: #f0f0f0;
}

/* ---------- phone screenshots ----------
 *
 *   <span class="mg-shot">![alt](img/x.png)<span class="mg-ov mg-ov--info">text</span></span>
 *
 * Screenshots are redacted (personal data painted over); .mg-ov text is laid
 * over the painted areas, so placeholders in it (&lt;email&gt;, ...) get
 * filled by placeholders.js like any other text. Positions are in % of the
 * image and font sizes in cqw (% of the image width), so the overlays scale
 * with the image. Values are measured on the 1080x2340 /e/OS screenshots.
 */
.mg-shot {
  position: relative;
  display: block;
  width: 100%;
  max-width: 15rem;
  margin: 0.8em 0 1.2em;
  container-type: inline-size;
  line-height: normal;
}

.mg-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.4rem;
  box-shadow: var(--md-shadow-z2);
}

.mg-ov {
  position: absolute;
  overflow: hidden;
  font-family: var(--md-text-font-family);
  color: #ebebeb;
  pointer-events: none;
}

/* info box text (Nextcloud login flow pages) */
.mg-ov--info {
  left: 13.4%;
  top: 30%;
  width: 81.9%;
  font-size: 3.89cqw;
  line-height: 1.36;
}

/* "<cloud name> - a safe home for all your data" pill */
.mg-ov--toast {
  left: 10.2%;
  top: 84.8%;
  width: 80%;
  height: 3.2%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.33cqw;
  white-space: nowrap;
}

/* browser bottom bar: page title + address */
.mg-ov--bar-title {
  left: 24.7%;
  top: 90.85%;
  width: 66.9%;
  font-size: 3.89cqw;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mg-ov--bar-url {
  left: 24.6%;
  top: 93.6%;
  width: 67%;
  font-size: 3.33cqw;
  line-height: 1.2;
  color: #c9c9c9;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Account Manager: "Account name" input field */
.mg-ov--account-name {
  left: 2.4%;
  top: 17.65%;
  width: 95.1%;
  height: 2.6%;
  font-size: 4.63cqw;
  line-height: 1.2;
  color: #e0e0e0;
  white-space: nowrap;
}

/* Nextcloud app: "Server address" input field */
.mg-ov--nc-server {
  left: 10.46%;
  top: 50.1%;
  width: 75%;
  font-size: 3.8cqw;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
}

/* Nextcloud app: "Confirm login" dialog text (QR code login) */
.mg-ov--nc-confirm {
  left: 14.8%;
  top: 45.13%;
  width: 74%;
  height: 9.4%;
  font-size: 3.6cqw;
  line-height: 1.44;
  color: #cac4d0;
  overflow-wrap: anywhere;
}

/* filled-in values inside screenshots: no highlight box, just the underline */
.mg-shot .mg-ph {
  background: none;
  padding: 0;
  border-radius: 0;
}

/* ---------- customer placeholders (see placeholders.js) ---------- */

/* a value filled in from the customer's link */
.mg-ph {
  background: var(--md-accent-fg-color--transparent);
  border-bottom: 1px dashed var(--md-accent-fg-color);
  border-radius: 0.1rem;
  padding: 0 0.1em;
}

/* "filled in for you" box below the page title */
.mg-ph-banner {
  border: 1px solid var(--md-accent-fg-color);
  border-radius: 0.2rem;
  padding: 0.6rem 0.8rem;
  margin: 1em 0 1.5em;
  font-size: 0.7rem;
}

.mg-ph-banner__title {
  margin: 0 0 0.4rem;
  font-weight: 700;
}

.mg-ph-banner dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 1rem;
  margin: 0 0 0.6rem;
}

.mg-ph-banner dt {
  color: var(--md-default-fg-color--light);
}

.mg-ph-banner dd {
  margin: 0;
  font-family: var(--md-code-font-family);
  overflow-wrap: anywhere;
}

.mg-ph-banner .mg-ph-banner__reset {
  font-size: 0.65rem;
  padding: 0.2em 1em;
  margin: 0;
  cursor: pointer;
}