/* Demos: Intrasheets, organization chart and formula chain (app.js components) */
.demo-intrasheets { overflow-x: auto; }
.demo-intrasheets iframe { display: block; width: 1200px; height: 800px; max-width: none; margin: 0 auto; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }

.demo-joint { --ink: #1f2937; --muted: #6b7280; --line: #e5e7eb; --bg: #f6f7fb;
    --input: #9ca3af; --formula: #2563eb; --selected: #f59e0b; --prec: #0ea5e9; --dep: #f97316; --pulse: #16a34a;
    font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); }
.demo-joint-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.demo-joint-toolbar button { font: inherit; font-size: 13px; padding: 7px 14px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; cursor: pointer; color: var(--ink); }
.demo-joint-toolbar button:hover { background: #f3f4f6; }
.demo-joint-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: 640px; padding: 20px; box-sizing: border-box; background: var(--bg); border-radius: 14px; }
.demo-joint-sheet, .demo-joint-paper { min-width: 0; border: 1px solid var(--line); background: #fff; box-shadow: 0 4px 14px rgba(17, 24, 39, .05); }
.demo-joint-sheet .jss img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.demo-joint-paper { position: relative; overflow: hidden; background: var(--bg); }
.demo-joint-scroll { position: absolute; inset: 0; overflow: auto; background-image: radial-gradient(#dfe3ea 1px, transparent 1px); background-size: 22px 22px; }
.demo-joint-scroll svg { display: block; }
.demo-joint-legend { position: absolute; right: 14px; bottom: 12px; font-size: 12px; background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; line-height: 21px; z-index: 2; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.demo-joint-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.demo-joint-hint { position: absolute; left: 14px; bottom: 12px; font-size: 12px; color: var(--muted); background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; z-index: 2; }
.demo-joint-hint.warn { color: #b91c1c; border-color: #fca5a5; }
.demo-joint .cell { box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 12px 8px 14px;
    background: #fff; border-radius: 10px; border: 1px solid var(--line); border-left: 5px solid var(--tone, var(--input));
    box-shadow: 0 6px 18px rgba(17, 24, 39, .08); cursor: pointer; user-select: none; transition: box-shadow .15s ease, border-color .15s ease; }
.demo-joint .cell.formula { --tone: var(--formula); }
.demo-joint .cell .name { font-family: "JetBrains Mono", Consolas, monospace; font-weight: 600; font-size: 12px; color: var(--tone, var(--input)); letter-spacing: .02em; }
.demo-joint .cell .value { font-weight: 600; font-size: 14px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-joint .cell .formulaText { font-family: "JetBrains Mono", Consolas, monospace; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-joint .cell.selected { box-shadow: 0 0 0 3px #fde68a, 0 8px 22px rgba(17, 24, 39, .12); border-color: var(--selected); border-left-color: var(--selected); }
.demo-joint .cell.prec { box-shadow: 0 0 0 3px #bae6fd, 0 8px 22px rgba(17, 24, 39, .10); border-color: var(--prec); border-left-color: var(--prec); }
.demo-joint .cell.dep { box-shadow: 0 0 0 3px #fed7aa, 0 8px 22px rgba(17, 24, 39, .10); border-color: var(--dep); border-left-color: var(--dep); }
.demo-joint .cell.pulse { box-shadow: 0 0 0 3px #bbf7d0, 0 8px 22px rgba(17, 24, 39, .10); border-color: var(--pulse); border-left-color: var(--pulse); background: #f0fdf4; }
.demo-joint .card { box-sizing: border-box; width: 100%; height: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px;
    background: #fff; border-radius: 12px; border: 1px solid var(--line); border-left: 5px solid var(--dept, #9ca3af);
    box-shadow: 0 6px 18px rgba(17, 24, 39, .08); cursor: grab; user-select: none; }
.demo-joint .card.selected { box-shadow: 0 0 0 3px #fde68a, 0 8px 22px rgba(17, 24, 39, .12); border-color: #f59e0b; }
.demo-joint .card.target { box-shadow: 0 0 0 3px #bfdbfe; border-color: #3b82f6; }
.demo-joint .card .photo { width: 48px; height: 48px; border-radius: 50%; flex: none; background: var(--dept, #9ca3af); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 15px; overflow: hidden; }
.demo-joint .card .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-joint .card .text { min-width: 0; flex: 1; }
.demo-joint .card .name { font-weight: 600; font-size: 13px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-joint .card .role { font-size: 11.5px; line-height: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-joint .card .meta { margin-top: 4px; font-size: 10.5px; color: var(--dept, #9ca3af); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.demo-joint .card .reports { flex: none; min-width: 20px; height: 22px; border-radius: 11px; background: #f3f4f6; color: var(--muted); font-size: 11px; font-weight: 600; display: grid; place-items: center; padding: 0 6px; }
@media (max-width: 900px) { .demo-joint-grid { grid-template-columns: 1fr; height: auto; } .demo-joint-sheet, .demo-joint-paper { height: 520px; } }