/* Panel styling on top of Bootstrap.
 *
 * The device is an iPhone, operated standing up with one hand while a customer
 * waits. What decides whether this gets used is the size of the touch targets,
 * not the palette. Bootstrap's defaults are built for a mouse.
 */

:root {
  /* Apple's own minimum for a comfortable touch target. */
  --rm-touch-target: 44px;
}

/* Size only. It used to impose inline-flex centering too, which collapsed
 * every stacked label into one centred row: "Jean CargoJeans". Layout is
 * Bootstrap's job; this class guarantees the thumb has somewhere to land. */
.rm-touch,
.rm-touch.btn,
.btn.rm-touch {
  min-height: var(--rm-touch-target);
  min-width: var(--rm-touch-target);
}

/* Form controls inside the panel are thumbs-first too. */
.rm-panel .form-control,
.rm-panel .form-select,
.rm-panel .btn {
  min-height: var(--rm-touch-target);
}

/* 16px stops iOS zooming the viewport when a field takes focus, which on a
 * phone reads as the page jumping away from the user. */
.rm-panel .form-control,
.rm-panel .form-select {
  font-size: 1rem;
}

/* Printed labels. docs/02 section 9: 2.5 cm minimum a side. With no torch on
 * iOS, size and contrast are the only defence against poor shop lighting. */
:root {
  --rm-label-qr: 2.8cm;
}

.rm-sheet-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4mm;
  justify-content: center;
}

.rm-label {
  width: calc(var(--rm-label-qr) + 6mm);
  padding: 2mm;
  border: 1px dashed #999;
  text-align: center;
  break-inside: avoid;
  font-family: monospace;
  background: #fff;
  color: #000;
}

.rm-label img {
  width: var(--rm-label-qr);
  height: var(--rm-label-qr);
  display: block;
  margin: 0 auto;
}

.rm-label-sku {
  font-size: 7pt;
  margin-top: 1mm;
  word-break: break-all;
}

.rm-label-price {
  font-size: 10pt;
  font-weight: bold;
}

@media print {
  @page {
    margin: 8mm;
  }

  /* Bootstrap's py-3 on <main> carries !important; a class selector inside
   * .rm-panel outranks it on specificity, which is the only way to win. */
  .rm-panel > main {
    padding: 0 !important;
  }

  .rm-sheet-grid {
    justify-content: flex-start;
  }

  /* The dashed guide is where the scissors go, so it has to survive the
   * browser's "do not print backgrounds" default. */
  .rm-label {
    border-color: #000;
  }
}

/* Panel home. The three figures and the way into selling. */
.rm-figure {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.625rem;
  border-radius: 0.625rem;
  height: 100%;
}

.rm-figure-value {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.15;
}

.rm-figure-label {
  font-size: 0.7rem;
}

.rm-figure-info { background: #e4eef8; color: #16457a; }
.rm-figure-ok { background: #e3f3e9; color: #146b3c; }
.rm-figure-warn { background: #fef3c7; color: #7a5200; }

.rm-scan {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 1rem;
  border-radius: 0.875rem;
  background: #212529;
  color: #f8f9fa;
  text-decoration: none;
  text-align: left;
}

.rm-scan:hover,
.rm-scan:focus {
  color: #f8f9fa;
  background: #343a40;
}

.rm-scan-icon { color: #7fb2e5; flex-shrink: 0; }
.rm-scan-hint { color: #c9c8c1; }

/* The bar: the shop on the left of centre, who is signed in on the right.
 * The phone stays signed in for weeks, so "who am I" has to be visible. */
.rm-brand {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #495057;
  color: #f8f9fa;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* The sale screen. Design F: the body alternates, the bar never moves. */
.rm-segment {
  gap: 0.25rem;
  padding: 0.25rem;
  background: #e9ecef;
  border-radius: 0.75rem;
}

.rm-segment .nav-link {
  border-radius: 0.5rem;
  color: #343a40;
  font-weight: 600;
}

.rm-segment .nav-link.active {
  background: #212529;
}

.rm-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: #212529;
  color: #f8f9fa;
  font-size: 0.8125rem;
  font-weight: 700;
}

.rm-segment .nav-link.active .rm-qty {
  background: #f8f9fa;
  color: #212529;
}

.rm-viewfinder {
  position: relative;
  height: 15rem;
  border-radius: 0.875rem;
  background: #1c1c19;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rm-reticle {
  width: 9.5rem;
  height: 9.5rem;
  border: 3px solid #7fb2e5;
  border-radius: 0.75rem;
  /* Only the corners: a full frame reads as a border, not as an aim. */
  clip-path: polygon(
    0 0, 35% 0, 35% 3px, 3px 3px, 3px 35%, 0 35%,
    0 65%, 3px 65%, 3px calc(100% - 3px), 35% calc(100% - 3px), 35% 100%, 0 100%,
    100% 100%, 65% 100%, 65% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px),
    calc(100% - 3px) 65%, 100% 65%, 100% 35%, calc(100% - 3px) 35%,
    calc(100% - 3px) 3px, 65% 3px, 65% 0, 100% 0
  );
}

.rm-viewfinder-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  text-align: center;
  color: #c9c8c1;
  font-size: 0.8125rem;
}

.rm-total {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
}

/* Fixed, not sticky: inside a scrolling <main> a sticky bar drifts on iOS.
 * The safe-area inset keeps it clear of the iPhone's home indicator. */
.rm-salebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: #fff;
  border-top: 1px solid #dee2e6;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.rm-salebar-inner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
}

/* Room for the bar, in normal flow.
 *
 * Not padding on <main>: Bootstrap's spacing utilities carry !important, so
 * the py-3 already on it wins and the last rows stay hidden. An element that
 * occupies real height cannot be overridden by a utility on someone else. */
.rm-salebar-spacer {
  height: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

/* Size chips. The colour is a heading above them, not a word on each one. */
.rm-swatch {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.rm-size {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: var(--rm-touch-target);
  padding: 0.375rem 0.5rem;
  border: 1.5px solid #212529;
  border-radius: 0.625rem;
  background: #fff;
  color: #212529;
  line-height: 1.1;
}

.rm-size:active {
  background: #212529;
  color: #fff;
}

.rm-size-value {
  font-size: 1.0625rem;
  font-weight: 700;
}

.rm-size-left {
  font-size: 0.6875rem;
  color: #6c757d;
}

.rm-size:active .rm-size-left {
  color: #dee2e6;
}

/* Scarcity speaks up; plenty stays quiet. One or two left is when she is
 * about to promise a customer something that may not be there twice. */
.rm-size-last {
  color: #7a5200;
  font-weight: 600;
}

/* Quantity. The chip adds one, which is the fast path; this is the way back,
 * and the way up for a customer buying four of the same thing. */
.rm-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.rm-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rm-touch-target);
  height: var(--rm-touch-target);
  padding: 0;
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
  background: #fff;
  color: #212529;
  font-size: 0.8125rem;
}

.rm-step:active {
  background: #212529;
  color: #fff;
}

/* Prices stay on one line: a wrapped "$49.980" reads as two amounts. */
.rm-line-total {
  white-space: nowrap;
}

/* Inventory. One card per garment, the grid inside answering "how many of
 * exactly this" at a glance. */
.rm-figure-bad { background: #fbe9e7; color: #a8231a; }

.rm-units {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.1;
}

.rm-grid {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.rm-grid th[scope="col"] {
  padding: 0.25rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
}

.rm-grid th[scope="row"] {
  padding: 0.3125rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;
}

.rm-grid th[scope="row"] .rm-swatch {
  margin-right: 0.375rem;
  vertical-align: -2px;
}

.rm-grid td {
  padding: 0.3125rem 0.25rem;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 0.3125rem;
}

.rm-grid tbody tr:nth-child(odd) { background: #faf9f5; }

.rm-cell-going { color: #7a5200; background: #fef3c7; }
.rm-cell-gone { color: #a8231a; background: #fbe9e7; }

/* A combination that was never made, not one that ran out. Reading the two
 * the same would send her to reorder something that has never existed. */
.rm-cell-none { color: #adb5bd; font-weight: 400; }

/* The header holds two stacked lines and a figure, so it lays out as a row
 * rather than Bootstrap's default single line. */
.accordion-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Goods receipt. The garment that took delivery most recently sits above the
 * list, because a delivery usually continues the one before it. */
.rm-shortcut-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 0.5625rem;
  background: #e4eef8;
  color: #16457a;
  flex-shrink: 0;
}

/* The receipt grid. Cells are buttons, so the pad below can replace the
 * phone's keyboard; see static/js/receipt-grid.js. */
.rm-grid-input td {
  padding: 0.125rem;
}

.rm-grid-input tbody tr:nth-child(odd) {
  background: transparent;
}

/* Narrow on purpose. A jean is six numeric sizes, and every pixel this
 * column keeps comes off a cell that has to stay a 44px target. */
.rm-grid-input th[scope="row"] {
  width: 5rem;
  max-width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rm-cell {
  width: 100%;
  min-height: var(--rm-touch-target);
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: #faf9f5;
  color: #212529;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* A combination that was never made, drawn the way the stock list draws it:
 * not the same thing as one that ran out. */
.rm-cell[data-exists="0"] {
  border-style: dashed;
  border-color: #dee2e6;
  background: #fff;
}

.rm-cell[data-exists="0"]:not(.is-filled)::after {
  content: "·";
  color: #adb5bd;
  font-weight: 400;
}

.rm-cell.is-filled {
  border-color: transparent;
  background: #e3f3e9;
  color: #146b3c;
}

.rm-cell.is-new {
  background: #fef3c7;
  color: #7a5200;
}

.rm-cell.is-active {
  outline: 2.5px solid #16457a;
  outline-offset: -2px;
}

.rm-grid-hint {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.5rem;
  background: #fef3c7;
  color: #7a5200;
  font-size: 0.78125rem;
  font-weight: 600;
}

/* Room for the pad and the bar, in normal flow. Padding on <main> loses to
 * Bootstrap's py-3, which carries !important. */
.rm-grid-spacer {
  height: calc(19rem + env(safe-area-inset-bottom, 0px));
}

.rm-gridbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: #fff;
  border-top: 1px solid #dee2e6;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.rm-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: #f1f0ec;
}

.rm-pad-key {
  min-height: 46px;
  border: 1px solid #ced4da;
  border-radius: 0.5625rem;
  background: #fff;
  color: #212529;
  font-size: 1.25rem;
  font-weight: 600;
}

.rm-pad-key:active {
  background: #212529;
  color: #fff;
}

.rm-pad-next {
  border-color: #212529;
  background: #212529;
  color: #f8f9fa;
}

/* Reviewing a delivery before it lands. Green is what enters, amber is a
 * combination the catalogue does not have yet. */
.rm-grid-review td {
  padding: 0.25rem;
}

.rm-cell-in {
  background: #e3f3e9;
  color: #146b3c;
}

.rm-cell-fresh {
  background: #fef3c7;
  color: #7a5200;
}

.rm-newbox {
  padding: 0.75rem;
  border: 1px solid #f0d99a;
  border-radius: 0.6875rem;
  background: #fef3c7;
}

.rm-newbox-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #7a5200;
}

.rm-newbox-text {
  font-size: 0.78125rem;
  line-height: 1.4;
  color: #7a5200;
}

.rm-newbox-label {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #7a5200;
}

.rm-done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #e3f3e9;
  color: #146b3c;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* The way out of the picker when the box holds something nobody loaded. */
.rm-dashed {
  border: 1px dashed #adb5bd;
  color: #16457a;
  font-weight: 600;
}

/* Two notes that say something the screen cannot show: one explains, the
 * other warns. */
.rm-hint,
.rm-warn {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0.5625rem 0.6875rem;
  border-radius: 0.5625rem;
  font-size: 0.78125rem;
  line-height: 1.4;
}

.rm-hint {
  background: #e4eef8;
  color: #16457a;
}

.rm-warn {
  background: #fef3c7;
  color: #7a5200;
}

.rm-warn code {
  color: inherit;
}

/* A cell whose combination the catalogue never held. There is no SKU to
 * print, so unlike the goods receipt it cannot be typed into. */
.rm-cell[disabled] {
  opacity: 1;
}

/* The till close. Money is read against money, so every figure on these
 * screens is tabular. */
.rm-num {
  font-variant-numeric: tabular-nums;
}

.rm-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6c757d;
}

/* Counting the drawer, one denomination a row. */
.rm-count-row {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  height: 50px;
  border-top: 1px solid #f1f0ec;
}

.rm-count-label {
  width: 4rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.rm-count-sub {
  flex-grow: 1;
  font-size: 0.8125rem;
  color: #6c757d;
}

.rm-count-n {
  width: 1.75rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
}

.rm-count-row.is-empty .rm-count-label,
.rm-count-row.is-empty .rm-count-n {
  color: #adb5bd;
}

.rm-diff-ok { font-size: 0.75rem; color: #146b3c; font-weight: 600; }
.rm-diff-short { font-size: 0.75rem; color: #a8231a; font-weight: 600; }
.rm-diff-over { font-size: 0.75rem; color: #7a5200; font-weight: 600; }

/* The verdict. It is the one figure on the screen she has to act on, so it
 * carries its own colour rather than sitting in a list. */
.rm-balance {
  padding: 0.875rem;
  border: 1px solid;
  border-radius: 0.75rem;
}

.rm-balance-flat {
  padding: 0.8125rem;
  border: 0;
  border-radius: 0;
}

.rm-balance.is-square { border-color: #b9dfc8; background: #e3f3e9; color: #146b3c; }
.rm-balance.is-short { border-color: #f2c4bf; background: #fbe9e7; color: #a8231a; }
.rm-balance.is-over { border-color: #f0d99a; background: #fef3c7; color: #7a5200; }

.rm-balance.is-square .rm-balance-rule { border-bottom: 1px solid #b9dfc8; }
.rm-balance.is-short .rm-balance-rule { border-bottom: 1px solid #f2c4bf; }
.rm-balance.is-over .rm-balance-rule { border-bottom: 1px solid #f0d99a; }

.rm-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.rm-lock.is-square { background: #e3f3e9; color: #146b3c; }
.rm-lock.is-short { background: #fbe9e7; color: #a8231a; }
.rm-lock.is-over { background: #fef3c7; color: #7a5200; }

/* The account and the profile sheet. */
.rm-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #212529;
  color: #f8f9fa;
  font-size: 1.125rem;
  font-weight: 700;
  flex-shrink: 0;
}

.rm-chip {
  background: #e4eef8;
  color: #16457a;
  font-size: 0.75rem;
  font-weight: 700;
}

/* A row that leads somewhere, outside a Bootstrap list group. */
.rm-listrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--rm-touch-target);
  padding: 0.5rem 0.25rem;
  border-top: 1px solid #f1f0ec;
  border-bottom: 1px solid #f1f0ec;
  color: #212529;
  text-decoration: none;
}

/* Two ladders shown as themselves, because "sistema de tallas" is a phrase
 * from the database and `S, M, L, XL` is what is printed on the garment. */
.rm-choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8125rem;
  margin-bottom: 0.5625rem;
  border: 1px solid #ced4da;
  border-radius: 0.6875rem;
  background: #fff;
}

.rm-choice.is-chosen {
  border: 1.5px solid #212529;
  background: #faf9f5;
}

.rm-choice-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ced4da;
  flex-shrink: 0;
}

.rm-choice.is-chosen .rm-choice-dot {
  border: 6px solid #212529;
}

.rm-choice input:focus-visible + .rm-choice-dot {
  outline: 2px solid #16457a;
  outline-offset: 2px;
}

/* Something taken out of use. It is still listed, because this is the only
 * screen that shows it and the only one that brings it back. */
.rm-retired {
  opacity: 0.55;
}

/* A switch that is a real button in a real form: no JavaScript, and the
 * POST it sends is the same one a script would have had to fake. */
.rm-switch {
  position: relative;
  width: 42px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ced4da;
  flex-shrink: 0;
}

.rm-switch.is-on {
  background: #212529;
}

.rm-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

.rm-switch.is-on .rm-switch-knob {
  left: 20px;
}

/* The sales record. A share of the month, drawn rather than written: two
 * percentages side by side are two numbers, one bar against another is a
 * comparison. */
.rm-face-sm {
  width: 2.125rem;
  height: 2.125rem;
  font-size: 0.6875rem;
}

.rm-bar {
  display: block;
  height: 5px;
  margin-top: 0.3125rem;
  border-radius: 999px;
  background: #f1f0ec;
}

.rm-bar-fill {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: #212529;
}

/* The panel's one menu. It rises from the bottom because the avatar that
 * opens it sits in the corner furthest from the thumb, and everything else
 * that matters on these screens is already down here. */
.rm-navslot {
  width: var(--rm-touch-target);
}

.rm-sheet {
  height: auto;
  min-height: 70vh;
  max-height: 88vh;
  border-radius: 1.125rem 1.125rem 0 0;
  padding: 0 0 calc(0.875rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}

.rm-sheet-handle {
  width: 2.375rem;
  height: 4px;
  margin: 0.5625rem auto 0.1875rem;
  border-radius: 999px;
  background: #dee2e6;
}

.rm-sheet-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.125rem 0.875rem;
  border-bottom: 1px solid #dee2e6;
}

.rm-sheet-eyebrow {
  margin: 0.875rem 1.125rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6c757d;
}

.rm-sheet-row {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  min-height: 52px;
  padding: 0 1.125rem;
  color: #212529;
  font-size: 0.96875rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid #f1f0ec;
}

.rm-sheet-row > .fa-solid:first-child {
  color: #6c757d;
  width: 1.25rem;
  text-align: center;
}

.rm-sheet-chev {
  color: #adb5bd;
  font-size: 0.8125rem;
}

.rm-sheet-danger,
.rm-sheet-danger > .fa-solid:first-child {
  color: #a8231a;
}

.rm-sheet-out {
  margin-top: 0.875rem;
  border-top: 1px solid #dee2e6;
}

/* Counting the rail. The cell shows the system's figure in grey until it is
 * counted, then hers against a colour — she is standing at the rail, so that
 * is the moment to notice a difference. */
.rm-count-cell {
  color: #adb5bd;
  font-weight: 400;
}

.rm-count-cell.is-counted {
  font-weight: 700;
}

.rm-count-cell.is-agreed {
  background: #e3f3e9;
  color: #146b3c;
}

.rm-count-cell.is-off {
  background: #fef3c7;
  color: #7a5200;
}

/* The way back. One shape on every screen, because the only way out used to
 * be tapping the shop's name in the top bar — which the developer knew about
 * because he built it. */
.rm-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.375rem;
  padding: 0 0.875rem 0 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 999px;
  background: #fff;
  color: #212529;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.rm-back:hover,
.rm-back:active {
  background: #212529;
  border-color: #212529;
  color: #f8f9fa;
}

/* The two ways out of the login. Minor next to the button they sit under, and
 * still a 44px tap: they are the screens somebody reaches while locked out. */
.rm-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--rm-touch-target);
  color: #6c757d;
  font-size: 0.875rem;
  text-decoration: none;
}

.rm-alt:hover,
.rm-alt:active {
  color: #212529;
  text-decoration: underline;
}

/* iOS zooms any control under 16px on focus, and a checkbox drags the whole
 * login form with it. */
.rm-check {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1875rem;
}