/* LeadPole product UI rebuilt in HTML/CSS for the landing page frames.
   Matches the CRM: 13px Inter, 4px radii, hairline borders, tag pairs. Canvas 1280 x 760, scaled to fit by JS (fitFrames). */

.app { --w: 1280px; --h: 760px; position: relative; width: var(--w); height: var(--h); display: grid; grid-template-columns: 208px minmax(0, 1fr);
  background: var(--bg-1); color: var(--fg-1); font: 400 13px/1.5 var(--font); letter-spacing: 0; transform-origin: 0 0; text-align: left; }
.app svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sidebar */
.sb { display: flex; flex-direction: column; padding: 10px 8px; gap: 2px; }
.sb__ws { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px; font-weight: 500; }
.sb__ws .mark { width: 16px; height: 16px; }
.sb__ws svg.chev { width: 12px; height: 12px; color: var(--fg-3); }
.sb__label { margin: 14px 8px 4px; color: var(--fg-3); font-size: 11.5px; }
.sb__item { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 4px; color: var(--fg-2); }
.sb__item.is-active { background: var(--tr-light); color: var(--fg-1); }
.sb__item .cnt { margin-left: auto; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px; font-size: 11px; display: grid; place-items: center; color: var(--t-red); background: var(--b-red); }
.sb__me { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 6px; }
.sb__me small { display: block; color: var(--fg-3); font-size: 12px; line-height: 1.2; }
.ic-red { color: var(--t-red); } .ic-blue { color: var(--t-blue); } .ic-turq { color: var(--t-turquoise); } .ic-sky { color: var(--t-sky); }

/* Main panel */
.main { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 8px 8px 8px 0; border-radius: 8px;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--tr-lighter); overflow: hidden; }
.hdr { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 16px; flex: none; border-bottom: 1px solid var(--tr-lighter); }
.hdr__title { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.hdr__right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.mini-btn { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 4px; font-size: 13px; font-weight: 500; }
.mini-btn--blue { background: var(--blue); color: #fff; }
.mini-btn--ghost { color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--tr-medium); }
.mini-btn--ghost:hover { background: var(--tr-light); color: var(--fg-1); }
.bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; flex: none; border-bottom: 1px solid var(--tr-lighter); color: var(--fg-3); }
.bar b { color: var(--fg-1); font-weight: 500; }
.bar .grow { flex: 1; }
.bar .opt { color: var(--fg-2); }
.bar span { display: inline-flex; align-items: center; gap: 6px; }

/* Avatars and chips */
.av { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; flex: none; font-size: 10px; font-weight: 600; font-style: normal;
  color: var(--tt); background: var(--tb); }
.av--sq { border-radius: 3px; }
.av--lg { width: 24px; height: 24px; font-size: 12px; border-radius: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 20px; max-width: 100%; padding: 0 6px 0 3px; border-radius: 4px; background: var(--tr-light); color: var(--fg-1); }
.chip--plain { background: none; padding-left: 0; }

/* Kanban */
.board { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); flex: 1; min-height: 0; }
.col { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; min-width: 0; border-right: 1px solid var(--tr-lighter); }
.col:last-child { border-right: 0; }
.col__head { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 4px; color: var(--fg-3); }
.col__head .meta { font-variant-numeric: tabular-nums; }
.card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; padding: 8px; border-radius: 4px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--tr-light);
  transition: box-shadow .2s, background-color .2s; }
.card__t { min-width: 0; display: flex; align-items: center; gap: 6px; height: 22px; font-weight: 500; }
.card__r { min-width: 0; display: flex; align-items: center; gap: 8px; height: 22px; color: var(--fg-1); }
.card__r > svg { color: var(--fg-3); }
.card__r.muted { color: var(--fg-3); }
.card.is-moving { z-index: 4; background: var(--bg-4); box-shadow: inset 0 0 0 1px var(--blue), 0 12px 28px -8px rgb(0 0 0 / .7), 0 0 0 4px rgb(62 99 221 / .18); }
.card.is-landed { box-shadow: inset 0 0 0 1px var(--bd-blue, #3a4f97); }
.col__cards { display: flex; flex-direction: column; gap: 8px; }
.add-new { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px; color: var(--fg-3); }
button.card { text-align: left; cursor: pointer; width: 100%; }
button.card:hover { background: var(--bg-4); }
button.card[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--blue); background: var(--bg-4); }

/* Tables and tabs inside the app */
.atabs { display: flex; gap: 4px; height: 44px; padding: 0 12px; flex: none; border-bottom: 1px solid var(--tr-lighter); }
.atabs button { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; color: var(--fg-3); font-weight: 500; }
.atabs button:hover { color: var(--fg-1); }
.atabs button[aria-selected="true"] { color: var(--fg-1); }
.atabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--fg-1); }
.atabs .n { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.scroll-x { flex: 1; min-height: 0; overflow: auto; }
.grp { display: flex; align-items: center; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--tr-lighter); }
.trow { display: grid; align-items: center; gap: 12px; min-height: 40px; padding: 0 16px; border-bottom: 1px solid var(--tr-lighter); transition: opacity .3s, background-color .2s; }
.trow:hover { background: var(--tr-lighter); }
.tasks .trow { grid-template-columns: 18px minmax(0, 1fr) 84px 220px 140px 150px; }
.thead { display: grid; align-items: center; gap: 12px; height: 34px; padding: 0 16px; color: var(--fg-3); border-bottom: 1px solid var(--tr-lighter); }
.thead span { display: flex; align-items: center; gap: 6px; }
.emp .thead, .emp .trow { grid-template-columns: 220px 230px 110px 150px 140px minmax(0, 1fr); }
.teams .thead, .teams .trow { grid-template-columns: 200px 200px 160px minmax(0, 1fr); }
.chk { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--fg-4); color: transparent; transition: background-color .2s, box-shadow .2s; }
.chk:hover { box-shadow: inset 0 0 0 1.5px var(--fg-2); }
.chk svg { width: 11px; height: 11px; stroke-width: 2.4; }
.chk[aria-checked="true"] { background: var(--t-green); box-shadow: none; color: var(--bg-1); }
.trow.is-done .ttl { color: var(--fg-3); text-decoration: line-through; }
.due-red { color: var(--t-red); } .due-amber { color: var(--t-amber); } .due { color: var(--fg-2); }
.email { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--tr-medium); color: var(--fg-2); }
.stack { display: flex; } .stack .av { box-shadow: 0 0 0 2px var(--bg-2); margin-left: -4px; } .stack .av:first-child { margin-left: 0; }
.records-n { padding: 10px 16px; color: var(--fg-3); }

/* Record drawer */
.drawer[hidden], .dim[hidden] { display: none; }
.dtabs .n, .atabs .n { color: var(--fg-3); font-variant-numeric: tabular-nums; }
/* Kept faint (was .45): the cards under it stay clickable, so their text must keep 4.5:1 (fg-3 counts drop to 2.2:1 at .45). */
.dim { position: absolute; inset: 0; background: rgb(0 0 0 / .06); pointer-events: none; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 460px; display: flex; flex-direction: column; background: var(--bg-2);
  box-shadow: -1px 0 0 var(--tr-light), -8px 0 24px rgb(0 0 0 / .4); z-index: 6; animation: drawer-in .35s var(--ease); }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
.drawer__top { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--tr-lighter); color: var(--fg-3); }
.drawer__top .x { margin-left: auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--fg-2); }
.drawer__head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 8px; font-size: 16px; font-weight: 600; }
.fields { display: grid; grid-template-columns: 120px minmax(0, 1fr); row-gap: 2px; padding: 4px 16px 12px; }
.fields dt { display: flex; align-items: center; gap: 8px; height: 30px; color: var(--fg-3); }
.fields dd { display: flex; align-items: center; height: 30px; min-width: 0; }
.dtabs, .dtabs__list { display: flex; gap: 4px; }
.dtabs { padding: 0 12px; border-bottom: 1px solid var(--tr-lighter); border-top: 1px solid var(--tr-lighter); }
.dtabs button { position: relative; height: 40px; padding: 0 6px; color: var(--fg-3); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.dtabs button[aria-selected="true"] { color: var(--fg-1); }
.dtabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--fg-1); }
.dtabs button:hover { color: var(--fg-1); }
.dbody { flex: 1; overflow: auto; padding: 12px 16px; display: grid; align-content: start; gap: 8px; }
.note { padding: 10px 12px; border-radius: 6px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--tr-light); }
.note__meta { display: flex; align-items: center; gap: 6px; color: var(--fg-3); margin-bottom: 4px; }
.note__meta b { color: var(--fg-1); font-weight: 500; }
.dtask { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; padding: 0 4px; border-bottom: 1px solid var(--tr-lighter); }
.dtask.is-new { animation: row-in .4s var(--ease); background: rgb(62 99 221 / .08); }
@keyframes row-in { from { opacity: 0; transform: translateY(-4px); } }
.addtask { display: flex; gap: 8px; align-items: center; }
.addtask input { flex: 1; height: 30px; padding: 0 10px; border-radius: 4px; border: 0; outline: 0; font: inherit; color: var(--fg-1);
  background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--blue); }
.addtask input::placeholder { color: var(--fg-4); }
.empty { color: var(--fg-3); padding: 8px 0; }

/* App interactive focus */
/* Divided by the canvas scale (--s, set by fit()) so the ring stays 2px on screen in scaled frames. */
.app button:focus-visible, .app input:focus-visible { outline: calc(2px / var(--s, 1)) solid var(--blue-text); outline-offset: calc(1px / var(--s, 1)); border-radius: 4px; }

/* Compact (frame narrower than 680px): no scaling, sidebar hidden, content scrolls inside the frame */
.frame.is-compact .app { width: 100%; height: 520px; grid-template-columns: minmax(0, 1fr); }
.frame.is-compact .sb { display: none; }
.frame.is-compact .main { margin: 0; border-radius: 0; box-shadow: none; }
.frame.is-compact .board { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.frame.is-compact .col { flex: 0 0 216px; scroll-snap-align: start; }
.frame.is-compact .scroll-x > .tbl { min-width: 760px; }
.frame.is-compact .drawer { width: 100%; }
.frame.is-compact .hdr__right .mini-btn--blue { display: none; }
.frame.is-compact .bar .opt { display: none; }
.app--hero { --h: 640px; }
/* Keep horizontal swipes for tab switching on scaled showcase frames */
#showcase-frame:not(.is-compact) { touch-action: pan-y; }

/* Utility classes used by the JS-rendered screens (the CSP forbids inline style attributes) */
.fg-3, .due.fg-3 { color: var(--fg-3); }
.min-0 { min-width: 0; }
.dtabs .dtabs__add { height: 26px; padding: 0 8px; margin: auto 0 auto auto; } /* beats .dtabs button (40px tab height) */
.stack__n { margin-left: 8px; color: var(--fg-3); }