/* Shared finishing layer. Local assets, existing routes and actions. */
:root { --r: 16px }
body { line-height: 1.55 }
main { max-width: 1440px }
button, a, input, select, textarea { touch-action: manipulation }
.btn, .btn.sm, .mini, .link, .nav-i { min-height: 44px; min-width: 44px }
.link { display: inline-flex; align-items: center }
.btn { white-space: normal; overflow-wrap: anywhere }
.top .logo, .top-r, .top .create-btn { flex-shrink: 0 }
.top .create-btn span, .nav-i > span:last-child, .tab > span:last-child { overflow-wrap: normal; word-break: normal; white-space: nowrap }
.rail .nav-i { gap: 12px }
.shop-top { align-items: flex-start; margin-block: 8px 24px }
.shop-h { max-width: 30ch; font-size: clamp(24px, 2.7vw, 36px); line-height: 1.18; letter-spacing: -.035em }
.shop-top .pulse { max-width: 36ch; color: var(--ink2); font-size: 13px }
.chips.depts { gap: 4px; padding-block: 10px; margin-bottom: 24px }
.depts .chip { padding-inline: 12px }
.composer { padding: 8px; margin-bottom: 24px; border-radius: 14px }
.composer input[name=title] { background: transparent }
.band { margin-top: 28px }
.band-h { font-size: 20px; margin-bottom: 16px }
.grid { gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) }
.card { padding: 0; border: 0; border-radius: 16px; background: transparent; gap: 12px }
@media (prefers-reduced-motion: no-preference) { .card { transition: transform .15s ease, box-shadow .15s ease } }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px) }
.card:hover .thumb { border-color: var(--ink2) }
.card .thumb { border: 1px solid var(--line); border-radius: 16px; min-height: 200px }
.card .meta { padding: 0; gap: 10px }
.card .txt h3 { font-size: 16px; line-height: 1.4 }
.card .sub { font-size: 13px }
.card .sub a { padding-block: 4px }
.card .c-acts { gap: 4px }
.card .hy { border: 0 }
.card .dt { min-height: 52px; width: 44px; border-radius: 10px }
.card .dt b { font-size: 20px }
.box { border-radius: 16px }
.watch { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px }
.going-card { border: 1px solid var(--line); border-radius: 18px }
.facts .body { max-width: 75ch }
.create-wrap { grid-template-columns: minmax(0, 760px) minmax(240px, 320px); gap: 32px }
.create { gap: 18px }
.create details { padding-inline: 16px }
.create summary { padding-block: 12px; line-height: 1.5 }
.create .sticky-act { border-top: 1px solid var(--line) }
.preview { padding: 16px; background: transparent }
.preview .card { pointer-events: none }
.launch-shortcut { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding: 16px 18px; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg2); min-width: 0 }
.launch-shortcut > div { display: grid; gap: 4px; min-width: 0; flex: 1 1 220px }
.launch-shortcut span { color: var(--ink2); font-size: 14px; overflow-wrap: anywhere }
.launch-shortcut .btn { min-height: 44px }
.launch-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; margin-block: 8px 28px }
.launch-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; padding: 24px; margin: 0; background: var(--bg2) }
.launch-choice h2 { font-size: 21px; margin: 0 }
.launch-choice p { margin: 0; color: var(--ink2) }
.launch-choice .btn { margin-top: auto; min-height: 44px; max-width: 100%; white-space: normal }
.launch-steps { padding-left: 24px; margin: 0; display: grid; gap: 16px }
.launch-steps li { padding-left: 4px; overflow-wrap: anywhere }
.launch-notice { margin: 0; padding: 14px 16px; background: var(--bg2); border-radius: 12px; line-height: 1.6 }
.launch-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px }
.launch-presets a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; text-decoration: underline; text-underline-offset: 5px }
.launch-presets a[aria-current] { font-weight: 750 }
.launch-advanced { border: 1px solid var(--line); border-radius: 14px; padding: 0 16px }
.launch-advanced > .stack { padding-block: 8px 16px; gap: 18px }
.launch-advanced .looks { gap: 10px }
.launch-advanced .look-r .art { width: 100px }
.launch-form-intro { display: grid; gap: 6px; margin-bottom: 8px }
.launch-form-intro p { margin: 0; color: var(--ink2) }
/* 11-02 crypto drops first: Home's one row to start a crypto drop sits in the composer's frame */
.crypto-start { max-width: 640px; padding: 12px 14px }
.crypto-start input[name=title] { font-size: 17px; font-weight: 600 }
.crypto-start input::placeholder { color: var(--ink2); opacity: 1 }
.crypto-start .btn { gap: 6px; padding-inline: 18px; white-space: nowrap; overflow-wrap: normal }
/* under 360 px the name gets the whole row and Start sits under it, so the placeholder is never cut */
@media (max-width: 359px) { .crypto-start { grid-template-columns: minmax(0, 1fr) } }
/* the Communities page under the crypto focus holds one card: give it room instead of grid-sizing it like one of many */
.comm-card.comm-only { padding: 20px; max-width: 420px }
.comm-card.comm-only .comm-ic { width: 56px; height: 56px; font-size: 22px }
.comm-card.comm-only .comm-t b { font-size: 17px }
@media (max-width: 1199px) and (min-width: 760px) {
  .rail .nav-i > span:last-child { white-space: normal; overflow-wrap: normal; font-size: 13px }
}
@media (max-width: 1099px) {
  .watch, .create-wrap { grid-template-columns: minmax(0, 1fr) }
  .create-wrap .preview { position: static; order: 1; max-width: 420px }
}
@media (min-width: 760px) {
  .top { padding-inline: 16px; gap: 12px }
  .top-search { margin-inline: auto; flex-basis: 320px }
  .top-r { gap: 8px }
}
@media (max-width: 759px) {
  .grid { grid-template-columns: minmax(0, 1fr); gap: 26px }
  .shop-h { font-size: 26px }
  .shop-top { gap: 12px; margin-bottom: 20px }
  .launch-shortcut { padding: 16px; gap: 12px }
  .launch-shortcut > div { flex-basis: 100% }
  .launch-choice { padding: 20px }
  .tabs .tab { flex: 1 1 20%; padding-inline: 0; min-width: 0 }
  .tabs .tab > span:last-child { font-size: 13px; line-height: 1.4 }
  .top-search, #top .create-btn { display: none }
  .card .thumb { min-height: 210px }
  .hero, .hero > .art { min-height: 250px }
  .hero > .art .art-t { font-size: 26px }
  .w-title { font-size: 28px }
  .create-wrap .preview { width: 100%; max-width: none }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important }
}