/* The app page. Everything here leans on the site's own stylesheet: its variables, type
   scale (rem follows the site's fluid root size), pill buttons, underlined fields and
   hairlines. Only layout that the site has no class for is added. */
.app { padding-left: var(--padding-global); padding-right: var(--padding-global); padding-bottom: 4rem; }
.app .app_content { max-width: none; }
.app_gap { height: 2.4rem; }
.app_lead { max-width: 52rem; margin: 0; }
.app_header { border-bottom-color: #1c1e20; padding-top: 8rem; padding-bottom: 2.4rem; display: flex; }
.app_h2 { font-size: var(--text--h4); line-height: 1; font-weight: 500; margin: 0; }
.app .section_header2_count { color: var(--_colors---grey500); font-size: 1.2rem; }

.app_row { display: flex; justify-content: space-between; gap: 3.2rem; padding: 3.2rem 0 4rem; border-bottom: .1rem solid #1c1e20; scroll-margin-top: 9rem; }
.app_row_left { display: flex; gap: 3.2rem; align-items: baseline; flex: none; width: 34%; }
.app_row_left .made_point_number { color: var(--_colors---grey500); font-size: 1.2rem; width: 2rem; }
.app_row_left .made_point_h3 { font-size: var(--text--text-medium); font-weight: 500; line-height: 1.3; margin: 0; }
.app_row_right { width: 100%; max-width: 62rem; }
.app_note { color: var(--_colors---grey400); font-size: var(--text--text-medium); line-height: 1.3; margin: 0 0 2.4rem; }

.app_form { margin: 0 0 2.4rem; }
.app_label { display: block; color: var(--_colors---grey500); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .02em; margin-bottom: .4rem; }
.app_input.popup_field_form { width: 100%; margin: 0; color: var(--_colors---light); border-radius: 0; box-shadow: none; }
.app_input.popup_field_form::placeholder { color: var(--_colors---grey500); }
.app_input.popup_field_form:focus { border-bottom-color: var(--_colors---grey300); outline: none; }
.app_inline { display: flex; gap: 1.6rem; align-items: flex-end; }
.app_inline .app_input { flex: 1; min-width: 0; }
.app_two { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.app_actions { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; margin-top: 2.4rem; }
.button.app_btn { width: auto; max-width: none; padding: 1.4rem 2.8rem; font-size: var(--text--text-small); border: 0; cursor: pointer; font-family: inherit; flex: none; }
.button.app_btn.is-dark { background-color: var(--_colors---grey800); color: var(--_colors---light); }
.button.app_btn.is-dark:hover { background-color: #12191c; color: var(--_colors---grey300); }
.app_link { background: none; border: 0; padding: 0; color: var(--_colors---grey400); font: inherit; font-size: var(--text--text-small); cursor: pointer; text-decoration: underline; text-underline-offset: .3em; }
.app_link:hover { color: var(--_colors---light); }
.app_error { color: #e5484d; font-size: var(--text--text-small); margin: 1.2rem 0 0; min-height: 0; }
.app_error:empty { display: none; }
.app_hint, .app_saved { color: var(--_colors---grey500); font-size: var(--text--text-small); }
.app_empty { color: var(--_colors---grey500); font-size: var(--text--text-small); margin: 0; }

.app_kv { display: flex; align-items: baseline; gap: 1.6rem; padding: 1.4rem 0; border-bottom: .1rem solid #222326; }
.app_kv .app_label { margin: 0; flex: none; width: 14rem; }
.app_value { font-size: var(--text--body); }
.app_mono { font-size: var(--text--text-small); letter-spacing: 0; word-break: break-all; color: var(--_colors---light); flex: 1; }
.app_owner { margin-top: 3.2rem; align-items: center; }

.app_list { list-style: none; margin: 0; padding: 0; }
.app_list li { display: flex; justify-content: space-between; align-items: center; gap: 1.6rem; padding: 1.4rem 0; border-bottom: .1rem solid #222326; font-size: var(--text--body); }
.app_list li span { word-break: break-all; }

.app_table { margin-bottom: 1.6rem; }
.app_tr { display: grid; grid-template-columns: 13rem 1fr 9rem 17rem; gap: 1.6rem; padding: 1.4rem 0; border-bottom: .1rem solid #222326; font-size: var(--text--text-small); align-items: baseline; }
.app_tr > span { min-width: 0; overflow-wrap: anywhere; }
.app_th { color: var(--_colors---grey500); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .02em; }
.app_tr .is-refused { color: var(--_colors---grey400); }
.app_tag { display: inline-block; color: var(--_colors---white); background-color: #4b4d5366; border-radius: 99vw; padding: .3rem .6rem .4rem; font-size: 1rem; line-height: 1; margin-left: .6rem; vertical-align: .1em; }

.app_switch_wrap { display: flex; align-items: center; gap: 2rem; }
.app_switch { width: 7.2rem; height: 4rem; border-radius: 99vw; border: 0; background-color: var(--_colors---grey800); position: relative; cursor: pointer; flex: none; transition: background-color .2s ease; }
.app_switch_knob { position: absolute; top: .4rem; left: .4rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; background-color: var(--_colors---grey500); transition: transform .35s cubic-bezier(.65, 0, .35, 1), background-color .2s ease; }
.app_switch[aria-checked="true"] { background-color: var(--_colors---grey100); }
.app_switch[aria-checked="true"] .app_switch_knob { transform: translateX(3.2rem); background-color: var(--_colors---dark); }
.app_frozen { margin-top: 3.2rem; border: .1rem solid var(--_colors---grey500); border-radius: 2rem; padding: 1.6rem 2.4rem; font-size: var(--text--body); }
.app_frozen[hidden], .app [hidden] { display: none !important; }
.app.is-frozen .app_row:not(#freeze) .app_row_left { opacity: .4; }

/* The site's footer is a full-screen block (min-height 100vh plus a 18.6rem top padding) whose
   words fade in when a scroll trigger fires. On the app page that trigger is measured before
   the rows are drawn, so the footer stayed blank and read as a tall empty black area under
   Freeze. Here the footer is as tall as its content and its words are simply shown. */
.app ~ .footer2 .footer2_content { min-height: 0; padding-top: 8rem; }
.app ~ .footer2 .footer2_content h2, .app ~ .footer2 .footer2_content a, .app ~ .footer2 .footer2_content span { opacity: 1 !important; transform: none !important; }

.app_withdraw { margin-top: 3.2rem; }
.app_done { margin: 1.2rem 0 0; }
.app_proof { margin-left: .8rem; font-size: 1.2rem; }

/* the dot: a solid circle; while it works, a row of small pulsing dots */
.app_avatar { width: 1.6rem; height: 1.6rem; border-radius: 50%; background-color: var(--_colors---grey100); flex: none; display: inline-block; }
.app_dotname { display: flex; align-items: center; gap: 1.2rem; padding: 0 0 2.4rem; }
.app_chat { list-style: none; margin: 0 0 1.6rem; padding: 0; border-top: .1rem solid #222326; }
.app_chat_row { display: flex; gap: 1.6rem; align-items: baseline; padding: 1.4rem 0; border-bottom: .1rem solid #222326; }
.app_chat_row .app_avatar { width: 1.2rem; height: 1.2rem; transform: translateY(.1rem); }
.app_you { color: var(--_colors---grey500); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .02em; flex: none; min-width: 1.2rem; }
.app_chat_row.is-owner .app_chat_text { color: var(--_colors---grey400); }
.app_chat_text { margin: 0; font-size: var(--text--body); line-height: 1.35; overflow-wrap: anywhere; white-space: pre-wrap; }
.app_typing { border-bottom: 0; margin-bottom: 1.6rem; align-items: center; }
.app_dots { display: inline-flex; gap: .6rem; align-items: center; }
.app_dots i { width: .6rem; height: .6rem; border-radius: 50%; background-color: var(--_colors---grey400); animation: app-pulse 1.2s cubic-bezier(.65, 0, .35, 1) infinite; }
.app_dots i:nth-child(2) { animation-delay: .15s; }
.app_dots i:nth-child(3) { animation-delay: .3s; }
@keyframes app-pulse { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.app_token_kv { margin-top: 3.2rem; align-items: center; }
.app_token_note { display: block; margin: 1.2rem 0 0; }
#token-state.is-new { color: var(--_colors---light); }

@media screen and (max-width: 991px) {
  .app_row { flex-direction: column; gap: 2rem; }
  .app_row_left { width: 100%; gap: 1.6rem; }
  .app_row_right { max-width: none; }
}
@media screen and (max-width: 479px) {
  .app { padding-bottom: 2.4rem; }
  .app_token_kv { align-items: stretch; }
  .app_two { grid-template-columns: 1fr; gap: 1.6rem; }
  .app_inline { flex-direction: column; align-items: stretch; }
  .app_inline .button.app_btn, .app_actions .button.app_btn { width: 100%; }
  .app_kv { flex-direction: column; gap: .4rem; }
  .app_kv .app_label { width: auto; }
  .app_owner { align-items: stretch; }
  .app_tr { grid-template-columns: 1fr 1fr; gap: .4rem 1.6rem; }
  .app_th { display: none; }
  .app_switch_wrap { align-items: flex-start; }
}