/* DMS's additions to the template's own styles. Loaded last on every page. */

/* Brand page: the template ran its six colour swatches off the side of a
   phone. They wrap to three across instead. */
@media (max-width: 767px) {
  .flex.w-full:has(> .flex-1 > .aspect-\[170\/265\]) { flex-wrap: wrap; row-gap: 2.5rem; }
  .flex.w-full:has(> .flex-1 > .aspect-\[170\/265\]) > .flex-1 { flex: 0 0 calc((100% - 4rem) / 3); min-width: 0; }
  .flex.w-full:has(> .flex-1 > .aspect-\[170\/265\]) span { overflow-wrap: anywhere; }
}

/* The contract address, pinned to the corner of every page. Rendered only
   when CA is set in tools/copy.mjs. */
.quiet-ca { position: fixed; right: 20px; bottom: 20px; z-index: 97; display: inline-flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 40px); height: 46px; padding: 0 18px; border-radius: 999px; background: #000; color: #ECE7E0; border: 1px solid #47140B;
  font: 500 12px/1 "Roboto Mono", monospace; letter-spacing: .04em; }
.quiet-ca span { color: #FFBC09; }
.quiet-ca code { font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) { .quiet-ca { right: 14px; bottom: 14px; height: 42px; padding: 0 14px; max-width: calc(100vw - 28px); } }

/* The coin glyph the template put on its app buttons does not belong here. */
a > div > svg[viewBox="0 0 20 32"],
button > div > svg[viewBox="0 0 20 32"] { display: none; }

/* The footer's last line is a sentence here, not two words; let it wrap on a phone. */
footer a.uline.mt-20 { white-space: normal; max-width: 100%; }

/* Home hero: the X button and the contract address, under the Lock button
   (added by /links.js). The corner pill steps aside on that page. */
.dms-links { display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; z-index: 3; }
.dms-x, .dms-ca { height: 50px; border-radius: 999px; background: #000; color: #ECE7E0; border: 1px solid #47140B; cursor: pointer;
  transition: border-color .3s ease-out, color .3s ease-out; }
.dms-x { width: 50px; display: grid; place-items: center; }
.dms-x svg { width: 19px; height: 19px; }
.dms-ca { display: inline-flex; align-items: center; gap: 10px; padding: 0 20px; font: 500 13px/1 "Roboto Mono", monospace; letter-spacing: .04em; }
.dms-ca span, .quiet-ca span { color: #FFBC09; }
.dms-ca code { font: inherit; }
.dms-ca i { font-style: normal; text-transform: uppercase; font-size: 11px; opacity: .6; padding-left: 10px; border-left: 1px solid #47140B; min-width: 62px; text-align: left; }
.dms-x:hover, .dms-ca:hover, .quiet-ca:hover { border-color: #FFBC09; color: #FFBC09; }
.dms-home .quiet-ca { display: none; }
.quiet-ca { cursor: pointer; }