/* /app/startups, /app/startups/new, /app/startups/{slug}. Same palette as shell.css /
   the Figma "Auth" frame: white cards, primary #4F46E5, brand #5F33E1, text #111827 / #64748B. */

.st { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.st__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.st__bar .shell__btn { margin-top: 0; }
.st__h1 { margin: 0; }
.st__tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.st__tab {
    height: 34px; padding: 0 14px; border: 1px solid #D7DFEA; border-radius: 8px; background: #fff;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: #64748B; cursor: pointer;
}
.st__tab.is-on { background: #EEE9FF; border-color: #5F33E1; color: #5F33E1; }
.st__links { margin: 20px 0 0; font-size: 14px; color: #64748B; }

/* list */
.st__grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.st__card { display: flex; flex-direction: column; gap: 8px; }
.st__card-top, .st__head-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.st__name { font-size: 18px; font-weight: 700; color: #111827; text-decoration: none; overflow-wrap: anywhere; }
.st__name:hover { color: #4F46E5; }
.st__chip {
    padding: 3px 10px; border-radius: 999px; background: #F2F4F7; color: #475467; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.st__chip--looking { background: #E7F8EE; color: #067647; }
.st__tagline { margin: 0; font-size: 14px; color: #64748B; }
.st__owner { margin: 0; font-size: 13px; color: #64748B; }

/* card */
.st__head { display: flex; flex-direction: column; gap: 10px; }
.st__title { margin: 0; font-size: 26px; line-height: 32px; font-weight: 700; color: #111827; overflow-wrap: anywhere; }
.st__description { max-width: 70ch; }
.st__formcard { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.st__form, .st__slotform { display: flex; flex-direction: column; gap: 16px; }
.st__slotform { padding: 16px; margin: 12px 0; border: 1px solid #E7EAF2; border-radius: 12px; background: #F8F9FC; }
.st__team { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.st__member { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid #E7EAF2; }
.st__member:first-child { border-top: 0; }
.st__slots-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.st__slots-head .shell__h2 { margin: 0; }
.st__slots-head .shell__btn { margin-top: 0; height: 36px; font-size: 13px; }
.st__slots { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.st__slot { display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid #E7EAF2; border-radius: 12px; }
.st__slot[data-status="joined"] { background: #F8F9FC; }
.st__slot-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.st__slot-title { margin: 0; font-size: 15px; font-weight: 600; color: #111827; }
.st__slot-desc { margin: 0; font-size: 13px; color: #64748B; overflow-wrap: anywhere; }
.st__slot-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.st__slot-actions { display: flex; gap: 12px; }
.st__skillpick { display: flex; gap: 8px; flex-wrap: wrap; }
.st__skillpick .pf__input { flex: 1 1 220px; min-width: 0; }
.st__skillpick .st__level { flex: 0 0 90px; }
.st__skillpick .shell__btn { margin-top: 0; }
.st__chip-x { margin-left: 6px; padding: 0 2px; border: 0; background: none; color: #5F33E1; font-size: 15px; line-height: 1; cursor: pointer; }

@media screen and (max-width: 720px) {
    .st__slot { flex-direction: column; }
    .st__slot-side { flex-direction: row; align-items: center; justify-content: space-between; }
    .st__grid { grid-template-columns: 1fr; }
}

.st__tab-badge { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: #5F33E1; color: #fff; font-size: 12px; line-height: 18px; }
.st__activity { display: flex; flex-direction: column; gap: 16px; }
.st__apply { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.st__apply-text { width: 100%; resize: vertical; }
.st__member { gap: 12px; }
.st__member > .pf__link-btn { margin-left: auto; }
.st__bar-actions { display: flex; gap: 12px; flex-wrap: wrap; }