/* Marketplace palette for the /swarm landing page.
 *
 * Loaded AFTER style.css so it overrides by cascade rather than by editing an
 * 803KB stylesheet that gets re-synced from swarm-cowork. Keeping the whole
 * repaint in one small file is what makes that re-sync a diff instead of a
 * merge.
 *
 * ── The palette, lifted from app/marketplace ──────────────────────────────
 *
 * The marketplace is warm: paper-white grounds, a terracotta accent, and ink
 * that is brown-black rather than blue-black. The replica shipped cool: cream
 * greys, an indigo→periwinkle→teal brand gradient, and #111318 ink. Side by
 * side they read as two products, which is the thing being fixed.
 *
 *   #1F1E1D  ink            #C15F3C  accent        #A94E2F  accent, pressed
 *   #D97757  accent, lit    #FAF9F5  ground        #F0EEE6  raised ground
 *   #E5E1D5  hairline       #DAD5C8  border        #C9C3B2  border, strong
 *   #8A8578  muted text     #6B675C  secondary     #5E5A51  body
 *
 * ── Scope ─────────────────────────────────────────────────────────────────
 *
 * Everything below is scoped under .home-view. The landing page is what was
 * asked for, and the chat surface has its own long-settled treatment that a
 * global token swap would disturb in places nobody has looked at yet.
 * Widening this later means moving rules out of that scope, not rewriting them.
 */

/* ══════════════════════════════════════════════════════════════════════════
 * SIDEBAR SCOPE — trial replica
 *
 * Not palette: this trims the nav to the surfaces that actually have a
 * backend here. Chats, My Files, Apps and Pulse do. Settings, Telemetry,
 * Nexus Log, Dashboard and Automations are swarm-cowork server features with
 * no counterpart on this platform, and every one of them opens a page that
 * renders empty and 404s in the console.
 *
 * Pulse came OFF this list when it got a backend: /swarm/api/inbox,
 * /inbox/status and /scheduled-tasks now answer from the caller's own app
 * automations (lib/pulse.ts), so its page renders real runs rather than an
 * empty shell. The rule outlived the reason for it by one deploy — a nav
 * entry hidden here is invisible to anyone reading index.html, where the
 * button looks perfectly enabled.
 *
 * Automations stays hidden deliberately, and is not an oversight: upstream it
 * is the personal half of a split this platform does not have. Every
 * automation here belongs to one owner and is already listed under Pulse →
 * Tasks, so a second page would show the same rows under a different name.
 *
 * Done in CSS rather than by deleting the markup for two reasons. First,
 * auth-client.js's applyAdminGate ACTIVELY un-hides five of these for admins
 * (`btn.classList.toggle('hidden', !isAdmin)`) — so removing the `hidden`
 * class is not something markup can win; a stylesheet rule can. Second, the
 * buttons stay in index.html, which keeps the re-sync diff against
 * swarm-cowork small.
 *
 * `!important` is load-bearing here, not decoration: it is what outranks the
 * class the admin gate removes at runtime.
 * ══════════════════════════════════════════════════════════════════════════ */

#sidebarSettingsBtn,
#sidebarTelemetryBtn,
#sidebarNexusLogsBtn,
#sidebarDashboardBtn,
#sidebarAutomationsBtn {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * PINNED APP — one indicator, not two
 *
 * A pinned app was announced twice: a bar above the composer reading
 * "<app> · marketplace app  ✕   Answered on the marketplace, not by the local
 * planner", and the picker pill inside the composer reading the same app's
 * name. The bar is the redundant one — the pill sits where the decision is
 * made and is also the control that changes it, so it is the one that earns
 * the space.
 *
 * The bar is hidden rather than deleted from index.html: renderPinBars() in
 * marketplace-apps.js writes to it on every pin change and reads it back, so
 * removing the element would mean editing a copied file AND auditing that
 * function's null-handling. Hiding costs one rule and keeps both intact.
 * ══════════════════════════════════════════════════════════════════════════ */

#homeAppPinBar,
#chatAppPinBar {
  display: none !important;
}

/* With the bar gone the pill is the only thing naming the pinned app, so it
 * has to be able to say the whole name. Upstream capped it at 130px, which
 * truncated "Budget vs Actuals fiscal desk" to "Budget vs Actuals …" — fine
 * when a bar above spelled it out, wrong now that nothing else does.
 *
 * A ch-based cap rather than a fixed pixel width: it scales with the font and
 * degrades to an ellipsis only for genuinely long names, while the composer
 * floor still has room for Data Explorer and Data & Analysis beside it. */
.home-view .mp-picker .scope-selector-label,
.mp-picker .scope-selector-label {
  max-width: 32ch;
}

/* ══════════════════════════════════════════════════════════════════════════
 * LANDING PAGE PALETTE
 * ══════════════════════════════════════════════════════════════════════════ */

.home-view {
  --mp-ink: #1f1e1d;
  --mp-accent: #c15f3c;
  --mp-accent-dark: #a94e2f;
  --mp-accent-lit: #d97757;
  --mp-ground: #faf9f5;
  --mp-ground-raised: #f0eee6;
  --mp-hairline: #e5e1d5;
  --mp-border: #dad5c8;
  --mp-muted: #8a8578;
  --mp-secondary: #6b675c;
  --mp-body: #5e5a51;

  background-color: var(--mp-ground);
  /* The dot grid below is absolutely positioned; .home-view carries no
   * position of its own upstream, so without this the texture would resolve
   * against the viewport and sit over the whole app instead of the landing. */
  position: relative;
}

/* The composer, chips and hero all need to sit above the texture layer. They
 * are static by default, so z-index alone would not apply to them. */
.home-view > * {
  position: relative;
  z-index: 1;
}

/* The marketplace hero's dot grid, masked to fade out before it reaches the
 * composer. Same 22px pitch and same ink at 7% as app/marketplace/layout.tsx,
 * so the two surfaces share a texture and not just a set of hex values. */
.home-view::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 60%;
  pointer-events: none;
  background-image: radial-gradient(rgba(31, 30, 29, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black 25%, transparent 75%);
}

/* The greeting keeps its gradient treatment — it is the page's one piece of
 * display type and flattening it to a solid would lose the thing that makes
 * the landing feel like a landing. Only the ramp changes: terracotta into ink,
 * which is the marketplace's own accent-to-heading move on its hero. */
.home-view .greeting-text {
  background-image: linear-gradient(
    104deg,
    var(--mp-accent) 0%,
    var(--mp-accent-lit) 26%,
    #8a5a44 58%,
    var(--mp-ink) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.home-view .greeting-text-content--typing::after {
  background: var(--mp-accent);
}

/* ── Composer ────────────────────────────────────────────────────────────── */

.home-view .input-container.home-input .input-wrapper {
  background:
    linear-gradient(135deg, rgba(193, 95, 60, 0.03) 0%, rgba(255, 255, 255, 0) 45%,
                    rgba(217, 119, 87, 0.035) 100%),
    rgba(255, 255, 255, 0.9);
  border: 1.5px solid var(--mp-hairline);
  box-shadow:
    0 4px 20px rgba(31, 30, 29, 0.05),
    0 1px 4px rgba(31, 30, 29, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.home-view .input-container.home-input .input-wrapper:focus-within {
  border-color: rgba(193, 95, 60, 0.42);
  box-shadow:
    0 6px 26px rgba(193, 95, 60, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Apps / Data Explorer / Data & Analysis pills along the composer floor. */
.home-view .scope-selector-btn {
  border-color: var(--mp-border);
  color: var(--mp-body);
}

.home-view .scope-selector-btn:hover,
.home-view .scope-selector-btn.active {
  border-color: var(--mp-accent);
  color: var(--mp-accent);
}

/* ── Suggestion chips ────────────────────────────────────────────────────── */

.home-view .home-chip {
  background: linear-gradient(180deg, #ffffff 0%, var(--mp-ground) 100%);
  border: 1px solid var(--mp-hairline);
  color: var(--mp-body);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(31, 30, 29, 0.03);
}

.home-view .home-chip:hover {
  border-color: var(--mp-accent);
  color: var(--mp-accent-dark);
  background: linear-gradient(180deg, #ffffff 0%, var(--mp-ground-raised) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 14px rgba(193, 95, 60, 0.12);
}

.home-view .home-chip-icon {
  color: var(--mp-accent);
}

/* ── Pinned-app bar ──────────────────────────────────────────────────────── */
/*
 * Only the default matters here. renderPinBars() writes the app's OWN accent
 * onto .mp-pin-chip as an inline style, and an app's accent must win — it is
 * how someone tells two pinned apps apart at a glance. Inline styles beat this
 * rule already, so this is the unaccented fallback and nothing more.
 */
.home-view .mp-pin-chip {
  border-color: var(--mp-border);
  color: var(--mp-secondary);
}

.home-view .insight-pin-hint {
  color: var(--mp-muted);
}

@media (prefers-reduced-motion: reduce) {
  .home-view::before {
    display: none;
  }
}