/* InkPulse page (12 Oct). Every colour from app.css's tokens, so the dark theme follows. */
#tab-inkpulse { --ip-gap: 16px; }
#inkpulse-body { display: grid; gap: 22px; }
#inkpulse-body .card { padding: 18px 20px; }
.ip-dim { color: var(--muted); }
.ip-head { display: grid; gap: 4px; margin-bottom: 12px; }
.ip-head.ip-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ip-head h3 { margin: 0; font: 500 26px/1.15 var(--display); letter-spacing: -.005em; color: var(--ink); }
.ip-section { min-width: 0; }

/* the live strip */
.ip-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: 13px; color: var(--soft); }
.ip-strip strong { color: var(--ink); font-weight: 600; }
.ip-strip .link { margin-left: auto; }
.ip-live { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: 999px; font: 600 11px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; }
.ip-live i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ip-live.on { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--paper)); border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--rule)); }
.ip-live.on i { animation: ip-pulse 1.8s var(--ease-io) infinite; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
.ip-live.off { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--paper)); border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--rule)); }
@keyframes ip-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* the tiles */
.ip-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ip-gap); }
.ip-tile { display: grid; gap: 6px; align-content: start; padding: 18px 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-1); min-width: 0; }
.ip-tile-label { font: 600 10.5px/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ip-tile-value { font: 500 40px/1 var(--display); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.ip-tile-sub { font-size: 12.5px; color: var(--soft); line-height: 1.45; }
.ip-tile.accent { background: var(--accent-gradient); border-color: transparent; }
.ip-tile.accent .ip-tile-label, .ip-tile.accent .ip-tile-sub { color: color-mix(in srgb, var(--on-accent) 78%, transparent); }
.ip-tile.accent .ip-tile-value { color: var(--on-accent); }
.ip-tile.warn .ip-tile-value { color: var(--stop); }

/* what Jigger takes */
.ip-takes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ip-gap); }
.ip-take { display: grid; gap: 8px; align-content: start; }
.ip-take h4 { margin: 0; font: 600 14px/1.35 var(--text); color: var(--ink); }
.ip-take p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--soft); }
.ip-take-num { font: 500 36px/1 var(--display); color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.ip-take.next { border-style: dashed; background: var(--paper2); }
.ip-take ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.7; color: var(--ink2); }
.ip-badge { justify-self: start; display: inline-flex; align-items: center; height: var(--chip-h); padding: 0 9px; border-radius: 999px; font: 600 10.5px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--accent3); background: var(--accent2); border: 1px solid var(--gold-line); }

/* the chart */
.ip-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--soft); }
.ip-legend span, .ip-channel-keys span { display: inline-flex; align-items: center; gap: 6px; }
.ip-legend i, .ip-channel-keys i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ip-bars { display: block; width: 100%; height: 190px; }
.ip-bars rect { transition: opacity .15s var(--ease); }
.ip-bars rect:hover { opacity: .75; }
.ip-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* the studios */
.ip-studios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ip-gap); }
.ip-studio { display: grid; gap: 12px; align-content: start; border-top: 3px solid var(--studio); }
.ip-studio-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ip-studio h4 { margin: 0; font: 500 24px/1.1 var(--display); color: var(--ink); }
.ip-studio-head p { margin: 4px 0 0; font-size: 12.5px; }
.ip-shops { display: flex; flex-wrap: wrap; }
.ip-spark { width: 100%; height: 40px; display: block; }
.ip-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.ip-stat { display: grid; gap: 2px; min-width: 0; }
.ip-stat span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ip-stat strong { font: 600 18px/1.2 var(--text); color: var(--ink); font-variant-numeric: tabular-nums; }
.ip-stat em { font-style: normal; font-size: 11.5px; color: var(--soft); }
.ip-channels { display: grid; gap: 6px; }
.ip-channel-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--bg2); }
.ip-channel-bar span { display: block; height: 100%; }
.ip-channel-keys { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--soft); }
.ip-foot { margin: 0; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 11.5px; line-height: 1.5; color: var(--muted); }

/* lists */
.ip-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ip-gap); }
.ip-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ip-hbars li { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 13px; }
.ip-hlabel { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-htrack { height: 8px; border-radius: 999px; background: var(--bg2); overflow: hidden; }
.ip-htrack i { display: block; height: 100%; border-radius: 999px; background: var(--accent-gradient); }
.ip-hbars strong { font-variant-numeric: tabular-nums; color: var(--ink); }
.ip-notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ip-note { display: grid; gap: 4px; justify-items: start; justify-content: stretch; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper2); color: var(--ink2); cursor: pointer; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.ip-note:hover { border-color: var(--gold-line); transform: translateY(-1px); }
.ip-note-meta { font: 600 11px/1.2 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.ip-note-text { font-size: 13px; line-height: 1.5; text-align: left; }

/* the connection */
.ip-conn dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0; }
.ip-conn dl div { display: grid; gap: 2px; min-width: 0; }
.ip-conn dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ip-conn dd { margin: 0; font-size: 13px; color: var(--ink2); overflow-wrap: anywhere; }
.ip-warn { color: var(--warn); }

/* waiting */
.ip-wait { display: flex; align-items: center; gap: 14px; color: var(--soft); }
.ip-wait p { margin: 0; }
.ip-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--rule2); border-top-color: var(--accent); animation: ip-spin .9s linear infinite; flex: none; }
@keyframes ip-spin { to { transform: rotate(360deg); } }
#tabs .ip-tab-dot { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--ok); vertical-align: middle; }

@media (max-width: 1280px) {
  .ip-tiles, .ip-takes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ip-studios { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ip-tiles, .ip-takes, .ip-two, .ip-conn dl { grid-template-columns: minmax(0, 1fr); }
  .ip-tile-value { font-size: 32px; }
  .ip-strip .link { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ip-live.on i, .ip-spinner { animation: none; }
}

/* the page reads on its own: the desk's score box and source line stay on the desk pages */
body.inkpulse-open #metric, body.inkpulse-open #dataset { display: none; }

/* the switch between the counts and the chats (13 Oct) */
.ip-switch { justify-self: start; display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-1); }
.ip-switch button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font: 600 13px/1 var(--text); cursor: pointer; }
.ip-switch button.on { background: var(--primary-bg); color: var(--primary-fg); }
.ip-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ip-switch-note { font: 500 11px/1 var(--text); opacity: .7; }
#ip-view { display: grid; gap: 22px; }

/* the chats: the list on the left, the open chat on the right */
.ip-chats { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: var(--ip-gap); align-items: start; }
.ip-chats-list { display: grid; gap: 10px; align-content: start; position: sticky; top: 12px; max-height: calc(100vh - 150px); grid-template-rows: auto auto minmax(0, 1fr); }
.ip-chats-head { display: grid; gap: 8px; }
.ip-chats-head h3 { margin: 0; font: 500 24px/1.15 var(--display); color: var(--ink); }
.ip-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-chips .studio-btn { display: inline-flex; align-items: center; gap: 6px; }
.ip-chip-n { font: 600 10.5px/1 var(--text); color: var(--muted); font-variant-numeric: tabular-nums; }
.ip-chips .studio-btn.on .ip-chip-n { color: inherit; opacity: .75; }
.ip-chat-list { display: grid; gap: 2px; overflow-y: auto; min-height: 0; margin: 0 -8px; padding: 0 8px; }
.ip-chat-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.ip-chat-row:hover { background: var(--paper2); }
.ip-chat-row.on { background: var(--accent2); border-color: var(--gold-line); }
.ip-chat-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ip-chat-row .avatar { width: 36px; height: 36px; font-size: 12px; }
.ip-chat-main { display: grid; gap: 4px; min-width: 0; }
.ip-chat-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ip-chat-top strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-chat-top time { flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ip-chat-tags { display: flex; flex-wrap: wrap; }
.ip-chat-tags .tag { margin-bottom: 0; }
.ip-studio-tag { border-left: 3px solid var(--studio) !important; }
.ip-chat-preview { font-size: 12.5px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-ch-instagram { color: var(--plum); border-color: color-mix(in srgb, var(--plum) 35%, var(--rule)); }
.ip-ch-imessage { color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, var(--rule)); }

.ip-chat-pane { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; min-height: 420px; max-height: calc(100vh - 150px); }
.ip-chat-empty { align-content: center; justify-items: start; gap: 8px; color: var(--soft); }
.ip-chat-empty h3 { margin: 0; font: 500 28px/1.15 var(--display); color: var(--ink); }
.ip-chat-empty p:last-child { max-width: 54ch; line-height: 1.6; }
.ip-chat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.ip-chat-head h3 { margin: 0; font: 500 26px/1.15 var(--display); color: var(--ink); }
.ip-chat-head p { margin: 4px 0 0; font-size: 12.5px; }
.ip-chat-actions { display: flex; gap: 14px; align-items: center; }
.ip-chat-counts { margin: 0; font-size: 12.5px; color: var(--soft); font-variant-numeric: tabular-nums; }
.ip-msgs { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; padding: 12px; border-radius: var(--r); background: var(--canvas); }
.ip-day { align-self: center; margin: 8px 0 2px; padding: 3px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); font: 600 10.5px/1.4 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ip-msg { display: grid; gap: 4px; max-width: min(78%, 620px); padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.ip-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ip-msg-meta { font: 600 10.5px/1.3 var(--text); letter-spacing: .04em; opacity: .75; }
.ip-msg.in { align-self: flex-start; background: var(--bubble-in); border: 1px solid var(--bubble-in-line); color: var(--ink); border-bottom-left-radius: 4px; }
.ip-msg.out { align-self: flex-end; background: var(--bubble-out); border: 1px solid var(--bubble-out-line); color: var(--bubble-out-fg); border-bottom-right-radius: 4px; }
.ip-msg.out .ip-msg-meta { color: var(--chrome-gold); opacity: 1; }
.ip-msg.out.unnamed .ip-msg-meta { color: inherit; opacity: .6; }
.ip-msg.blocked { opacity: .78; border-style: dashed; }
.ip-msg.note { align-self: center; max-width: min(86%, 680px); background: color-mix(in srgb, var(--warn) 12%, var(--paper)); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--rule)); color: var(--ink); border-radius: 10px; }
.ip-msg.note .ip-msg-meta { color: var(--warn); opacity: 1; text-transform: uppercase; letter-spacing: .08em; }
.ip-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-flag { font: 600 10.5px/1 var(--text); padding: 4px 7px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); }
.ip-flag.stop { color: var(--stop); background: color-mix(in srgb, var(--stop) 14%, var(--paper)); }

@media (max-width: 1100px) {
  .ip-chats { grid-template-columns: minmax(0, 1fr); }
  .ip-chats-list, .ip-chat-pane { position: static; max-height: none; }
  .ip-chat-list { max-height: 420px; }
  .ip-msgs { max-height: 70vh; }
}

/* GHL | InkPulse in the top bar (13 Oct): the same screens on either source */
.source-switch { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 3px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.04); }
.source-switch[hidden] { display: none; }
.source-switch-label { padding: 0 8px 0 10px; font: 600 9.5px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: rgba(244,244,242,.55); }
.source-switch button { height: 24px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: rgba(244,244,242,.72); font: 600 12px/1 var(--text); cursor: pointer; }
.source-switch button:hover { color: #f4f4f2; }
.source-switch button.on { background: #f4f4f2; color: #111; }
.source-switch button[data-src="inkpulse"].on { background: var(--ok); color: #fff; }
.source-switch button:focus-visible { outline: 2px solid var(--chrome-gold); outline-offset: 2px; }
/* reading InkPulse: the page says so at the top, so no one mistakes the source */
body.src-inkpulse #dataset { color: var(--ok); }

/* the Differences tab (13 Oct) */
#diff-body { display: grid; gap: 22px; }
#diff-body .card { padding: 18px 20px; }
.df-kinds { display: grid; gap: 22px; }
.df-examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--ip-gap, 16px); }
.df-example { display: grid; gap: 8px; align-content: start; padding: 14px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-1); min-width: 0; }
.df-ex-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.df-ex-head strong { font-size: 14px; color: var(--ink); }
.df-ex-head span { font-size: 12px; }
.df-quote { margin: 0; padding: 8px 10px; border-radius: var(--r); background: var(--canvas); font-size: 13px; line-height: 1.5; color: var(--ink2); overflow-wrap: anywhere; }
.df-why { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--soft); }
.df-open { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--rule); }
.df-table { overflow-x: auto; }
.df-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.df-table th, .df-table td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--rule); }
.df-table th { font: 600 11px/1.3 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.df-table td:first-child { font-weight: 600; white-space: nowrap; color: var(--ink); }
.df-table tr:last-child td { border-bottom: 0; }
.ip-diff-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ip-diff-card p { margin: 0; color: var(--soft); font-size: 13px; }
.ip-diff-card strong { color: var(--ink); }