/* Lobbies owner app. The design system (tokens, shell, buttons, inputs, tables, cards, badges, dialogs, toasts, empty states,
   skeletons, command palette, phone bottom bar) lives in ui.css; this file keeps the page-specific pieces, on the same tokens. */
@import url('/ui.css');

/* login page */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--bg-2); padding: var(--s-4); }
.login .card { background: var(--bg); width: 100%; max-width: 420px; padding: var(--s-6); box-shadow: var(--sh-3); }
.login .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.login .brand i { width: 24px; height: 24px; border-radius: 7px; background: var(--red); display: inline-block; position: relative; font-style: normal; }
.login .brand i::after { content: ''; position: absolute; inset: 6px 5px; border-radius: 3px; background: #fff; }
.login .brand i::before { content: ''; }

/* rows used by the lobby editor (milestones, timeline, offers, CTA rules) */
.rowed.ms { grid-template-columns: 90px 1fr 80px 1fr 32px; } .rowed.tl { grid-template-columns: 90px 170px 1fr 1.4fr 110px 32px; }
.rowed.po { grid-template-columns: 140px 1fr 110px 100px 1fr 32px; } .rowed.cr { grid-template-columns: 170px 1fr 190px 1fr 32px; }
.alerts .note { padding: 4px 0; }
.f-row { display: block; font-size: 13px; margin: 4px 0; }

/* Home dashboard (v1.5 N3) */
.home-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.brief-line { font-size: var(--t-md); color: var(--ink-2); max-width: 760px; }
.home-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s-4); margin-top: var(--s-4); align-items: start; } .home-grid .card { margin: 0; }
.home-grid .col { display: grid; gap: var(--s-4); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); } .card-head h2 { margin: 0; } .card-head .note a { color: var(--ink-3); }
.next-lobby { display: flex; gap: var(--s-4); align-items: center; }
.next-lobby .when { flex-shrink: 0; width: 64px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.next-lobby .when b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.03em; padding: 8px 0 2px; } .next-lobby .when span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--red); padding: 2px 0; font-weight: 700; }
.next-lobby .ttl { font-weight: 700; font-size: var(--t-md); } .next-lobby .meta { font-size: var(--t-sm); color: var(--ink-3); margin-top: 2px; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(200,16,46,.5); animation: pulse 1.6s infinite; margin-right: 6px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(200,16,46,.45); } 70% { box-shadow: 0 0 0 8px rgba(200,16,46,0); } 100% { box-shadow: 0 0 0 0 rgba(200,16,46,0); } }
.prop { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); } .prop:last-child { border-bottom: 0; }
.prop .grow { flex: 1; min-width: 0; } .prop .ttl { font-weight: 600; } .prop .meta { font-size: var(--t-sm); color: var(--ink-3); margin-top: 2px; } .prop .body { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.prop .acts { display: flex; gap: 6px; flex-shrink: 0; }
.funnel-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.funnel-row .fr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'l n' 'bar bar'; gap: 6px 12px; align-items: baseline; font-size: 13px; } .funnel-row .fr .l { grid-area: l; } .funnel-row .fr .n { grid-area: n; } .funnel-row .fr .bar { grid-area: bar; } .funnel-row .fr .bar { height: 10px; border-radius: 5px; background: var(--bg-3); overflow: hidden; } .funnel-row .fr .bar i { display: block; height: 100%; background: var(--red); border-radius: 5px; }
.funnel-row .fr .n { text-align: right; font-weight: 700; } .funnel-row .fr .l { color: var(--ink-2); }

/* Hot Now cards */
.hot { border-left: 4px solid var(--red); } .hot-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .hot-top b { font-size: var(--t-md); }
.hot-text { margin: 8px 0 12px; font-size: var(--t-base); color: var(--ink-2); } .hot-acts { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.more summary { list-style: none; } .more summary::-webkit-details-marker { display: none; } .more[open] summary { background: var(--bg-2); }
.more-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .hot .msg { margin-top: 8px; font-size: 13px; }
.hot.compact { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-2); } .hot.compact .hot-text { margin: 4px 0 8px; font-size: 13px; }

/* Pipeline health strip (12 stages) */
.journey { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.j-seg { background: var(--bg-2); border-radius: var(--r-sm); padding: 10px 8px; min-height: 68px; font-size: 11px; color: var(--ink-3); display: flex; flex-direction: column; gap: 4px; }
.j-seg span { font-weight: 600; color: var(--ink-2); } .j-seg.on { background: var(--red-soft); } .j-seg.on b { color: var(--red-ink); font-weight: 600; } .j-seg b { font-weight: 500; }
.brief-talk { border-color: var(--red); } .brief-talk p:first-of-type { font-size: var(--t-md); }

/* Pipeline kanban */
.kanban { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: var(--s-2); overflow-x: auto; padding-bottom: 4px; }
.kanban .col { background: var(--bg-2); border-radius: var(--r); padding: 10px; min-height: 160px; } /* scoped: Home's layout columns are .home-grid .col */
.kanban .col header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; font-weight: 600; } .col header span:last-child { color: var(--ink-3); font-weight: 600; } .kanban .col.over { outline: 2px dashed var(--red); }
.pp { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; margin-bottom: 8px; cursor: grab; box-shadow: var(--sh-1); font-size: 13px; }
.pp select { margin-top: 6px; width: 100%; font-size: 12px; border: 1px solid var(--line-2); border-radius: 6px; padding: 4px; background: var(--bg); color: var(--ink); }
.pp.flash { outline: 2px solid var(--red); }
.install, .push { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .install > div, .push > div { flex: 1; min-width: 200px; }

/* pages editor, money, health, funnel */
.sec.off { opacity: .55; } .sec.off .grid { display: none; }
.card.health { border-color: var(--red); }
.funnel .step { margin: 6px 0; } .funnel .bar { height: 14px; border-radius: 7px; background: var(--ink-4); opacity: .5; } .funnel .step.worst .bar { background: var(--red); opacity: .9; } .funnel .l { font-size: 13px; margin-top: 2px; }
.tbl tr.worst td { background: var(--red-soft); }

/* Feature Board (v1.5 N1) */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-3); }
.board .col { background: var(--bg-2); border-radius: var(--r); padding: 10px; min-height: 200px; } .board .col h3 { font-size: 13px; margin: 4px 6px 10px; display: flex; justify-content: space-between; } .board .col h3 span { color: var(--ink-3); font-weight: 600; }
.board .bc { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font-size: 13px; box-shadow: var(--sh-1); transition: border-color .12s, transform .12s; }
.board .bc:hover { border-color: var(--red); transform: translateY(-1px); } .board .bc b { display: block; margin-bottom: 2px; } .board .bc .note { font-size: 12px; }
.bcard { max-width: 760px; } .bcard .shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .bcard .shots img { width: 100%; border: 1px solid var(--line); border-radius: var(--r-xs); }
.bcard .thread { display: flex; flex-direction: column; gap: 8px; } .bcard .msg { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; } .bcard .msg.claude { background: var(--red-soft); border-color: transparent; } .bcard .msg small { color: var(--ink-3); display: block; margin-bottom: 2px; }

@media (max-width: 860px) {
  .rowed.ms, .rowed.tl, .rowed.po, .rowed.cr { grid-template-columns: 1fr 1fr; }
  .home-grid { grid-template-columns: 1fr; }
  .journey { grid-template-columns: repeat(3, 1fr); }
  .kanban { grid-template-columns: 1fr; overflow: visible; } .kanban .col { min-height: 0; } .kanban .col .pp { cursor: default; }
  .hot-acts .btn.primary { flex: 1; padding: 12px; font-size: var(--t-md); }
  .board { grid-auto-columns: minmax(82vw, 1fr); }
  .tbl.rows { display: block; overflow-x: auto; }
}