/* style.css - Meeting Timeline (planned vs actual markers, fullscreen, ticks, caps) */

:root{
  --bg:#0b1220;
  --panel:#111a2e;
  --text:#e8eefc;
  --muted:rgba(232,238,252,0.7);
  --border:rgba(232,238,252,0.14);

  /* Marker palette */
  --planned:#7aa7ff; /* blue */
  --actual:#5aff8d;  /* green */
  --behind:#ff5a5a;  /* red */
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(122,167,255,0.18), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(255,204,102,0.10), transparent 55%),
    var(--bg);
  color:var(--text);
}

.wrap{
  max-width:1100px;
  margin:24px 50px auto;
  padding:0 16px 40px;
}

header h1{
  font-size:20px;
  margin:0 0 6px;
  font-weight:650;
  letter-spacing:0.2px;
}

header p{
  margin:0 0 18px;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.grid{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:14px;
  align-items:start;
}

.card{
  background:rgba(17,26,46,0.75);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  backdrop-filter:blur(8px);
}

.card h2{
  font-size:14px;
  margin:0 0 10px;
  color:var(--muted);
  font-weight:650;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

textarea, button, input{ font:inherit; }

textarea{
  width:100%;
  min-height:220px;
  resize:vertical;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
  padding:10px;
  line-height:1.35;
  box-sizing:border-box;
}

.hint{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

.controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
  align-items:center;
}

button{
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border);
  color:var(--text);
  padding:9px 10px;
  border-radius:10px;
  cursor:pointer;
}

button.primary{
  background:rgba(122,167,255,0.22);
  border-color:rgba(122,167,255,0.35);
}

button:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

/* Inline label + time input */
.inlineLabel{
  color:var(--muted);
  font-size:13px;
  align-self:center;
}

#meetingStartTime{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  box-sizing:border-box;
}

.timelineShell{
  position:relative;
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}

.timelineHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.timelineHeader h2{ margin:0; }

.meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:13px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.meta strong{
  color:var(--text);
  font-weight:650;
}

/* Legend */
.legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
  margin:25px 0 50px;
  color:var(--muted);
  font-size:12px;
}

.legendItem{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
}

.swatch{
  width:18px;
  height:8px;
  border-radius:6px;
  display:inline-block;
  box-shadow:0 0 0 3px rgba(0,0,0,0.12) inset;
}

.swatch.planned{ background:var(--planned); }
.swatch.actual{ background:var(--actual); }
.swatch.behind{ background:var(--behind); }

/* Wrap to allow tick overlays above/below the track */
.timelineWrap{
  position:relative;
}

/* Tick rows (top + bottom) */
.ticks{
  position:absolute;
  left:0;
  right:0;
  height:18px;
  pointer-events:none;
  z-index:2; /* behind markers, above background */
}

.ticksTop{ top:-20px; }

/* Bottom tick labels: place number under the tick */
.ticksBottom .tickLabel{
  bottom:auto;           /* stop using the top-row positioning */
  top:25px;              /* put label below the tick (tune this) */
}

.tick{
  position:absolute;
  bottom:0;
  width:1px;
  background:rgba(232,238,252,0.25);
}

.tick.minor{
  height:6px;
  opacity:0.6;
}

.tick.major{
  height:12px;
  opacity:0.9;
  background:rgba(232,238,252,0.45);
}

.tickLabel{
  position:absolute;
  bottom:12px;
  transform:translateX(-50%);
  font-size:10px;
  color:rgba(232,238,252,0.65);
  white-space:nowrap;
}

/* Timeline track */
.timeline{
  position:relative;
  z-index:3;               /* above ticks */
  height:64px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  display:flex;

  /* exposes behind state to children */
  --actualColor: var(--actual);
}

.timeline.behind{
  --actualColor: var(--behind);
}

.segment{
  position:relative;
  height:100%;
  border-right:1px solid rgba(255,255,255,0.08);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:8px;
  box-sizing:border-box;
  user-select:none;
  cursor:pointer;
}

.segment:last-child{ border-right:0; }

.segment .label{
  font-size:12px;
  color:rgba(255,255,255,0.88);
  line-height:1.15;
  text-shadow:0 1px 0 rgba(0,0,0,0.35);

  white-space:normal;
  word-break:break-word;

  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;  /* tune 2–4 as desired */
}

.segment .mins{
  margin-top:auto;   /* pushes time to the bottom */
  font-size:11px;
  color:rgba(255,255,255,0.65);
}

/* Simple segment colors */
.segment:nth-child(6n+1){ background:rgba(122,167,255,0.22); }
.segment:nth-child(6n+2){ background:rgba(255,204,102,0.16); }
.segment:nth-child(6n+3){ background:rgba(162,255,196,0.14); }
.segment:nth-child(6n+4){ background:rgba(255,143,196,0.14); }
.segment:nth-child(6n+5){ background:rgba(198,176,255,0.14); }
.segment:nth-child(6n){ background:rgba(255,255,255,0.08); }

/* Selected topic */
.segment.active{
  outline:2px solid rgba(255,255,255,0.45);
  outline-offset:-2px;
}

/* Base shared indicator look */
.plannedLine, .actualLine{
  position:absolute;
  top:-6px;
  bottom:-6px;
  width:2px;
  transform:translateX(-1px);
  pointer-events:none;
  display:none;
}

.plannedArrowTop, .actualArrowTop{
  position:absolute;
  top:-12px;
  width:0;
  height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  transform:translateX(-7px);
  pointer-events:none;
  display:none;
}

.plannedArrowBottom, .actualArrowBottom{
  position:absolute;
  bottom:-12px;
  width:0;
  height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  transform:translateX(-7px);
  pointer-events:none;
  display:none;
}

/* Planned (should be): blue */
.plannedLine{
  background:var(--planned);
  box-shadow:0 0 0 3px rgba(122,167,255,0.15);
  z-index:3;
}
.plannedArrowTop{ border-bottom:10px solid var(--planned); z-index:3; }
.plannedArrowBottom{ border-top:10px solid var(--planned); z-index:3; }

/* Actual (we are): green by default; switches via --actualColor */
.actualLine{
  background:var(--actualColor);
  box-shadow:0 0 0 3px rgba(90,255,141,0.12);
  z-index:4; /* on top of planned */
}
.actualArrowTop{ border-bottom:10px solid var(--actualColor); z-index:4; }
.actualArrowBottom{ border-top:10px solid var(--actualColor); z-index:4; }

/* Small arrow caps inside the track */
.plannedCapTop, .actualCapTop{
  position:absolute;
  top:2px;
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  transform:translateX(-5px);
  pointer-events:none;
  display:none;
}

.plannedCapBottom, .actualCapBottom{
  position:absolute;
  bottom:2px;
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  transform:translateX(-5px);
  pointer-events:none;
  display:none;
}

/* Planned caps (blue) */
.plannedCapTop{ border-bottom:7px solid var(--planned); }
.plannedCapBottom{ border-top:7px solid var(--planned); }

/* Actual caps (green/red via variable) */
.actualCapTop{ border-bottom:7px solid var(--actualColor); }
.actualCapBottom{ border-top:7px solid var(--actualColor); }

.footerRow{
  margin-top:50px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  color:var(--muted);
  font-size:12px;
}

.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.04);
  color:var(--muted);
}

/* Fullscreen presentation mode */
#timelineShell:fullscreen{
  width:100vw;
  height:100vh;
  max-width:none;
  margin:0;
  border-radius:0;
  padding:20px;
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
}

#timelineShell:fullscreen .timeline{
  height:120px;
}

#timelineShell:fullscreen .segment .label{
  font-size:16px;
}

#timelineShell:fullscreen .segment .mins{
  font-size:13px;
}

/* BIG arrows in fullscreen */
#timelineShell:fullscreen .plannedArrowTop,
#timelineShell:fullscreen .actualArrowTop{
  top:-18px;
  border-left-width:10px;
  border-right-width:10px;
  border-bottom-width:14px;
  transform:translateX(-10px);
}

#timelineShell:fullscreen .plannedArrowBottom,
#timelineShell:fullscreen .actualArrowBottom{
  bottom:-18px;
  border-left-width:10px;
  border-right-width:10px;
  border-top-width:14px;
  transform:translateX(-10px);
}

/* Fullscreen: bigger ticks + spacing */
#timelineShell:fullscreen .ticksTop{ top:-26px; height:22px; }
#timelineShell:fullscreen .ticksBottom{ bottom:-26px; height:22px; }

#timelineShell:fullscreen .tick.minor{ height:8px; }
#timelineShell:fullscreen .tick.major{ height:16px; }
#timelineShell:fullscreen .tickLabel{ font-size:12px; bottom:16px; }

/* Fullscreen: caps a touch bigger */
#timelineShell:fullscreen .plannedCapTop,
#timelineShell:fullscreen .actualCapTop{
  border-left-width:7px;
  border-right-width:7px;
  border-bottom-width:10px;
  transform:translateX(-7px);
}

#timelineShell:fullscreen .plannedCapBottom,
#timelineShell:fullscreen .actualCapBottom{
  border-left-width:7px;
  border-right-width:7px;
  border-top-width:10px;
  transform:translateX(-7px);
}

@media (max-width:940px){
  .grid{ grid-template-columns:1fr; }
}