/* stoxie — the app screen.
 *
 * The page itself is the template's legal layout: a pinned title on the left,
 * content items down the right. Inputs, buttons and type all come from the
 * template's own stylesheet. What is defined here is only what the template
 * has no equivalent for — a holdings grid, an activity list, and a status
 * note — written with the same tokens so they read as part of the same site.
 */

#legal .app-hide { display: none !important; }

/* ---- who you are --------------------------------------------------------- */
#legal .app-who {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}
#legal .app-who img {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  display: block;
}
#legal .app-address {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(251, 251, 244, .12);
  border-bottom: 1px solid rgba(251, 251, 244, .12);
}
#legal .app-mono {
  font-family: var(--f-body);
  font-size: 1.4rem;
  letter-spacing: .04em;
  word-break: break-all;
  opacity: .7;
}
#legal .app-copy {
  font-size: 1.3rem;
  padding: .4rem 1rem;
  border: 1px solid rgba(251, 251, 244, .2);
  border-radius: .4rem;
  background: transparent;
  color: var(--c-white);
  cursor: pointer;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
#legal .app-copy:hover { border-color: var(--c-white); background: rgba(251, 251, 244, .08); }
#legal .app-gas { font-size: 1.3rem; opacity: .5; }

/* ---- holdings ------------------------------------------------------------ */
#legal .app-holdings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(251, 251, 244, .12);
  border: 1px solid rgba(251, 251, 244, .12);
  margin-top: 1.6rem;
}
#legal .app-hold {
  background: var(--c-black);
  border: 0;
  padding: 1.6rem 1.4rem;
  text-align: left;
  color: var(--c-white);
  cursor: pointer;
  transition: background .4s var(--ease);
}
#legal .app-hold:hover, #legal .app-hold.sel { background: rgba(251, 251, 244, .1); }
#legal .app-hold-symbol { font-family: var(--f-heading); font-size: 1.8rem; }
#legal .app-hold-amount { font-size: 1.6rem; margin-top: .4rem; }
#legal .app-hold-name {
  font-size: 1.2rem;
  opacity: .45;
  margin-top: .4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- activity ------------------------------------------------------------ */
#legal .app-row {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  gap: 1.2rem;
  align-items: baseline;
  padding: 1.4rem 0;
  border-bottom: 1px solid rgba(251, 251, 244, .1);
  font-size: 1.4rem;
}
#legal .app-dir { font-size: 1.6rem; opacity: .6; }
#legal .app-dir.out { color: var(--c-orange); }
#legal .app-dir.in { color: var(--c-green); }
#legal .app-status {
  font-size: 1.2rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .5;
  text-decoration: none;
  color: inherit;
}
#legal .app-status.completed { color: var(--c-green); opacity: 1; }
#legal .app-status.failed { color: var(--c-orange); opacity: 1; }
#legal a.app-status:hover { text-decoration: underline; }

/* ---- the template's form and button styles, re-scoped ---------------------
 * Both are written scoped to the pages that first used them, so on this page
 * the browser defaults win: white input boxes, and a button whose text is
 * --c-black on a black section. Same values, this page's scope.
 */
#legal .form-input {
  display: block;
  width: 100%;
  min-width: 0;
  background: transparent;
  height: 6.2rem;
  padding: 0 2rem .5rem;
  font-family: var(--f-body);
  font-size: 1.6rem;
  color: var(--c-white);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  border-radius: 0;
  outline: none;
  transition: border-color 1s var(--ease);
}
#legal .form-input:focus { border-color: #ffffff4d; }
#legal .form-input::placeholder { color: #ffffff4d; }
#legal .form-label { min-width: 0; }

#legal .btn { color: var(--c-white); }
#legal .btn .btn-bg { background: var(--c-white); }
#legal .btn .btn-dot-inner { background: var(--c-white); }
#legal .btn:hover { color: var(--c-black); }
#legal .btn:hover .btn-dot-inner { background: var(--c-black); }
#legal .btn[disabled] { opacity: .4; pointer-events: none; }

/* ---- send ---------------------------------------------------------------- */
#legal .app-send-grid {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr;
  gap: 2rem;
  margin: 1.6rem 0 2.4rem;
}
/* The template styles inputs but has no select; borrow the input's rules. */
#legal select.form-input {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 3rem;
  background-image: linear-gradient(45deg, transparent 50%, rgba(251, 251, 244, .5) 50%),
                    linear-gradient(135deg, rgba(251, 251, 244, .5) 50%, transparent 50%);
  background-position: right 1.4rem center, right 1rem center;
  background-size: .5rem .5rem, .5rem .5rem;
  background-repeat: no-repeat;
}
#legal select.form-input option { background: var(--c-black); color: var(--c-white); }
#legal .app-note {
  margin-top: 1.6rem;
  padding: 1.4rem 1.6rem;
  font-size: 1.4rem;
  line-height: 150%;
  border-left: 2px solid rgba(251, 251, 244, .3);
}
#legal .app-note.good { border-left-color: var(--c-green); }
#legal .app-note.bad { border-left-color: var(--c-orange); }
#legal .app-note a { color: inherit; }
#legal .app-empty { font-size: 1.4rem; opacity: .45; margin-top: 1.6rem; }

@media (max-width: 1099px) {
  #legal .app-holdings { grid-template-columns: repeat(2, 1fr); }
  #legal .app-send-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ---- the registry grid ----------------------------------------------------
 * The archive's tiles were built around a case-study thumbnail. A token has no
 * artwork, so the tile becomes a surface instead of a hole — same geometry,
 * same corner radius, nothing pretending to be an image that is not there.
 */
#work .project-media:empty {
  background: linear-gradient(155deg, rgba(251, 251, 244, .08), rgba(251, 251, 244, .015));
  border: 1px solid rgba(251, 251, 244, .1);
  border-radius: .4rem;
}
#work .work-grid-project:hover .project-media:empty { border-color: rgba(251, 251, 244, .28); }
/* The archive reveals a card's text on hover, because the thumbnail carried the
 * tile on its own. Here the text is the tile, so it stays up; the hover
 * stagger still plays, just from something already legible.
 */
#work .work-grid .project .project-text { opacity: 1; transform: translateY(0); }

/* ---- the section-two showreel block ---------------------------------------
 * Its video is gone, and an empty animated rectangle in its place reads as a
 * broken image. The block stays in the DOM because the section's scroll
 * timeline is built around it and a missing trigger breaks the whole section;
 * it is simply never drawn.
 */
#home .exp .exp-btn-block-wrapper { display: none; }

/* ---- cursor image trail, off ---------------------------------------------
 * Hovering the last word of a section heading used to spray company cards out
 * from under the pointer. It reads as a glitch rather than a flourish, so the
 * trail is disabled — by taking the hover target out of the pointer's reach
 * rather than by deleting markup, because the Ripple component counts the
 * figures it finds and throws on an empty set.
 * -------------------------------------------------------------------------- */
#home .exp .exp-images { display: none !important; }
#home .exp .exp-title-hover { pointer-events: none !important; }
#services .gallery .gallery-cursor { display: none !important; }

/* ---- the company grid -----------------------------------------------------
 * The template sizes its work cards at 3:4 in two columns, which is right for
 * case-study photography and wrong for 59 logos — every tile came out the
 * height of a poster with a mark floating in the middle of it. These rules
 * turn the same markup into a square grid: the mark on its own card, the
 * stoxie and company name underneath, always legible rather than on hover.
 * -------------------------------------------------------------------------- */
#work .work-grid .work-grid-inner {
  grid-template-columns: repeat(6, 1fr);
  gap: 2.4rem 1.6rem;
  padding: 0 4rem;
}
#work .work-grid .project,
#work .work-grid .project:not(:last-child) {
  aspect-ratio: auto;
  height: auto;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
#work .work-grid .project-media {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 1.6rem;
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px rgba(251, 251, 244, .1);
}
#work .work-grid .project .stk-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.6rem;
  display: block;
}
/* Label sits under the mark, not floating over it. */
#work .work-grid .project-content {
  position: relative;
  top: auto;
  left: auto;
  padding: 1.2rem .2rem 0;
  gap: .3rem;
}
#work .work-grid .project-text {
  opacity: 1;
  transform: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 0;
  display: block;
  text-align: left;
}
#work .work-grid .project-text.project-client { font-size: 1.6rem; letter-spacing: .02em; }
#work .work-grid .project-text.project-title  { font-size: 1.3rem; opacity: .55; }
#work .work-grid .project:hover .project-media { box-shadow: inset 0 0 0 1px rgba(251, 251, 244, .35); }

/* The list view gets the same mark, small, as a leading avatar. */
#work .work-list .project .stk-mark {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: .8rem;
  object-fit: cover;
  display: block;
}
#work .work-list .project-media {
  position: relative;
  width: auto;
  height: auto;
  order: -1;
  margin-right: 1.6rem;
}

@media (max-width: 1099px) {
  #work .work-grid .work-grid-inner { grid-template-columns: repeat(4, 1fr); padding: 0 2rem; }
}
@media (max-width: 499px) {
  #work .work-grid .work-grid-inner { grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1rem; }
  #work .work-grid .project-text.project-title { display: none; }
}

/* "How it works" is three words; the nav was sized for one. */
.nav .n-links .n-link { white-space: nowrap; }

/* ---- showreel, removed ----------------------------------------------------
 * The Watch button in the menu and the full-screen reel behind it were the
 * template's own studio film. Both are hidden and their sources stripped;
 * the markup stays because Site.showreel is constructed from `.showreel` and
 * init() would throw on a null element.
 * -------------------------------------------------------------------------- */
.menu .m-showreel,
.showreel { display: none !important; }

/* ---- "Get notified", removed ----------------------------------------------
 * The waitlist lived in three places — the menu, the footer, and a mobile-only
 * modal. The site launches working, so there is nothing to wait for. The markup
 * stays for the same reason the showreel's does: Newsletter and NewsletterModal
 * are constructed from these nodes and query into them on init.
 * -------------------------------------------------------------------------- */
.contact-link-wrapper.newsletter-toggle,
.contact-link-wrapper.newsletter-wrapper,
.newsletter-modal { display: none !important; }

/* ---- contact: one button ---------------------------------------------------
 * The page used to be a six-field form. Everything happens on X now, so the
 * form section carries a single link out to the account.
 * -------------------------------------------------------------------------- */
#contact .form-section .form-x {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.2rem;
}
#contact .form-section .form-x-text {
  max-width: 42rem;
  font-size: 1.6rem;
  line-height: 1.5;
  opacity: .6;
  margin: 0;
}
#contact .form-section .form-x .btn-block { margin: 0; }
#contact .form-section .btn .btn-text {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
}
#contact .form-section .btn .x-glyph {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  display: block;
}
@media (max-width: 1099px) {
  #contact .form-section .form-x { align-items: center; text-align: center; gap: 2.8rem; }
  #contact .form-section .form-x-text { font-size: 1.5rem; }
}

/* ---- the app page ----------------------------------------------------------
 * It shares the `legal` namespace (and #legal) with the privacy policy, so the
 * app-only rules hang off the extra .app-page class on <main>.
 *
 * No footer here: this is the signed-in surface, not a marketing page, and the
 * footer's second copy of the whole site menu under a wallet reads as a mistake.
 * It stays in the DOM because Legal.init() constructs Footer from it.
 * -------------------------------------------------------------------------- */
#legal.app-page .footer { display: none !important; }
#legal.app-page .legal-content { padding-bottom: 12rem; }

/* The line you post on X, shown as something to read and copy rather than a
 * field to fill — nothing on this page moves tokens. */
#legal.app-page .app-cmd {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin: 1.6rem 0 2.4rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid rgba(251, 251, 244, .14);
  border-radius: .6rem;
  background: rgba(251, 251, 244, .03);
}
#legal.app-page .app-cmd-line {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: -.01em;
  flex: 1 1 24rem;
  word-break: break-word;
}
#legal.app-page .app-cmd-slot { opacity: .45; }
#legal.app-page .app-cmd-sym { color: #AFFFA8; }
#legal.app-page #app-compose { display: inline-flex; }

@media (max-width: 499px) {
  #legal.app-page .app-cmd { gap: .8rem; padding: 1.2rem; }
  #legal.app-page .app-cmd-line { font-size: 1.35rem; }
}