/* Tari Flip app window rendered by feed.js. Pages theme it through the custom properties below. */
.tf-app {
  --app-bg: #111111;
  --app-panel: #161616;
  --app-raise: #1e1e1e;
  --app-line: rgba(255, 255, 255, 0.09);
  --app-line-2: rgba(255, 255, 255, 0.15);
  --app-text: #efefef;
  --app-muted: #a3a3a3;
  --app-faint: #737373;
  --accent: #f2f2f2;
  --accent-ink: #0a0a0a;
  --accent-soft: rgba(255, 255, 255, 0.1);
  --ok: #3ee08f;
  --bad: #ff5b61;
  --bad-soft: rgba(255, 91, 97, 0.12);
  --app-font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --app-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --app-radius: 12px;
  --app-height: 560px;

  container: tfapp / inline-size;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--app-radius);
  background: var(--app-bg);
  color: var(--app-text);
  font: 500 12.5px/1.35 var(--app-font);
  font-feature-settings: 'tnum' 1;
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 0 0 1px var(--app-line-2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.tf-app * { box-sizing: border-box; }
.tf-app svg { display: block; }

/* Title bar */
.tf-titlebar { position: relative; display: flex; align-items: center; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--app-line); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.025), transparent); }
.tf-lights { display: flex; gap: 8px; }
.tf-lights i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.tf-title { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; font-weight: 600; }
.tf-title img { width: 12px; height: 16px; }
.tf-net { margin-left: auto; display: flex; gap: 14px; color: var(--app-muted); font-size: 11.5px; }
.tf-net span { display: inline-flex; align-items: center; gap: 6px; }
.tf-net i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Toolbar */
.tf-toolbar { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border-bottom: 1px solid var(--app-line); }
.tf-seg { display: flex; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
.tf-seg span { padding: 5px 10px; border-radius: 6px; color: var(--app-muted); }
.tf-seg span.is-on { background: rgba(255, 255, 255, 0.1); color: var(--app-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.tf-chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--app-line-2); color: var(--app-muted); white-space: nowrap; }
.tf-chip-btn b { color: var(--app-text); font-weight: 600; }
.tf-chip-btn svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.tf-toggle { position: relative; width: 26px; height: 16px; border-radius: 9px; background: var(--accent); flex: none; }
.tf-toggle::after { content: ''; position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-ink); }
.tf-search { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 28px; min-width: 0; padding: 0 8px 0 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); color: var(--app-faint); white-space: nowrap; overflow: hidden; }
.tf-search svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.tf-search kbd { margin-left: 6px; padding: 2px 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); font: 500 10px/1 var(--app-mono); color: var(--app-muted); }

/* Board */
.tf-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: var(--app-height); }
.tf-col { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--app-line); }
.tf-col:last-child { border-right: 0; }
.tf-col-head { display: flex; align-items: center; gap: 8px; height: 40px; flex: none; padding: 0 14px; border-bottom: 1px solid var(--app-line); font-weight: 600; }
.tf-col-head i { width: 7px; height: 7px; border-radius: 50%; background: var(--app-muted); }
.tf-col[data-col='watch'] .tf-col-head i { background: var(--app-muted); }
.tf-col[data-col='open'] .tf-col-head i { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tf-col-head b { margin-left: auto; color: var(--app-faint); font: 500 10.5px/1 var(--app-mono); white-space: nowrap; }
.tf-col-list { position: relative; flex: 1; overflow: hidden; }
.tf-col-list::after { content: ''; position: absolute; inset: auto 0 0; height: 64px; background: linear-gradient(to bottom, transparent, var(--app-bg)); pointer-events: none; }

.tf-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--app-line); transition: opacity 0.5s ease; }
.tf-ava { grid-row: span 2; width: 36px; height: 36px; border-radius: 9px; object-fit: cover; background: var(--app-raise); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.tf-card-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.tf-card-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13px; }
.tf-tick { color: var(--app-faint); font: 500 10.5px/1 var(--app-mono); white-space: nowrap; }
.tf-card-side { grid-row: span 2; text-align: right; white-space: nowrap; }
.tf-card-side b { display: block; font-weight: 600; font-size: 12.5px; }
.tf-card-side small { display: block; margin-top: 3px; color: var(--app-faint); font: 500 10.5px/1 var(--app-mono); }
.tf-card-meta { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; color: var(--app-faint); font-size: 11px; white-space: nowrap; }
.tf-card-meta .tf-muted { color: var(--app-muted); }
.tf-card[data-col='incoming'] .tf-card-side { grid-row: auto; }
.tf-card[data-col='incoming'] .tf-card-meta { grid-column: 2 / 4; }
.tf-card[data-col='watch'] .tf-card-meta, .tf-card[data-col='open'] .tf-card-meta { display: block; text-overflow: ellipsis; }
.tf-card[data-col='open'] .tf-card-side b { color: var(--accent); }
.tf-card[data-col='incoming'][data-verdict='skip'] { opacity: 0.55; }

.tf-pad { display: inline-flex; align-items: center; height: 17px; margin-right: 2px; padding: 0 5px; border-radius: 4px; font-size: 9.5px; font-weight: 600; font-style: normal; letter-spacing: 0.02em; color: var(--app-text); box-shadow: inset 0 0 0 1px var(--app-line-2); }

.tf-check { display: inline-flex; align-items: center; height: 17px; padding: 0 5px; border-radius: 4px; font-size: 9.5px; font-weight: 600; background: rgba(255, 255, 255, 0.05); color: var(--app-faint); }
.tf-check.is-pending { animation: tf-pulse 0.9s ease-in-out infinite; }
.tf-check.is-ok { background: var(--accent-soft); color: var(--app-text); }
.tf-check.is-bad { background: var(--bad-soft); color: var(--bad); }

.tf-out { grid-column: 2 / 4; display: flex; align-items: center; gap: 5px; margin-top: 2px; overflow: hidden; font-size: 10.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.tf-out svg { width: 10px; height: 10px; fill: currentColor; flex: none; }
.tf-out.is-open { color: var(--accent); }
.tf-out.is-watch { color: var(--app-muted); }
.tf-out.is-bad { color: var(--bad); }

.tf-change { color: var(--ok) !important; font-weight: 600 !important; transition: color 0.3s; }
.tf-change.is-down { color: var(--bad) !important; }

@keyframes tf-pulse { 50% { opacity: 0.45; } }

/* Narrow windows */
@container tfapp (max-width: 740px) {
  .tf-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-col[data-col='watch'] { display: none; }
  .tf-search { display: none; }
}
@container tfapp (max-width: 560px) {
  .tf-app { --app-height: 500px; }
  .tf-titlebar { height: 34px; }
  .tf-toolbar { height: 44px; padding: 0 12px; gap: 8px; }
  .tf-toolbar .is-rules { display: none; }
  .tf-board { grid-template-columns: minmax(0, 1fr); }
  .tf-col[data-col='open'] { display: none; }
}