/* ==========================================================================
   PTI MODE  (js/features/pti.js, /pti)
   ==========================================================================
   Scoped to body.pti-mode; with the mode off this file changes nothing.

   Layout contract: #right-panel is hidden and #pti-rundown is appended to
   #main-area in the same flex slot, so #board-cell keeps flex-1 and
   fitBoard() sizes the board exactly as it does beside the normal panel.
   The lower third is fixed to the bottom of the window; #main-area gets the
   same height as padding-bottom so the board never sits under it.

   Stays dark in light mode on purpose: it is a broadcast graphic laid over
   a Zoom share, not part of the app's chrome.

   Type: Barlow Condensed for names (index.html loads it), JetBrains Mono for
   every clock so digits never jitter. One accent (--pti-accent) for the
   current topic and the primary button; --pti-over only for overtime. */

:root {
  --pti-w: 22rem;
  --pti-lt-h: 72px;
  --pti-r: 8px;
  --pti-ink-0: #0f1012;
  --pti-ink-1: #17191c;
  --pti-ink-2: #212328;
  --pti-line: #2c2f35;
  --pti-text: #f2f1ed;
  --pti-dim: #8d919a;
  --pti-accent: #f2c230;
  --pti-on-accent: #17130a;
  --pti-over: #e0614a;
  --pti-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --pti-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --pti-body: 'Montserrat', system-ui, sans-serif;
}

body.pti-mode #right-panel { display: none !important; }
body.pti-mode #main-area { padding-bottom: calc(var(--pti-lt-h) + 24px) !important; }

/* ---------- the rundown panel ---------- */
#pti-rundown {
  width: var(--pti-w);
  flex: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--pti-ink-1);
  color: var(--pti-text);
  border: 1px solid var(--pti-line);
  border-radius: var(--pti-r);
  overflow: hidden;
  font-family: var(--pti-body);
}
.projector-mode #pti-rundown { zoom: 1.25; }

.pti-head {
  display: flex; align-items: center; gap: 16px;
  padding: 16px;
  background: var(--pti-ink-0);
  border-bottom: 1px solid var(--pti-line);
}
.pti-panda {
  height: 72px; width: auto; flex: none;
  background: #faf9f6; border-radius: var(--pti-r); padding: 4px;
}
.pti-show {
  margin: 0;
  font-family: var(--pti-display); font-weight: 700; font-size: 28px; line-height: 0.95;
  text-transform: uppercase; color: var(--pti-text);
}

.pti-title {
  padding: 12px 16px;
  font-family: var(--pti-display); font-weight: 600; font-size: 24px; line-height: 1.15;
  color: var(--pti-text); cursor: text;
  border-bottom: 1px solid var(--pti-line);
  word-break: break-word;
}
.pti-title.is-placeholder { color: var(--pti-dim); }
.pti-title:focus { outline: none; }
.pti-title:focus-visible,
.pti-title[contenteditable="true"] { outline: 2px solid var(--pti-accent); outline-offset: -2px; background: var(--pti-ink-2); }

.pti-list {
  list-style: none; margin: 0; padding: 8px 0;
  flex: 1; min-height: 0; overflow-y: auto;
}
.pti-list li {
  display: grid; grid-template-columns: 32px 1fr auto 32px; align-items: center; gap: 8px;
  min-height: 48px; padding: 4px 8px 4px 12px;
  font-family: var(--pti-display); font-weight: 600; font-size: 22px; line-height: 1.1;
  text-transform: uppercase; color: var(--pti-dim);
  cursor: pointer; border-left: 4px solid transparent;
}
.pti-list li:hover { background: var(--pti-ink-2); color: var(--pti-text); }
.pti-list li:focus { outline: none; }
.pti-list li:focus-visible { outline: 2px solid var(--pti-accent); outline-offset: -2px; }
.pti-list li.is-done .pti-name { text-decoration: line-through; text-decoration-thickness: 2px; }
.pti-list li.is-cur {
  background: var(--pti-ink-2); color: var(--pti-text); border-left-color: var(--pti-accent);
  font-weight: 700; font-size: 26px; min-height: 56px;
}
.pti-list li.is-cur .pti-mins { color: var(--pti-accent); }
.pti-list li.is-cur.is-over .pti-mins { color: var(--pti-over); }
.pti-n { display: inline-grid; place-items: center; font-family: var(--pti-mono); font-size: 14px; }
.pti-n svg { width: 16px; height: 16px; }
.pti-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pti-mins { font-family: var(--pti-mono); font-weight: 700; font-size: 18px; text-transform: none; }
.pti-list li.is-cur .pti-mins { font-size: 22px; }

/* The remove button: 32px to see, 44px to hit (the row is the rest of the target). */
.pti-x {
  position: relative;
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--pti-r); background: transparent; color: var(--pti-dim);
  cursor: pointer; opacity: 0;
}
.pti-x::before { content: ''; position: absolute; inset: -6px; }
.pti-x svg { width: 14px; height: 14px; }
.pti-list li:hover .pti-x, .pti-list li:focus-within .pti-x { opacity: 1; }
.pti-x:hover { background: var(--pti-line); color: var(--pti-text); }
.pti-x:focus-visible { opacity: 1; outline: 2px solid var(--pti-accent); outline-offset: 0; }
@media (hover: none) { .pti-x { opacity: 1; } }

.pti-empty { padding: 16px; color: var(--pti-dim); font-size: 14px; line-height: 1.5; }
.pti-empty b { color: var(--pti-text); }

.pti-add { display: flex; gap: 8px; padding: 12px 12px 8px; border-top: 1px solid var(--pti-line); }
.pti-add input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--pti-line); border-radius: var(--pti-r);
  background: var(--pti-ink-0); color: var(--pti-text);
  font-family: var(--pti-body); font-size: 14px;
}
.pti-add input::placeholder { color: var(--pti-dim); }
.pti-add input:focus { outline: none; }
.pti-add input:focus-visible { outline: 2px solid var(--pti-accent); outline-offset: -1px; border-color: transparent; }

.pti-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 44px; padding: 0 12px;
  border: 1px solid var(--pti-line); border-radius: var(--pti-r);
  background: var(--pti-ink-2); color: var(--pti-text);
  font-family: var(--pti-display); font-weight: 700; font-size: 20px; text-transform: uppercase;
  cursor: pointer; transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.pti-btn svg { width: 18px; height: 18px; }
.pti-btn:hover:not(:disabled) { background: var(--pti-line); }
.pti-btn:active:not(:disabled) { transform: translateY(1px); }
.pti-btn:focus { outline: none; }
.pti-btn:focus-visible { outline: 2px solid var(--pti-accent); outline-offset: 2px; }
.pti-btn:disabled { opacity: 0.35; cursor: default; }
.pti-btn.is-primary { background: var(--pti-accent); color: var(--pti-on-accent); border-color: var(--pti-accent); }
.pti-btn.is-primary:hover:not(:disabled) { background: #f7d055; }
.pti-btn.is-primary.is-running { background: transparent; color: var(--pti-accent); }
.pti-btn.is-primary.is-running:hover { background: var(--pti-ink-0); }

.pti-controls { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; padding: 8px 12px; }

.pti-foot { padding: 4px 16px 12px; font-size: 12px; line-height: 1.5; color: var(--pti-dim); }
.pti-foot kbd, .pti-foot code {
  font-family: var(--pti-mono); font-size: 11px; color: var(--pti-text);
  background: var(--pti-ink-2); border: 1px solid var(--pti-line); border-radius: 4px; padding: 0 4px;
}

/* ---------- the lower third ---------- */
#pti-lowerthird {
  position: fixed; left: 24px; right: calc(var(--pti-w) + 56px); bottom: 16px;
  height: var(--pti-lt-h); z-index: 55;
  display: grid; grid-template-columns: auto 1fr auto; align-items: stretch;
  background: var(--pti-ink-1); color: var(--pti-text);
  border: 1px solid var(--pti-line); border-radius: var(--pti-r);
  overflow: hidden; pointer-events: none;
}
#pti-lowerthird .pti-tag {
  display: grid; place-items: center; min-width: 72px; padding: 0 16px;
  background: var(--pti-accent); color: var(--pti-on-accent);
  font-family: var(--pti-mono); font-weight: 700; font-size: 18px;
}
#pti-lowerthird.is-idle .pti-tag { display: none; }
#pti-lowerthird.is-over .pti-tag { background: var(--pti-over); color: #fff; }
#pti-lowerthird .pti-lt-name {
  align-self: center; padding: 0 24px;
  font-family: var(--pti-display); font-weight: 700; font-size: 36px; line-height: 1;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#pti-lowerthird.is-idle .pti-lt-name { color: var(--pti-dim); }
#pti-lowerthird .pti-lt-time {
  align-self: center; padding: 0 24px;
  font-family: var(--pti-mono); font-weight: 700; font-size: 34px; color: var(--pti-accent);
}
#pti-lowerthird.is-paused .pti-lt-time { color: var(--pti-dim); }
#pti-lowerthird.is-over .pti-lt-time { color: var(--pti-over); }
#pti-lowerthird .pti-lt-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--pti-line); }
#pti-lowerthird .pti-lt-bar i { display: block; height: 100%; width: 100%; background: var(--pti-accent); transition: width 250ms linear; }
#pti-lowerthird.is-over .pti-lt-bar i { background: var(--pti-over); width: 100% !important; }

/* ---------- living with the other overlays ---------- */
/* Topic cards (js/features/topiccard.js) pin to the window's top-right, which
   in this mode is the rundown's header. Move their stack left of the panel. */
body.pti-mode #topic-card-stack { right: calc(var(--pti-w) + 48px) !important; }
/* The News Ticker (js/features/ticker.js) is a 4.75rem crawl fixed to the
   bottom at z-index 500, and is removed from the page when it closes. While
   it is up, the bar sits on top of it instead of underneath it. */
body.pti-mode:has(#ticker-bar) #pti-lowerthird { bottom: calc(4.75rem + 12px); }
body.pti-mode:has(#ticker-bar) #main-area { padding-bottom: calc(var(--pti-lt-h) + 4.75rem + 36px) !important; }

@media (prefers-reduced-motion: reduce) {
  #pti-lowerthird .pti-lt-bar i, .pti-btn { transition: none; }
}

/* Stacked layout (narrow windows, phones): panel under the board, bar full width. */
@media (max-width: 1023px) {
  :root { --pti-w: 100%; --pti-lt-h: 56px; }
  #pti-rundown { width: 100%; max-height: 40vh; }
  #pti-lowerthird { left: 12px; right: 12px; bottom: 12px; }
  #pti-lowerthird .pti-lt-name { font-size: 24px; padding: 0 12px; }
  #pti-lowerthird .pti-lt-time { font-size: 24px; padding: 0 12px; }
  .pti-panda { height: 52px; }
  body.pti-mode #topic-card-stack { right: 1.25rem !important; }
}