/* Scale Plugin Store pages (/plugins/ and /plugins/developers/). Builds on
   flagship.css tokens and the scale-integrations.css / teams-agency.css page
   sections. Everything here is an illustrative interface drawn in HTML. */

.plugins-hero h1 { max-width: 12ch; }
.plugins-hero .button-row { margin-top: 26px; }
.plugins-hero-note { margin: 18px 0 0; color: rgba(255, 255, 255, 0.62); font-size: 14px; line-height: 1.5; }
.plugins-hero-note a { color: #fff; }
.plugins-hero .video-card--hero { align-self: center; }
.plugins-hero .video-card.video-card--hero .video-card-hero-label { color: rgba(255, 255, 255, 0.62); }

.plugins-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #fff;
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plugins-status::before { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); content: ""; }
.plugins-hero .plugins-status { display: flex; width: fit-content; margin-bottom: 22px; }
/* The dark hero colours its paragraphs white; cards inside it keep ink text. */
.plugins-hero .plugin-mock p { max-width: none; color: #3f403b; font-size: 15px; line-height: 1.45; }

/* Shared mock chrome */
.plugin-mock {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--ink);
}

.plugin-mock-label {
  display: block;
  margin-bottom: 14px;
  color: var(--muted);
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.plugin-mock h3 { margin: 0; font-size: 20px; letter-spacing: -0.03em; }
.plugin-mock p { margin: 0; }

/* Listing card */
.plugin-listing-head { display: grid; align-items: center; gap: 14px; grid-template-columns: 56px minmax(0, 1fr) auto; }
.plugin-listing-icon { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 16px; background: var(--lilac); }
.plugin-listing-icon svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.plugin-listing-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }
.plugin-listing-price { padding: 6px 12px; border-radius: 999px; background: var(--lime); font-size: 13px; font-weight: 640; }
.plugin-listing-tagline { margin: 16px 0 0 !important; color: #3f403b; font-size: 15px; line-height: 1.45; }
.plugin-listing-shots { display: grid; gap: 8px; margin-top: 16px; grid-template-columns: 1.4fr 1fr 1fr; }
.plugin-listing-shots i { display: block; height: 92px; border-radius: 12px; background: linear-gradient(135deg, var(--soft), var(--cream)); }
.plugin-listing-shots i:nth-child(2) { background: linear-gradient(135deg, var(--soft), var(--mint)); }
.plugin-listing-shots i:nth-child(3) { background: linear-gradient(135deg, var(--soft), var(--pink)); }
.plugin-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.plugin-chip-row li { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); font-size: 12px; font-weight: 560; }
.plugin-listing-tabs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.plugin-listing-tabs b { color: var(--ink); }
.plugin-listing-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.plugin-listing-foot span { color: var(--muted); font-size: 12px; }
.plugin-fake-button { display: inline-flex; min-height: 40px; align-items: center; padding: 8px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 620; }
.plugin-fake-button--ghost { border: 1px solid var(--line); background: #fff; color: var(--ink); }

/* Permission screen */
.plugin-permission-group { margin-top: 16px; }
.plugin-permission-group > strong { display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: -0.01em; }
.plugin-permission-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.plugin-permission-list li { display: grid; align-items: start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--soft); font-size: 14px; line-height: 1.4; grid-template-columns: auto minmax(0, 1fr); }
.plugin-level { padding: 3px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-family: "Geist Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.plugin-level--read { background: var(--mint); border-color: transparent; }
.plugin-level--write { background: var(--cream); border-color: transparent; }
.plugin-level--act { background: var(--lilac); border-color: transparent; }
.plugin-level--auto { background: var(--coral); border-color: transparent; color: #fff; }
.plugin-warning { margin-top: 14px; padding: 14px; border: 2px solid var(--coral); border-radius: 14px; background: color-mix(in srgb, var(--peach) 45%, #fff); }
.plugin-warning > strong { display: block; margin-bottom: 8px; font-size: 14px; }
.plugin-warning .plugin-permission-list li { background: #fff; }
.plugin-mock-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* Approval request */
.plugin-approval { display: grid; gap: 12px; }
.plugin-approval-from { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.plugin-approval-from b { padding: 3px 9px; border-radius: 999px; background: var(--lilac); color: var(--ink); font-size: 12px; }
.plugin-approval-body { padding: 14px; border: 1px solid var(--line); border-radius: 14px; font-size: 14px; line-height: 1.45; }
.plugin-approval-body small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }

.plugins-control-grid { display: grid; align-items: start; gap: 18px; margin-top: 48px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.plugins-control-stack { display: grid; gap: 18px; }
.plugins-control-points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.plugins-control-points li { padding: 18px 20px; border-radius: var(--radius-md); background: var(--soft); }
.plugins-control-points strong { display: block; font-size: 17px; letter-spacing: -0.02em; }
.plugins-control-points span { display: block; margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.45; }

/* Preview and invitation notice: reuses .agency-requirement */
.plugins-notice { margin-top: 0; }

/* The 16 apps */
.plugin-app-grid { display: grid; gap: 10px; margin-top: 44px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plugin-app-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.plugin-app-card strong { display: block; font-size: 17px; letter-spacing: -0.02em; }
.plugin-app-card span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.plugin-app-card:nth-child(4n + 1) { background: color-mix(in srgb, var(--cream) 55%, #fff); }
.plugin-app-card:nth-child(4n + 2) { background: color-mix(in srgb, var(--mint) 45%, #fff); }
.plugin-app-card:nth-child(4n + 3) { background: color-mix(in srgb, var(--lilac) 35%, #fff); }
.plugin-app-card:nth-child(4n + 4) { background: color-mix(in srgb, var(--peach) 45%, #fff); }
.plugin-app-note { max-width: 70ch; margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Developer console mock (dark hero panel) */
.plugin-console { display: grid; gap: 10px; margin-top: 16px; }
.plugin-console-row { display: grid; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; background: #fff; color: var(--ink); grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); font-size: 14px; }
.plugin-console-row small { color: var(--muted); font-family: "Geist Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.plugin-console-row span { overflow-wrap: anywhere; }
.plugin-console-row code { font-family: "Geist Mono", monospace; font-size: 12px; }

/* Terms and tools */
.plugin-term-grid { display: grid; gap: 14px; margin-top: 44px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plugin-term { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.plugin-term small { color: var(--muted); font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.plugin-term h3 { margin: 16px 0 8px; font-size: 26px; letter-spacing: -0.04em; line-height: 1.05; }
.plugin-term p { margin: 0; color: #575952; font-size: 15px; line-height: 1.5; }
.plugin-term--fee { border-color: var(--ink); background: var(--ink); color: #fff; }
.plugin-term--fee small, .plugin-term--fee p { color: rgba(255, 255, 255, 0.72); }
.plugin-term a { font-weight: 620; }

.plugin-check-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: plugin-check; }
.plugin-check-list li { position: relative; padding: 13px 15px 13px 44px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; font-size: 15px; line-height: 1.4; }
.plugin-check-list li::before { position: absolute; top: 12px; left: 14px; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--lime); color: var(--ink); content: "✓"; font-size: 12px; font-weight: 700; }

.plugin-agent-panel { display: grid; overflow: hidden; border-radius: var(--radius-lg); background: var(--navy); color: #fff; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.plugin-agent-panel > div { padding: clamp(28px, 4.4vw, 60px); }
.plugin-agent-panel h2 { max-width: 13ch; margin: 14px 0 16px; font-size: clamp(34px, 4.4vw, 58px); }
.plugin-agent-panel p { max-width: 50ch; margin: 0; color: rgba(255, 255, 255, 0.74); font-size: 17px; line-height: 1.5; }
.plugin-agent-panel .eyebrow { color: rgba(255, 255, 255, 0.72); }
.plugin-agent-panel .eyebrow::before { background: var(--coral); }
.plugin-agent-panel .button-row { margin-top: 24px; }
.plugin-prompt { padding: 18px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px; background: rgba(255, 255, 255, 0.06); }
.plugin-prompt + .plugin-prompt { margin-top: 12px; }
.plugin-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: rgba(255, 255, 255, 0.62); font-family: "Geist Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.plugin-prompt-head span:last-child { padding: 4px 9px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px; color: #fff; }
.plugin-prompt p { margin: 12px 0 0; color: #fff; font-size: 15px; line-height: 1.5; }

.plugins-related { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plugins-related a { display: flex; flex-direction: column; min-height: 200px; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; transition: transform 180ms var(--ease-out), box-shadow 180ms ease; }
.plugins-related a:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.plugins-related a:nth-child(1) { background: var(--lime); }
.plugins-related a:nth-child(2) { background: var(--lilac); }
.plugins-related small { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.plugins-related strong { max-width: 18ch; margin: 16px 0 10px; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.05em; line-height: 1.02; }
.plugins-related span { max-width: 46ch; color: #3f403b; font-size: 16px; line-height: 1.5; }
.plugins-related em { margin-top: auto; padding-top: 20px; font-style: normal; font-weight: 640; }

@media (max-width: 1100px) {
  .plugin-app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .plugins-control-grid, .plugin-agent-panel, .plugin-term-grid { grid-template-columns: 1fr; }
  .plugin-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .plugin-mock { padding: 16px; }
  .plugin-app-grid, .plugins-related { grid-template-columns: 1fr; }
  .plugin-listing-head { grid-template-columns: 48px minmax(0, 1fr); }
  .plugin-listing-icon { width: 48px; height: 48px; }
  .plugin-listing-price { grid-column: 1 / -1; justify-self: start; }
  .plugin-listing-shots i { height: 64px; }
  .plugin-permission-list li { grid-template-columns: 1fr; }
  .plugin-level { justify-self: start; }
  .plugin-console-row { grid-template-columns: 1fr; gap: 4px; }
  .plugin-listing-foot { flex-direction: column; align-items: flex-start; }
}

/* Sub-navigation on both plugin pages: every plugin page, here and in the app, one click away. */
.plugins-subnav { border-bottom: 1px solid rgba(5, 5, 5, 0.1); background: #fff; }
.plugins-subnav-inner { display: flex; align-items: center; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.plugins-subnav-inner::-webkit-scrollbar { display: none; }
.plugins-subnav-group { display: flex; flex: none; align-items: center; gap: 4px; }
.plugins-subnav-group + .plugins-subnav-group { padding-left: 28px; border-left: 1px solid rgba(5, 5, 5, 0.12); }
.plugins-subnav small { margin-right: 10px; color: var(--muted); font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.plugins-subnav a { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 9px; border-bottom: 2px solid transparent; color: #3f403b; font-size: 14px; font-weight: 560; text-decoration: none; white-space: nowrap; }
.plugins-subnav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.plugins-subnav a[aria-current="page"] { border-bottom-color: var(--ink); color: var(--ink); font-weight: 680; }
.plugins-subnav a span { color: var(--muted); font-size: 12px; }