/* The signed-in home on kordi.ai (/) and the launching page (/launch).
 * Loaded after research-preview/public/styles.css and assets/public/theme.css
 * (and account.css on /launch). The home links it with media="not all" and
 * home-signed-in.js applies it only for a signed-in visitor, so it styles
 * only .sh- elements and never the marketing page. */

/* Shared pieces ----------------------------------------------------------- */
.sh-tile { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--cardinal); background: #f3e4de; }
.sh-tile.is-moss { color: #3f5a3a; background: #e3e9dc; }
.sh-tile.is-ink { color: var(--ink); background: #ebe5e0; }
.sh-tile.is-personal { color: var(--muted); background: var(--paper-alt); }
.sh-tile svg { width: 20px; height: 20px; }
.sh-launch .btn svg, .sh-mini .btn svg { width: 16px; height: 16px; flex: none; }

/* The header's initials chip and account menu are in theme.css. */

/* The home: the hero band with one list of organizations. ----------------- */
.hero[hidden] { display: none; }
.sh-home { isolation: isolate; position: relative; overflow: hidden; text-align: center; padding-block: clamp(48px, 5vw, 72px) clamp(56px, 6vw, 88px); }
.sh-home h1 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -.05em; }
.sh-home .sh-lede { margin: 12px auto 0; color: var(--muted); font-size: 1.125rem; line-height: 1.5; }
.sh-home .redwood { bottom: 24px; opacity: .2; }
.sh-stack { display: grid; gap: 16px; width: min(100%, 720px); margin: 32px auto 0; text-align: left; }
.sh-card { overflow: hidden; background: #fcfbf9; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 8px 30px #65101008; }
.sh-card-head { margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--rule); color: var(--ink); font-family: var(--body); font-size: .9375rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.sh-rows { margin: 0; padding: 0; list-style: none; }
.sh-row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; }
.sh-row + .sh-row { border-top: 1px solid var(--rule); }
.sh-row.is-recent { background: #f8f1ed; }
.sh-grow { flex: 1; min-width: 0; }
.sh-name { margin: 0; color: var(--ink); font-family: var(--body); font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-meta { margin: 2px 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-actions { display: flex; align-items: center; gap: 16px; flex: none; }
.sh-row .btn { margin: 0; padding: .55rem 1.05rem; font-size: .875rem; }
.sh-web { color: var(--muted); font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.sh-web:hover { color: var(--ink); }
.sh-arrow { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); background: var(--paper); text-decoration: none; transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease; }
.sh-arrow:hover { color: var(--cardinal); border-color: var(--cardinal); background: #f6e9e5; }
.sh-arrow svg { width: 17px; height: 17px; }

/* Below the list: Kordi for Mac and Invite people, side by side. */
.sh-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sh-more.is-single { grid-template-columns: minmax(0, 1fr); }
.sh-mini { display: flex; flex-direction: column; align-items: flex-start; padding: 18px 20px; background: #fcfbf9; border: 1px solid var(--rule); border-radius: 14px; }
.sh-mini h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-family: var(--body); font-size: .9375rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.sh-mini h2 img { width: 22px; height: 22px; }
.sh-mini p { margin: 4px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.sh-mini .btn { margin-top: 14px; padding: .45rem .9rem; font-size: .8125rem; }

/* The launching page: the /mac hand-off column. ---------------------------- */
.sh-launch .x-auth-card { display: flex; flex-direction: column; align-items: center; width: min(100%, 440px); text-align: center; }
.sh-launch-org { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 0 0 20px; color: var(--ink); font-size: 1rem; font-weight: 500; }
.sh-launch-org [data-name] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-launch-org .sh-tile { width: 32px; height: 32px; border-radius: 9px; font-size: .875rem; }
.sh-launch-org .sh-tile svg { width: 17px; height: 17px; }
.interior-page .sh-launch h1 { margin: 0; font-size: clamp(2.125rem, 1.5rem + 1.6vw, 2.75rem); }
.sh-launch .x-spinner { margin-top: 28px; }
.sh-launch .sh-fallback { margin: 32px 0 0; color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.sh-launch .sh-fallback a { font-weight: 500; }
.x-mac.sh-launch .btn.secondary { width: auto; margin-top: 16px; padding: .62rem 1.15rem; font-size: .875rem; }

/* Phones ------------------------------------------------------------------ */
@media (max-width: 680px) {
 .sh-home { padding-block: 32px 44px; }
 .sh-home h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
 .sh-home .sh-lede { margin-top: 8px; font-size: 1rem; }
 .sh-home .redwood { display: none; }
 .sh-stack { margin-top: 24px; gap: 12px; }
 .sh-card { border-radius: 14px; }
 .sh-card-head { padding: 12px 16px; }
 .sh-row { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
 .sh-row.is-recent .sh-actions { flex: 1 1 100%; flex-direction: row-reverse; justify-content: flex-start; gap: 16px; }
 .sh-row.is-recent .btn { flex: 1; justify-content: center; }
 .sh-tile { width: 36px; height: 36px; border-radius: 10px; }
 .sh-more { grid-template-columns: minmax(0, 1fr); gap: 12px; }
 .sh-mini { padding: 16px; }
}