/*
 * Moving Box Tracker — custom style layer.
 *
 * Loaded after the vendored, unmodified bootstrap.min.css. It supplies only the
 * pieces Bootstrap does not ship — the fixed bottom navigation "dock", the small
 * status dot, the avatar, and a handful of utility helpers — plus the few button
 * and form-control size variants the UI relies on. Keeping these here (rather
 * than editing the vendored Bootstrap) means Bootstrap can be re-vendored by
 * dropping in a new bootstrap.min.css with no merge.
 *
 * No build step: this file is hand-authored and served directly from /static.
 */

/* ── App shell ─────────────────────────────────────────────────────────────
 * The UI is a single, centered mobile column. Content clears the sticky navbar
 * at the top and the fixed dock at the bottom.
 */
.app-container {
  max-width: 28rem;
  margin-inline: auto;
}

/* Reserve space at the bottom of chromed pages so the fixed dock never covers
 * the last of the content. */
body.has-dock {
  padding-bottom: 5rem;
}

/* ── Bottom dock (fixed tab bar) ───────────────────────────────────────────
 * Four equal-width primary sections, icon over label, fixed to the viewport
 * bottom. Replaces the daisyUI `dock` component.
 */
.dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  height: 4rem;
  background-color: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
}

.dock > a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.25rem;
  color: var(--bs-secondary-color);
  text-decoration: none;
  font-size: 0.75rem;
}

.dock > a:hover {
  color: var(--bs-body-color);
}

.dock > a.dock-active {
  color: var(--bs-primary);
}

.dock-label {
  line-height: 1;
}

/* ── Status dot ────────────────────────────────────────────────────────────
 * A small filled circle used to signal a box's packing status. Colour comes
 * from a Bootstrap text-* colour on the element (e.g. `text-success`).
 */
.status {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: currentColor;
  vertical-align: middle;
}

/* ── Avatar ────────────────────────────────────────────────────────────────
 * Circular identity badge. The placeholder variant centers initials over a
 * caller-supplied background colour.
 */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  color: #fff;
  font-weight: 600;
}

/* ── Navbar layout ─────────────────────────────────────────────────────────*/
.navbar > .app-navbar-grid {
  display: grid;
  /* MBT-zsqzb: center track uses 1fr (not auto) so it can shrink when the
     title is long, keeping the right-hand action inline and preventing row
     wrap. Side tracks keep a 4.75rem floor so Back/Done remain tappable. */
  grid-template-columns: minmax(4.75rem, 1fr) minmax(0, 2fr) minmax(4.75rem, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.app-navbar-left,
.app-navbar-right {
  min-width: 0;
}

.app-navbar-right {
  display: flex;
  justify-content: flex-end;
}

/* min-width:0/max-width:100% let the back link shrink to its grid track
   instead of spilling into the centered title cell; the child span (below)
   carries the actual ellipsis clipping since overflow/text-overflow have no
   effect on an inline <a> whose content is a nowrap text run. */
.app-navbar-left a {
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}

.app-navbar-left a span {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Same min-width:0/max-width:100% shrink-to-track technique as
   .app-navbar-left a, applied to the action capsule so a long action label
   clips instead of overflowing into the title cell. */
.app-navbar-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 1rem;
  border-radius: 50rem;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}

/* Excludes .spinner-border: navbarExternalFormAction's loading variant emits
   a spinner-border indicator span alongside the data-loading-label text span
   inside the same .app-navbar-action button, and this rule's min-width:0 /
   overflow:hidden would otherwise let the spinner shrink below its 1rem box
   and clip into a partial arc under width pressure. */
.app-navbar-action span:not(.spinner-border) {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* MBT-zsqzb: navbar-brand becomes a flex row containing the head+tail spans
   for the middle-truncation technique. justify-content:center keeps the text
   centered; min-width:0 allows the flex container to shrink within the grid
   center track. overflow:hidden clips any overflow from the tail span within
   the center track, ensuring Done is never displaced even on arbitrarily long
   user-supplied box names. margin-right:0 overrides Bootstrap's default 1rem
   right margin, which would otherwise cause an asymmetric centering offset. */
.navbar .navbar-brand {
  display: flex;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  margin-right: 0;
}

/* Head span: truncates with an ellipsis when the title is too long. */
.app-navbar-title-head {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}

/* Tail span: pinned so the trailing characters stay anchored as the head
   truncates. If the tail itself is wider than the remaining track space it is
   clipped by the parent .navbar-brand overflow:hidden guard; Done is never
   displaced in either case. */
.app-navbar-title-tail {
  white-space: pre;
  flex-shrink: 0;
}

/* ── Button size / shape variants Bootstrap lacks ──────────────────────────*/

/* Transparent button used for icon-only secondary actions. */
.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--bs-body-color);
}

.btn-ghost:hover {
  background-color: var(--bs-secondary-bg);
  border-color: transparent;
}

.btn-ghost:disabled,
.btn-ghost.disabled {
  color: var(--bs-secondary-color);
  background-color: transparent;
  border-color: transparent;
  opacity: 0.35;
}

/* Extra-small button, a notch below .btn-sm. */
.btn-xs {
  --bs-btn-padding-y: 0.1rem;
  --bs-btn-padding-x: 0.4rem;
  --bs-btn-font-size: 0.75rem;
  --bs-btn-border-radius: 0.25rem;
}

/* Square and circular icon buttons keep equal width/height. */
.btn-square {
  aspect-ratio: 1 / 1;
  padding-inline: 0;
}

.btn-circle {
  aspect-ratio: 1 / 1;
  padding-inline: 0;
  border-radius: 50%;
}

/* Non-nav tappable controls should meet a 40px minimum in both dimensions. */
main .btn {
  min-width: 40px;
  min-height: 40px;
}

.tap-target {
  min-width: 40px;
  min-height: 40px;
}

.btn-square.tap-target,
.btn-circle.tap-target {
  width: 40px;
  height: 40px;
}

/* ── Photo workflow ────────────────────────────────────────────────────────*/
.photo-tile {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  width: 5.5rem;
  height: 5.5rem;
  overflow: hidden;
  color: var(--bs-secondary-color);
  background-color: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  font: inherit;
}

.photo-tile-add {
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
  color: var(--bs-primary);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.photo-preview {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 22rem;
  object-fit: cover;
}

.file-control-lg {
  min-height: 48px;
  padding-block: 0.625rem;
}

/* Keep switch rows easy to tap while leaving Bootstrap's switch dimensions
 * alone. The visual control stays compact; the wrapping label carries the
 * mobile hit area. */
.switch-tap-target {
  min-height: 40px;
  cursor: pointer;
}

.switch-tap-target .form-check-input {
  margin-top: 0;
}

/* ── Form-control size / numeric variants ──────────────────────────────────*/

/* Extra-small text input to match the compact dimension fields. */
.form-control-xs,
.form-select-xs {
  min-height: calc(1.5em + 0.25rem + 2px);
  padding: 0.125rem 0.4rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
}

/* ── Badge size variant ────────────────────────────────────────────────────*/
.badge-sm {
  padding: 0.2em 0.45em;
  font-size: 0.7em;
}

/* ── Box attribute colours ─────────────────────────────────────────────────
 * Fragile and heavy indicators appear on detail, edit, and stats surfaces.
 * Keep their colours semantic and consistent across every icon usage there.
 */
.box-attr-fragile {
  color: var(--bs-info);
}

.box-attr-heavy {
  color: var(--bs-danger);
}

/* ── Room icons / picker ──────────────────────────────────────────────────*/
.room-icon {
  width: 1.15rem;
  text-align: center;
  color: var(--bs-secondary-color);
}

.room-picker {
  position: relative;
}

.room-picker-select-enhanced {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.room-picker-enhanced {
  position: relative;
}

.room-picker-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  background-image: none;
  cursor: pointer;
  list-style: none;
}

.room-picker-summary::-webkit-details-marker {
  display: none;
}

.room-picker-summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}

.room-picker-menu {
  position: absolute;
  z-index: 1040;
  inset-inline: 0;
  max-height: 16rem;
  margin-top: 0.25rem;
  overflow: auto;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow);
}

.room-picker-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  color: var(--bs-body-color);
  background: transparent;
  border: 0;
  text-align: left;
}

.room-picker-option:hover,
.room-picker-option:focus {
  background-color: var(--bs-secondary-bg);
}

.room-picker-option[aria-selected="true"] {
  color: var(--bs-primary-text-emphasis);
  background-color: var(--bs-primary-bg-subtle);
}

/* ── Small typographic / layout helpers ────────────────────────────────────*/

/* Tabular figures keep numeric columns (box numbers, dimensions) aligned. */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Brand/display heading. The custom display typeface was dropped with the rest
 * of the web fonts; this keeps the heading distinct using the system stack. */
.display-font {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Sub-small text sizes Bootstrap does not provide as utilities. */
.text-xs {
  font-size: 0.75rem;
}

.text-2xs {
  font-size: 0.625rem;
}

/* Allow a flex child to shrink below its content width so siblings can truncate. */
.min-w-0 {
  min-width: 0;
}

/* Fixed narrow width for the inline dimension inputs (L × W × H). */
.w-dim {
  width: 4rem;
}

/* Subtle press feedback on tappable cards. */
.press {
  transition: transform 0.06s ease;
}

.press:active {
  transform: scale(0.99);
}

/* ── Boxes list cards ─────────────────────────────────────────────────────*/
.box-list-card {
  --box-room-color: #d1d5db;
  position: relative;
  overflow: hidden;
}

.box-list-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: 0.45rem;
  background: var(--box-room-color);
}

.box-list-card > * {
  position: relative;
  z-index: 1;
}

.box-list-card-main {
  display: block;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
}

.box-list-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  max-width: 8rem;
}

.box-list-capsules {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.box-list-capsule {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  min-height: 1.6rem;
  padding: 0.25rem 0.5rem;
  overflow: hidden;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
}

.box-list-capsule i {
  flex: 0 0 auto;
  width: 0.875rem;
  text-align: center;
}

.box-list-review-action {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.85rem;
  padding: 0.45rem 0.5rem 0.45rem 0.75rem;
  margin: 0 0.75rem 0.75rem 1rem;
  color: var(--bs-success-text-emphasis);
  background: var(--bs-success-bg-subtle);
  border: 1px solid var(--bs-success-border-subtle);
  border-radius: var(--bs-border-radius);
}

.box-list-review-label {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  gap: 0.45rem;
  overflow: hidden;
  font-size: 0.95rem;
  font-weight: 600;
}

.box-list-review-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-list-review-button {
  display: inline-flex;
  flex: 0 0 33.333%;
  align-items: center;
  justify-content: center;
  max-width: 33.333%;
  min-height: 2rem;
  padding-inline: 0.5rem;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  background: var(--bs-success);
  border-radius: var(--bs-border-radius);
}

/* ── Boxes filter screen ──────────────────────────────────────────────────*/
.filter-row-label {
  letter-spacing: 0.02em;
}

.filter-switch {
  position: relative;
  flex: 0 0 auto;
  width: 3.25rem;
  height: 1.85rem;
  background: var(--bs-secondary-color);
  border-radius: 999px;
  opacity: 0.65;
}

.filter-switch::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.45rem;
  height: 1.45rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(33 37 41 / 0.25);
}

.filter-switch-on {
  background: var(--bs-primary);
  opacity: 1;
}

.filter-switch-on::before {
  transform: translateX(1.4rem);
}

/* ── Native <progress> bar ─────────────────────────────────────────────────
 * Bootstrap styles only its div-based .progress; this styles the native
 * <progress> element used on the Stats screen, where value/max come straight
 * from the view model (no precomputed percentage needed).
 */
progress.progressbar {
  display: block;
  width: 100%;
  height: 0.5rem;
  border: 0;
  border-radius: 0.25rem;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}

progress.progressbar::-webkit-progress-bar {
  background-color: var(--bs-secondary-bg);
  border-radius: 0.25rem;
}

progress.progressbar::-webkit-progress-value {
  background-color: var(--bs-success);
  border-radius: 0.25rem;
}

progress.progressbar::-moz-progress-bar {
  background-color: var(--bs-success);
  border-radius: 0.25rem;
}

/* ── Photo recommendations review ─────────────────────────────────────────*/

/* Layout-only override for the box-edit "Recommendations ready" prompt's
 * Review link. The element also carries Bootstrap's `btn btn-sm` classes;
 * since all three selectors are single-class (equal specificity), this rule
 * wins only because app.css is linked after bootstrap.min.css in
 * layout.templ. If that link order ever changes, this override reverts.
 */
.recommendation-review-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 33.333%;
  max-width: 33.333%;
  min-height: 2rem;
  font-size: 1rem;
  white-space: nowrap;
}

.recommendation-card {
  border-color: var(--bs-border-color);
  transition:
    border-color 0.12s ease,
    background-color 0.12s ease;
}

.recommendation-card.is-accepted {
  border-color: var(--bs-primary-border-subtle);
  background-color: var(--bs-primary-bg-subtle);
}

.recommendation-toggle-form {
  flex: 0 0 auto;
}

.accept-switch {
  min-height: 40px;
}

.comparison-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.value-box {
  min-height: 3rem;
  padding: 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-body-bg);
  overflow-wrap: anywhere;
}

.value-box-original {
  color: var(--bs-secondary-color);
  background-color: var(--bs-tertiary-bg);
}

.value-box-recommended {
  border-color: var(--bs-primary-border-subtle);
}

.content-choice {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-body-bg);
}

.content-choice.is-accepted {
  border-color: var(--bs-primary-border-subtle);
  background-color: var(--bs-primary-bg-subtle);
}

.recommendation-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  color: var(--bs-secondary-color);
  background-color: var(--bs-secondary-bg);
  border-radius: 50%;
  flex: 0 0 auto;
}

/* ── MBT-hc11e static utility classes ─────────────────────────────────────
 * Purpose-named replacements for one-off inline styles that formerly lived
 * directly on templ elements. Grouping them here keeps the CSP's style-src
 * free of 'unsafe-inline' (see MBT-hpbz4).
 */
.app-icon-tile {
  width: 2.75rem;
  height: 2.75rem;
}

.app-icon-select {
  width: 7.5rem;
}

.app-photo-thumb {
  width: 7rem;
  height: 7rem;
}

.app-detail-dot {
  width: 0.375rem;
  height: 0.375rem;
}

.app-ai-dot {
  width: 0.6rem;
  height: 0.6rem;
}

.app-notes-preline {
  white-space: pre-line;
}

.app-label-size-grid {
  grid-template-columns: 1fr 1fr;
}

.app-label-icon-cell {
  width: 1rem;
}

.app-stats-label-sm {
  width: 5rem;
}

.app-stats-label-lg {
  width: 7rem;
}

.app-stats-count {
  width: 1.5rem;
}

.app-bar-track {
  height: 0.625rem;
}

.app-weekday-chart {
  height: 6rem;
}

.app-hello-card {
  max-width: 26rem;
}

.app-goodbye-card {
  max-width: 24rem;
}

.app-goodbye-icon {
  width: 5rem;
  height: 5rem;
  background: rgba(var(--bs-primary-rgb), .15);
}

.app-avatar-size {
  width: 5rem;
  height: 5rem;
}

/* BEGIN generated app-w-pct / app-h-pct — MBT-hc11e
 * Machine-authored width/height percent utility classes, one rule per whole
 * percent 0..100, generated from statsBarWidthClass/statsBarHeightClass's
 * fmt.Sprintf("app-w-pct-%d", n) / fmt.Sprintf("app-h-pct-%d", n) output.
 * Regenerate by re-running the small Python loop that produced this block
 * (see MBT-hc11e implementation notes) rather than hand-editing.
 */
.app-w-pct-0 { width: 0%; }
.app-w-pct-1 { width: 1%; }
.app-w-pct-2 { width: 2%; }
.app-w-pct-3 { width: 3%; }
.app-w-pct-4 { width: 4%; }
.app-w-pct-5 { width: 5%; }
.app-w-pct-6 { width: 6%; }
.app-w-pct-7 { width: 7%; }
.app-w-pct-8 { width: 8%; }
.app-w-pct-9 { width: 9%; }
.app-w-pct-10 { width: 10%; }
.app-w-pct-11 { width: 11%; }
.app-w-pct-12 { width: 12%; }
.app-w-pct-13 { width: 13%; }
.app-w-pct-14 { width: 14%; }
.app-w-pct-15 { width: 15%; }
.app-w-pct-16 { width: 16%; }
.app-w-pct-17 { width: 17%; }
.app-w-pct-18 { width: 18%; }
.app-w-pct-19 { width: 19%; }
.app-w-pct-20 { width: 20%; }
.app-w-pct-21 { width: 21%; }
.app-w-pct-22 { width: 22%; }
.app-w-pct-23 { width: 23%; }
.app-w-pct-24 { width: 24%; }
.app-w-pct-25 { width: 25%; }
.app-w-pct-26 { width: 26%; }
.app-w-pct-27 { width: 27%; }
.app-w-pct-28 { width: 28%; }
.app-w-pct-29 { width: 29%; }
.app-w-pct-30 { width: 30%; }
.app-w-pct-31 { width: 31%; }
.app-w-pct-32 { width: 32%; }
.app-w-pct-33 { width: 33%; }
.app-w-pct-34 { width: 34%; }
.app-w-pct-35 { width: 35%; }
.app-w-pct-36 { width: 36%; }
.app-w-pct-37 { width: 37%; }
.app-w-pct-38 { width: 38%; }
.app-w-pct-39 { width: 39%; }
.app-w-pct-40 { width: 40%; }
.app-w-pct-41 { width: 41%; }
.app-w-pct-42 { width: 42%; }
.app-w-pct-43 { width: 43%; }
.app-w-pct-44 { width: 44%; }
.app-w-pct-45 { width: 45%; }
.app-w-pct-46 { width: 46%; }
.app-w-pct-47 { width: 47%; }
.app-w-pct-48 { width: 48%; }
.app-w-pct-49 { width: 49%; }
.app-w-pct-50 { width: 50%; }
.app-w-pct-51 { width: 51%; }
.app-w-pct-52 { width: 52%; }
.app-w-pct-53 { width: 53%; }
.app-w-pct-54 { width: 54%; }
.app-w-pct-55 { width: 55%; }
.app-w-pct-56 { width: 56%; }
.app-w-pct-57 { width: 57%; }
.app-w-pct-58 { width: 58%; }
.app-w-pct-59 { width: 59%; }
.app-w-pct-60 { width: 60%; }
.app-w-pct-61 { width: 61%; }
.app-w-pct-62 { width: 62%; }
.app-w-pct-63 { width: 63%; }
.app-w-pct-64 { width: 64%; }
.app-w-pct-65 { width: 65%; }
.app-w-pct-66 { width: 66%; }
.app-w-pct-67 { width: 67%; }
.app-w-pct-68 { width: 68%; }
.app-w-pct-69 { width: 69%; }
.app-w-pct-70 { width: 70%; }
.app-w-pct-71 { width: 71%; }
.app-w-pct-72 { width: 72%; }
.app-w-pct-73 { width: 73%; }
.app-w-pct-74 { width: 74%; }
.app-w-pct-75 { width: 75%; }
.app-w-pct-76 { width: 76%; }
.app-w-pct-77 { width: 77%; }
.app-w-pct-78 { width: 78%; }
.app-w-pct-79 { width: 79%; }
.app-w-pct-80 { width: 80%; }
.app-w-pct-81 { width: 81%; }
.app-w-pct-82 { width: 82%; }
.app-w-pct-83 { width: 83%; }
.app-w-pct-84 { width: 84%; }
.app-w-pct-85 { width: 85%; }
.app-w-pct-86 { width: 86%; }
.app-w-pct-87 { width: 87%; }
.app-w-pct-88 { width: 88%; }
.app-w-pct-89 { width: 89%; }
.app-w-pct-90 { width: 90%; }
.app-w-pct-91 { width: 91%; }
.app-w-pct-92 { width: 92%; }
.app-w-pct-93 { width: 93%; }
.app-w-pct-94 { width: 94%; }
.app-w-pct-95 { width: 95%; }
.app-w-pct-96 { width: 96%; }
.app-w-pct-97 { width: 97%; }
.app-w-pct-98 { width: 98%; }
.app-w-pct-99 { width: 99%; }
.app-w-pct-100 { width: 100%; }
.app-h-pct-0 { height: 0%; }
.app-h-pct-1 { height: 1%; }
.app-h-pct-2 { height: 2%; }
.app-h-pct-3 { height: 3%; }
.app-h-pct-4 { height: 4%; }
.app-h-pct-5 { height: 5%; }
.app-h-pct-6 { height: 6%; }
.app-h-pct-7 { height: 7%; }
.app-h-pct-8 { height: 8%; }
.app-h-pct-9 { height: 9%; }
.app-h-pct-10 { height: 10%; }
.app-h-pct-11 { height: 11%; }
.app-h-pct-12 { height: 12%; }
.app-h-pct-13 { height: 13%; }
.app-h-pct-14 { height: 14%; }
.app-h-pct-15 { height: 15%; }
.app-h-pct-16 { height: 16%; }
.app-h-pct-17 { height: 17%; }
.app-h-pct-18 { height: 18%; }
.app-h-pct-19 { height: 19%; }
.app-h-pct-20 { height: 20%; }
.app-h-pct-21 { height: 21%; }
.app-h-pct-22 { height: 22%; }
.app-h-pct-23 { height: 23%; }
.app-h-pct-24 { height: 24%; }
.app-h-pct-25 { height: 25%; }
.app-h-pct-26 { height: 26%; }
.app-h-pct-27 { height: 27%; }
.app-h-pct-28 { height: 28%; }
.app-h-pct-29 { height: 29%; }
.app-h-pct-30 { height: 30%; }
.app-h-pct-31 { height: 31%; }
.app-h-pct-32 { height: 32%; }
.app-h-pct-33 { height: 33%; }
.app-h-pct-34 { height: 34%; }
.app-h-pct-35 { height: 35%; }
.app-h-pct-36 { height: 36%; }
.app-h-pct-37 { height: 37%; }
.app-h-pct-38 { height: 38%; }
.app-h-pct-39 { height: 39%; }
.app-h-pct-40 { height: 40%; }
.app-h-pct-41 { height: 41%; }
.app-h-pct-42 { height: 42%; }
.app-h-pct-43 { height: 43%; }
.app-h-pct-44 { height: 44%; }
.app-h-pct-45 { height: 45%; }
.app-h-pct-46 { height: 46%; }
.app-h-pct-47 { height: 47%; }
.app-h-pct-48 { height: 48%; }
.app-h-pct-49 { height: 49%; }
.app-h-pct-50 { height: 50%; }
.app-h-pct-51 { height: 51%; }
.app-h-pct-52 { height: 52%; }
.app-h-pct-53 { height: 53%; }
.app-h-pct-54 { height: 54%; }
.app-h-pct-55 { height: 55%; }
.app-h-pct-56 { height: 56%; }
.app-h-pct-57 { height: 57%; }
.app-h-pct-58 { height: 58%; }
.app-h-pct-59 { height: 59%; }
.app-h-pct-60 { height: 60%; }
.app-h-pct-61 { height: 61%; }
.app-h-pct-62 { height: 62%; }
.app-h-pct-63 { height: 63%; }
.app-h-pct-64 { height: 64%; }
.app-h-pct-65 { height: 65%; }
.app-h-pct-66 { height: 66%; }
.app-h-pct-67 { height: 67%; }
.app-h-pct-68 { height: 68%; }
.app-h-pct-69 { height: 69%; }
.app-h-pct-70 { height: 70%; }
.app-h-pct-71 { height: 71%; }
.app-h-pct-72 { height: 72%; }
.app-h-pct-73 { height: 73%; }
.app-h-pct-74 { height: 74%; }
.app-h-pct-75 { height: 75%; }
.app-h-pct-76 { height: 76%; }
.app-h-pct-77 { height: 77%; }
.app-h-pct-78 { height: 78%; }
.app-h-pct-79 { height: 79%; }
.app-h-pct-80 { height: 80%; }
.app-h-pct-81 { height: 81%; }
.app-h-pct-82 { height: 82%; }
.app-h-pct-83 { height: 83%; }
.app-h-pct-84 { height: 84%; }
.app-h-pct-85 { height: 85%; }
.app-h-pct-86 { height: 86%; }
.app-h-pct-87 { height: 87%; }
.app-h-pct-88 { height: 88%; }
.app-h-pct-89 { height: 89%; }
.app-h-pct-90 { height: 90%; }
.app-h-pct-91 { height: 91%; }
.app-h-pct-92 { height: 92%; }
.app-h-pct-93 { height: 93%; }
.app-h-pct-94 { height: 94%; }
.app-h-pct-95 { height: 95%; }
.app-h-pct-96 { height: 96%; }
.app-h-pct-97 { height: 97%; }
.app-h-pct-98 { height: 98%; }
.app-h-pct-99 { height: 99%; }
.app-h-pct-100 { height: 100%; }
/* END generated app-w-pct / app-h-pct — MBT-hc11e */

/* app-avatar-cN — one background-color rule per accountColors palette entry
 * (account.go). Only background-color is set; .avatar-placeholder supplies
 * the white icon color and app-avatar-size supplies the dimensions.
 */
.app-avatar-c0 { background-color: #084298; }
.app-avatar-c1 { background-color: #41464b; }
.app-avatar-c2 { background-color: #0f5132; }
.app-avatar-c3 { background-color: #055160; }
.app-avatar-c4 { background-color: #664d03; }
.app-avatar-c5 { background-color: #842029; }
.app-avatar-c6 { background-color: #052c65; }
.app-avatar-c7 { background-color: #2b2f32; }
.app-avatar-c8 { background-color: #0a3622; }
.app-avatar-c9 { background-color: #087990; }
.app-avatar-c10 { background-color: #997404; }
.app-avatar-c11 { background-color: #58151c; }