/* Second Hero identity and composition on top of the Campus design system
   (campus-app.css). Components come from campus.ui; this file only sets the
   hero tint, the owner's accent choice and the few layouts the launcher owns:
   the welcome column, the thread (rail, conversation, composer), the bottom
   tab bar, app cards' progress and the opened-app frame. */

/* Hero tint: dark first, bitcoin orange (canvas r6, "Second Hero · Campus,
   invisible"). The page sets data-campus-shell-theme="dark" itself; the light
   tokens only keep the design system usable if the theme is ever switched. */
:root[data-campus-tint="hero"] {
  --campus-tint: #f7931a; --campus-tint-hover: #e0820f; --campus-tint-strong: #b86a0a;
  --campus-tint-soft: rgba(247, 147, 26, .16); --campus-on-tint: #000; --campus-tint-focus: rgba(247, 147, 26, .26);
}
:root[data-campus-shell-theme="dark"][data-campus-tint="hero"] {
  --canvas: #0b0b0d;
  --campus-tint: #f7931a; --campus-tint-hover: #ffa63a; --campus-tint-strong: #ffa63a;
  --campus-tint-soft: rgba(247, 147, 26, .16); --campus-on-tint: #000; --campus-tint-focus: rgba(247, 147, 26, .28);
}
/* The owner's accent replaces the tint tokens, nothing else. */
:root[data-accent="bitcoin"] { --campus-tint: #f7931a; --campus-tint-hover: #ffa63a; --campus-tint-strong: #ffa63a; --campus-tint-soft: rgba(247, 147, 26, .16); --campus-on-tint: #000; --campus-tint-focus: rgba(247, 147, 26, .28); }
:root[data-accent="violet"] { --campus-tint: #8b74ff; --campus-tint-hover: #a392ff; --campus-tint-strong: #a392ff; --campus-tint-soft: rgba(139, 116, 255, .16); --campus-on-tint: #0b0820; --campus-tint-focus: rgba(139, 116, 255, .26); }
:root[data-accent="blue"] { --campus-tint: #4c9aff; --campus-tint-hover: #3a86eb; --campus-tint-strong: #2765d7; --campus-tint-soft: rgba(76, 154, 255, .16); --campus-on-tint: #001433; --campus-tint-focus: rgba(76, 154, 255, .26); }
:root[data-accent="green"] { --campus-tint: #3dd68c; --campus-tint-hover: #2cc07a; --campus-tint-strong: #1e9e63; --campus-tint-soft: rgba(61, 214, 140, .16); --campus-on-tint: #04210f; --campus-tint-focus: rgba(61, 214, 140, .26); }
:root[data-accent="pink"] { --campus-tint: #ff6b9a; --campus-tint-hover: #ee5789; --campus-tint-strong: #c93e6c; --campus-tint-soft: rgba(255, 107, 154, .16); --campus-on-tint: #2a0010; --campus-tint-focus: rgba(255, 107, 154, .26); }
:root[data-accent="graphite"] { --campus-tint: #6e6e73; --campus-tint-hover: #58585d; --campus-tint-strong: #3a3a3f; --campus-tint-soft: rgba(110, 110, 115, .16); --campus-on-tint: #fff; --campus-tint-focus: rgba(110, 110, 115, .26); }
:root[data-campus-shell-theme="dark"][data-accent="graphite"] { --campus-tint: #e5e5ea; --campus-tint-hover: #f5f5f7; --campus-tint-strong: #f5f5f7; --campus-tint-soft: rgba(229, 229, 234, .14); --campus-on-tint: #000; }

/* Full-height screens. The design system's page owns width and gutters; the
   launcher adds the vertical frame a standalone product needs. */
.hero-screen { min-height: 100dvh; display: flex; flex-direction: column; }
.hero-screen > .campus-page { flex: 1; min-height: 0; }
.hero-welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--campus-space-5); padding: var(--campus-space-8) var(--campus-space-5); text-align: center; }
.hero-welcome h1 { margin: 0; font-size: clamp(34px, 6vw, 48px); font-weight: 710; letter-spacing: -.05em; line-height: 1; color: var(--campus-color-heading); }
.hero-welcome p { max-width: 340px; margin: 0; color: var(--campus-color-text-secondary); font-size: var(--campus-text-base); line-height: 1.55; }
.hero-welcome-form { width: 100%; max-width: 360px; display: grid; gap: var(--campus-space-3); }
.hero-welcome-form .campus-button { width: 100%; }
.hero-welcome-form .campus-field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hero-foot { position: sticky; bottom: 0; display: grid; gap: var(--campus-space-2); padding: var(--campus-space-3) var(--app-gutter) calc(var(--campus-safe-area-inset-bottom) + var(--campus-space-5)); background: var(--canvas); }

/* The hero's mark: its initial on the tint. */
.hero-mark { background: var(--campus-tint); color: var(--campus-on-tint); border-radius: 13px; }
.hero-mark.campus-avatar-small { width: 28px; height: 28px; flex-basis: 28px; border-radius: 9px; font-size: var(--campus-text-xs); }
.hero-mark-large { width: 72px; height: 72px; flex-basis: 72px; border-radius: 24px; font-size: 32px; }

/* Home: the active tab's screen scrolls; the tab bar stays put. */
.hero-home { height: 100dvh; display: flex; flex-direction: column; }
.hero-home > .hero-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.hero-home > .hero-body > .campus-page { min-height: 0; }
.hero-tabs { flex: none; display: flex; justify-content: space-around; padding: 6px var(--campus-space-3) calc(var(--campus-safe-area-inset-bottom) + 6px); border-top: 1px solid var(--campus-color-line-soft); background: var(--campus-color-surface-raised); }
.hero-tab { min-width: 64px; min-height: var(--campus-touch-target); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: 12px; background: none; color: var(--campus-color-text-tertiary); font-size: var(--campus-text-2xs); font-weight: 640; cursor: pointer; }
.hero-tab[aria-current="page"] { color: var(--campus-color-heading); }
.hero-tab svg { width: 22px; height: 22px; }

/* Thread: optional rail on wide screens, conversation, composer. */
.hero-thread { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.hero-thread-head { display: flex; align-items: center; justify-content: space-between; gap: var(--campus-space-3); padding: calc(var(--campus-safe-area-inset-top) + var(--campus-space-2)) var(--campus-space-3) var(--campus-space-2) var(--campus-space-4); border-bottom: 1px solid var(--campus-color-line-soft); }
.hero-thread-head strong { font-size: var(--campus-text-md); }
.hero-switch { display: inline-flex; align-items: center; gap: var(--campus-space-2); min-height: 44px; margin-left: calc(-1 * var(--campus-space-2)); padding: 0 var(--campus-space-2); border: 0; border-radius: var(--campus-radius-control); background: transparent; color: var(--campus-color-text); font: inherit; cursor: pointer; }
.hero-switch:hover { background: var(--campus-color-fill-hover); }
.hero-switch:focus-visible { outline: 2px solid var(--campus-color-focus, #3b7cf0); outline-offset: 2px; }
.hero-switch svg { color: var(--campus-color-text-secondary); }
.hero-thread .campus-conversation { flex: 1; }
.hero-say { display: flex; align-items: flex-start; gap: var(--campus-space-3); max-width: min(92%, 760px); }
.hero-say .campus-message { max-width: none; }
.hero-tool { margin-left: 40px; max-width: min(92%, 720px); }
.hero-tool .campus-card { padding: var(--campus-space-4); display: grid; gap: var(--campus-space-3); }
.hero-tool-line { display: flex; align-items: center; gap: var(--campus-space-2); color: var(--campus-color-text-secondary); font-size: var(--campus-text-sm); }
.hero-progress { height: 6px; border-radius: 3px; background: var(--campus-color-fill); overflow: hidden; }
.hero-progress i { display: block; height: 100%; border-radius: 3px; background: var(--campus-tint); transition: width .3s; }
.hero-cursor { display: inline-block; width: .55em; height: 1em; margin-left: 2px; vertical-align: -.15em; background: currentColor; opacity: .6; animation: hero-blink 1s steps(2) infinite; }
@keyframes hero-blink { 50% { opacity: 0; } }
.hero-composer .campus-composer-main > textarea { max-height: 160px; }
.hero-threads { display: none; }
@media (min-width: 900px) {
  .hero-thread { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .hero-threads { display: flex; flex-direction: column; gap: 2px; grid-row: 1 / span 3; padding: var(--campus-space-3); border-right: 1px solid var(--campus-color-line-soft); overflow: auto; }
  .hero-threads .campus-button { justify-content: flex-start; width: 100%; }
}

/* Accent swatches on the naming screen and in the You sheet. */
.hero-accents { display: flex; gap: var(--campus-space-3); }
.hero-accents button { width: 36px; height: 36px; border-radius: 18px; border: 2px solid transparent; cursor: pointer; }
.hero-accents button[aria-pressed="true"] { border-color: var(--campus-color-heading); }

/* An opened app inside the launcher. */
.hero-frame { width: 100%; height: min(70vh, 640px); border: 0; border-radius: var(--campus-radius-card); background: var(--campus-color-fill); }
@media (max-width: 899px) { .hero-frame { height: calc(100dvh - 200px); min-height: 320px; } }
.hero-code { display: block; padding: var(--campus-space-3); border-radius: var(--campus-radius-control); background: var(--campus-color-fill); font-family: var(--campus-font-mono); font-size: var(--campus-text-xs); white-space: pre-wrap; word-break: break-all; }