/* HOODFOLIO launchpad: the launch form, the board of funds and each fund's page.
   Same drawing language as hud.css: thin frames, corner marks, mono labels, one live green. */
.pad-page { position: relative; z-index: 5; }
.pad-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; padding-bottom: 96px; }
@media (max-width: 1040px) { .pad-grid { grid-template-columns: 1fr; } }

/* steps */
.step-card { position: relative; padding: 26px 28px 28px; margin-bottom: 20px; }
.step-card > header { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.step-card > header .no { font: 400 30px/1 var(--serif); color: var(--ice); }
.step-card > header h2 { margin: 0; font: 500 15px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.step-card > header p { margin: 0 0 0 auto; font: 400 11px/1.4 var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; text-align: right; }
@media (max-width: 640px) { .step-card { padding: 20px 16px; } .step-card > header { flex-wrap: wrap; } .step-card > header p { margin: 0; width: 100%; text-align: left; } }

/* fields */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.fields .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .fields { grid-template-columns: 1fr; } }
.field label { display: flex; justify-content: space-between; margin-bottom: 7px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.field label em { font-style: normal; color: var(--ink-4); }
.field input, .field textarea { width: 100%; box-sizing: border-box; background: rgba(6,10,20,.7); border: 1px solid var(--rule); color: var(--ink); font: 400 14px/1.4 var(--mono); padding: 12px 13px; outline: none; border-radius: 0; transition: border-color .2s; }
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--ice); }
.field input.bad { border-color: var(--red); }
.field .hint { margin: 6px 0 0; font: 400 11px/1.5 var(--mono); color: var(--ink-4); }

/* logo drop */
.logo-drop { display: flex; gap: 18px; align-items: center; }
.logo-drop .well { position: relative; width: 104px; height: 104px; flex: none; border: 1px dashed var(--line); display: grid; place-items: center; cursor: pointer; background: rgba(6,10,20,.6); overflow: hidden; transition: border-color .2s; }
.logo-drop .well:hover, .logo-drop .well.over { border-color: var(--ice); }
.logo-drop .well img { width: 100%; height: 100%; object-fit: cover; }
.logo-drop .well span { font: 500 10px/1.4 var(--mono); letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; text-align: center; padding: 8px; }
.logo-drop .txt { font: 400 12px/1.6 var(--mono); color: var(--ink-3); }
.logo-drop .txt b { color: var(--ink); font-weight: 500; }
.logo-drop input { display: none; }

/* catalogue picker */
.cat-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.cat-tools input { flex: 1; min-width: 180px; background: rgba(6,10,20,.7); border: 1px solid var(--rule); color: var(--ink); font: 400 13px/1 var(--mono); padding: 11px 12px; outline: none; }
.cat-tools input:focus { border-color: var(--ice); }
.cat-tools .count { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cat-tools .count b { color: var(--ice-2); font-weight: 500; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; max-height: 392px; overflow: auto; padding-right: 4px; }
.cat { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 4px 10px; align-items: center; padding: 10px 11px; border: 1px solid var(--rule); background: rgba(9,16,30,.6); cursor: pointer; text-align: left; color: inherit; font: inherit; transition: border-color .15s, background .15s; }
.cat:hover { border-color: var(--line); }
.cat.on { border-color: var(--ice); background: rgba(156,195,255,.08); }
.cat.on::after { content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; background: var(--green); }
.cat img { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--rule-2); }
.cat b { font: 500 13px/1.1 var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat small { font: 400 10.5px/1.2 var(--mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat[disabled] { opacity: .35; cursor: not-allowed; }
.cat-empty { padding: 28px; text-align: center; font: 400 12px/1.6 var(--mono); color: var(--ink-3); border: 1px dashed var(--rule); grid-column: 1 / -1; }

/* weights */
.wlist { margin-top: 18px; border-top: 1px solid var(--rule); }
.wrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) 1.4fr 84px 28px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule-2); }
.wrow img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.wrow b { font: 500 13px/1.2 var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow input[type=range] { width: 100%; accent-color: var(--ice); }
.wrow .pc { display: flex; align-items: center; border: 1px solid var(--rule); background: rgba(6,10,20,.7); }
.wrow .pc input { width: 100%; min-width: 0; background: none; border: 0; color: var(--ink); font: 400 13px/1 var(--mono); padding: 8px 4px 8px 9px; outline: none; text-align: right; }
.wrow .pc span { padding-right: 9px; font: 400 12px/1 var(--mono); color: var(--ink-3); }
.wrow button { width: 28px; height: 28px; border: 1px solid var(--rule); background: none; color: var(--ink-3); cursor: pointer; font: 400 14px/1 var(--mono); }
.wrow button:hover { color: var(--red); border-color: var(--red); }
@media (max-width: 640px) { .wrow { grid-template-columns: 26px minmax(0, 1fr) 76px 26px; } .wrow input[type=range] { display: none; } }
.wsum { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); flex-wrap: wrap; }
.wsum b { color: var(--green); font-weight: 500; }
.wsum b.bad { color: var(--amber); }
.wbar { display: flex; height: 6px; margin-top: 12px; background: var(--rule-2); overflow: hidden; }
.wbar i { display: block; height: 100%; }
.mini-btn { border: 1px solid var(--line); background: none; color: var(--ice-2); font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 8px 11px; cursor: pointer; }
.mini-btn:hover { border-color: var(--ice); background: rgba(156,195,255,.06); }

/* creator fee options */
.opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.opt { padding: 14px 10px; border: 1px solid var(--rule); background: rgba(9,16,30,.6); color: var(--ink-2); cursor: pointer; text-align: center; font: inherit; }
.opt b { display: block; font: 400 28px/1 var(--serif); color: var(--ink); }
.opt small { display: block; margin-top: 4px; font: 400 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.opt.on { border-color: var(--ice); background: rgba(156,195,255,.08); }
.opt.on b { color: var(--ice-2); }

/* launch box and its steps */
.launch-box .rowline { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule-2); font: 400 12px/1.4 var(--mono); color: var(--ink-3); }
.launch-box .rowline b { color: var(--ink); font-weight: 500; text-align: right; }
.launch-box .actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.launch-box .actions .btn { flex: 1; justify-content: center; }
.ltrack { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 6px; }
.ltrack li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font: 400 12px/1.5 var(--mono); color: var(--ink-4); }
.ltrack li::before { content: ""; width: 9px; height: 9px; margin-top: 4px; border: 1px solid var(--ink-4); }
.ltrack li.on { color: var(--ink); }
.ltrack li.on::before { border-color: var(--ice); background: rgba(156,195,255,.25); animation: blink 1s steps(2) infinite; }
.ltrack li.done { color: var(--ink-2); }
.ltrack li.done::before { border-color: var(--green); background: var(--green); }
@keyframes blink { 50% { opacity: .3; } }
.msg { margin-top: 14px; padding: 11px 13px; font: 400 12px/1.55 var(--mono); border: 1px solid var(--rule); color: var(--ink-2); }
.msg.err { border-color: rgba(255,111,111,.5); color: #ffb3b3; background: var(--red-wash); }
.msg.ok { border-color: rgba(184,255,94,.45); color: var(--green-ink); background: var(--green-wash); }
.msg:empty { display: none; }

/* the preview card (also the board card) */
.aside-col { position: sticky; top: 84px; display: grid; gap: 20px; }
@media (max-width: 1040px) { .aside-col { position: static; } }
.fcard { position: relative; display: block; padding: 20px; color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
a.fcard:hover { border-color: var(--ice); transform: translateY(-2px); }
.fcard .id { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.fcard .id img, .fcard .id .ph { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--line); background: var(--rule-2); }
.fcard .id h3 { margin: 0; font: 400 28px/1 var(--serif); color: var(--ink); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard .id small { display: block; margin-top: 4px; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; color: var(--ice); text-transform: uppercase; }
.fcard .desc { margin: 14px 0 0; font: 400 12px/1.6 var(--mono); color: var(--ink-3); min-height: 1.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border: 1px solid var(--rule); font: 500 11px/1 var(--mono); color: var(--ink-2); }
.chip img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.chip em { font-style: normal; color: var(--ink-4); }
.fcard .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 16px; background: var(--rule); border: 1px solid var(--rule); }
.fcard .stats div { background: var(--paper); padding: 10px; }
.fcard .stats span { display: block; font: 500 9.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.fcard .stats b { display: block; margin-top: 5px; font: 500 13px/1.2 var(--mono); color: var(--ink); }
.split3 { display: flex; height: 8px; margin: 12px 0 10px; }
.split3 i { display: block; height: 100%; }
.split-legend { display: grid; gap: 6px; font: 400 11.5px/1.5 var(--mono); color: var(--ink-3); }
.split-legend div { display: grid; grid-template-columns: 10px 44px 1fr; gap: 10px; align-items: center; }
.split-legend i { width: 10px; height: 10px; }
.split-legend b { color: var(--ink); font-weight: 500; }

/* board */
.board-tools { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; padding-bottom: 96px; }
.board-empty { grid-column: 1 / -1; padding: 64px 24px; text-align: center; }
.board-empty h3 { margin: 0 0 10px; font: 400 34px/1 var(--serif); color: var(--ink); }
.board-empty p { margin: 0 auto 22px; max-width: 520px; font: 400 13px/1.7 var(--mono); color: var(--ink-3); }

/* fund page */
.fund-head { padding: 112px 0 34px; position: relative; z-index: 5; }
.fund-id { display: grid; grid-template-columns: 112px 1fr auto; gap: 26px; align-items: center; }
.fund-id img { width: 112px; height: 112px; object-fit: cover; border: 1px solid var(--line); background: var(--rule-2); }
.fund-id h1 { margin: 0; font: 400 clamp(46px, 7vw, 84px)/.9 var(--serif); color: var(--ink); letter-spacing: .01em; }
.fund-id .sym { margin-top: 8px; font: 500 12px/1.4 var(--mono); letter-spacing: .14em; color: var(--ice); text-transform: uppercase; }
.fund-id .desc { margin: 12px 0 0; max-width: 640px; font: 400 13px/1.7 var(--mono); color: var(--ink-3); }
.fund-id .cta { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
@media (max-width: 820px) { .fund-head { padding-top: 92px; } .fund-id { grid-template-columns: 72px 1fr; gap: 16px; } .fund-id img { width: 72px; height: 72px; } .fund-id .cta { grid-column: 1 / -1; flex-direction: row; } }
.fund-meta { display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 22px; font: 400 11.5px/1.5 var(--mono); color: var(--ink-3); }
.fund-meta a { color: var(--ice-2); }
.fund-meta button { background: none; border: 0; color: var(--ice-2); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.mini-chart { height: 220px; position: relative; }
.mini-chart canvas { width: 100%; height: 100%; display: block; }
.mini-chart .empty { position: absolute; inset: 0; display: grid; place-items: center; font: 400 12px/1.5 var(--mono); color: var(--ink-3); }

/* the launchpad band on the home page */
.pad-band { position: relative; z-index: 5; padding: 0 0 40px; }
.pad-band .inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; padding: 36px; }
.pad-band h2 { margin: 0; font: 400 clamp(40px, 5vw, 64px)/.95 var(--serif); color: var(--ink); }
.pad-band p { margin: 14px 0 0; font: 400 13px/1.7 var(--mono); color: var(--ink-3); max-width: 560px; }
.pad-band .actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
@media (max-width: 860px) { .pad-band .inner { grid-template-columns: 1fr; padding: 24px 18px; } }