/* ============================================================================
   LoopSuite — integration pages.
   Loaded AFTER /assets/site.css, which supplies the tokens, the .wrap/.sec
   rhythm, the buttons, the cross-app flow (.flowframe/.flow) and the .phone
   frame. This file only adds what the integration pages need on top:
   app tiles, status pills, the in-phone app-screen mock and the honest
   "not connected yet" card.
   Everything here is scoped to classes that exist nowhere else on the site.
   ========================================================================== */

/* ---------- breadcrumb ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding-top:22px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--text)}
.crumbs span[aria-current]{color:var(--text)}
.crumbs li::after{content:"/";margin-left:8px;color:rgba(243,244,239,.25)}
.crumbs li:last-child::after{content:none}
.crumbs ol,.crumbs li{display:flex;align-items:center;gap:8px;margin:0;padding:0}
.crumbs ol{flex-wrap:wrap}

/* ---------- hero ---------- */
.ihero{padding:26px 0 4px}
.ihero h1{font-size:clamp(30px,7.2vw,50px);letter-spacing:-.04em}
.ihero .sub{margin-top:14px;font-size:19px;color:var(--muted);max-width:34ch}
.ihero-grid{display:grid;gap:28px;align-items:center}
.ihero-cta{margin-top:26px;display:grid;gap:10px}
.ihero-note{margin-top:12px;font-size:14px;color:var(--muted)}
@media (min-width:880px){
  .ihero{padding:34px 0 8px}
  .ihero-grid{grid-template-columns:1.15fr .85fr;gap:44px}
  .ihero-cta{display:flex;gap:12px}
}

/* the big app mark that opens the page — one icon, no paragraph */
.appmark{display:flex;flex-direction:column;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-xl);padding:30px 22px}
.appmark .big{width:88px;height:88px;border-radius:26px;background:var(--raised);border:1px solid var(--hair-2);
  display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 18px 34px -18px rgba(0,0,0,.9)}
.appmark .big svg{width:46px;height:46px}
.appmark .big.mono{background:#1b1b1b;font-size:34px;font-weight:700;letter-spacing:-.04em;color:var(--muted)}
.appmark .nm{font-size:17px;font-weight:600}

/* ---------- status pills — the app's real vocabulary only ---------- */
.pillrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pill-s{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;line-height:1;
  padding:7px 12px;border-radius:999px;background:var(--raised);border:1px solid var(--hair-2);color:var(--muted)}
.pill-s::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pill-s.on{color:var(--good);border-color:rgba(158,211,42,.35)}
.pill-s.needs{color:var(--amber);border-color:rgba(229,176,76,.35)}
.pill-s.working{color:var(--accent);border-color:rgba(198,255,52,.35)}
.pill-s.off{color:var(--muted)}

/* ---------- what's live today: only the five verified apps ---------- */
.livegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:22px}
.livecard{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r);padding:13px 14px;transition:border-color .2s var(--ease),background .2s var(--ease)}
.livecard:hover{border-color:rgba(198,255,52,.35);background:var(--raised)}
.livecard .ic{width:36px;height:36px;border-radius:11px;background:var(--raised);border:1px solid var(--hair-2);
  display:flex;align-items:center;justify-content:center;flex:none}
.livecard .ic svg{width:20px;height:20px}
.livecard b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}

/* ---------- the honest card on a page for an app we have not connected --- */
.notlive{background:var(--raised);border:1px solid rgba(229,176,76,.3);border-radius:var(--r-xl);padding:22px}
.notlive-hd{display:flex;align-items:center;gap:14px}
.notlive .ic{width:48px;height:48px;border-radius:14px;background:#1b1b1b;border:1px solid var(--hair-2);
  display:flex;align-items:center;justify-content:center;flex:none;font-size:20px;font-weight:700;color:var(--muted)}
.notlive h2{font-size:19px;letter-spacing:-.02em}
.notlive p{margin-top:14px;color:var(--muted);font-size:15.5px;line-height:1.55}
.notlive .pill-s{margin-top:4px}
/* same card, but for an app the connection is genuinely live for */
.notlive.is-live{border-color:rgba(158,211,42,.32)}
.notlive.is-live .ic{background:#fff;padding:9px}
.notlive.is-live .ic svg{width:100%;height:100%}

/* ---------- the phone mock: a real app screen, built in markup ---------- */
.mock{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--canvas);
  font-size:11px;line-height:1.4;overflow:hidden}
.mock-top{display:flex;align-items:center;justify-content:space-between;padding:26px 14px 10px;
  border-bottom:1px solid var(--hair)}
.mock-top b{font-size:13px;font-weight:600;letter-spacing:-.015em}
.mock-body{flex:1;padding:12px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.mock-card{background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:11px}
.mock-card .lbl{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mock-card .ttl{margin-top:5px;font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.mock-card .txt{margin-top:6px;color:var(--muted);font-size:11px;line-height:1.45}
.mock-line{height:6px;border-radius:3px;background:var(--raised);margin-top:7px}
.mock-line.s{width:62%}
.mock-foot{padding:11px 12px 16px;border-top:1px solid var(--hair);display:flex;gap:8px}
.mock-btn{flex:1;text-align:center;font-size:11.5px;font-weight:600;padding:9px 6px;border-radius:9px;
  background:var(--accent);color:var(--accent-ink)}
.mock-btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--hair-2)}
.mock .pill-s{font-size:9.5px;padding:5px 9px}

/* ---------- 2-4 word labels under the visuals ---------- */
.shot{display:grid;gap:22px;align-items:center;margin-top:26px}
@media (min-width:820px){.shot{grid-template-columns:300px 1fr;gap:44px}}
.shot h2{font-size:clamp(22px,4.8vw,30px);letter-spacing:-.03em}
.shot .lede{margin-top:12px}

/* ---------- FAQ ---------- */
.faqs{display:grid;gap:10px;margin-top:24px}
.faqs details{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:16px 18px}
.faqs summary{cursor:pointer;font-size:15.5px;font-weight:600;letter-spacing:-.015em;list-style:none}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+";float:right;color:var(--accent);font-weight:600}
.faqs details[open] summary::after{content:"–"}
.faqs details p{margin-top:11px;color:var(--muted);font-size:14.5px;line-height:1.55}

/* ---------- related links ---------- */
.rel{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.rel a{display:inline-flex;align-items:center;font-size:14px;color:var(--muted);background:var(--surface);
  border:1px solid var(--hair);border-radius:999px;padding:9px 15px;transition:color .2s var(--ease),border-color .2s var(--ease)}
.rel a:hover{color:var(--text);border-color:var(--hair-2)}

/* the employee cards come from site.css (.emps/.emp); only the link needs a hit area */
.emp a.hire{margin-top:auto;padding-top:16px}

/* ---------- hub: the full list, each entry labelled live or not ---------- */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px 22px;margin-top:30px}
.hubcol h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;
  padding-bottom:10px;border-bottom:1px solid var(--hair)}
.hubcol ul{display:grid;gap:2px;margin-top:10px}
.hubcol li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0}
.hubcol li a{font-size:14.5px;color:var(--text)}
.hubcol li a:hover{color:var(--accent)}
.hubcol .pill-s{font-size:10px;padding:4px 8px;flex:none}

/* ---------------------------------------------------------------------------
   Fix: site.css declares a legal-page layout `.doc{display:grid;gap:34px;
   padding:38px 0 20px}` at line 188, which also matches the cross-app flow's
   `.tile.doc` document tile and knocks its icon out of the circle. Scoped
   correction — site.css itself is owned elsewhere.
   ------------------------------------------------------------------------- */
.tile.doc{display:flex;align-items:center;justify-content:center;gap:0;padding:0}