/* Mix Notes — page-local CSS on top of Jurassic Interface.
   Everything here is product-specific (timeline, note tags), so it stays
   out of jurassic.css per the kit's rule of three. */

html, body { height: 100%; }

.mn-root {
  height: calc(100dvh - 2 * var(--jp-gap));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--jp-gap);
}
.mn-root > .jp-tabs { margin: 0; overflow-x: auto; }

/* ---- two-column console ------------------------------------------ */
.mn-main {
  min-height: 0;
  display: grid;
  gap: var(--jp-gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 980px) {
  .mn-main { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
}
.mn-col {
  min-height: 0; min-width: 0;
  display: grid; gap: var(--jp-gap);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
.mn-fillpanel {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--jp-gap);
}
.mn-fillpanel--3 { grid-template-rows: auto auto minmax(0, 1fr); }
.mn-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; }

/* ---- manifest ----------------------------------------------------- */
.mn-songs { display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); align-content: start; }
.mn-song {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  background: var(--jp-well-2);
  color: var(--jp-on-well-2);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  cursor: pointer;
  text-decoration: none;
}
.mn-song__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
  padding: 10px 12px;
  min-width: 0;
}
.mn-song__go {
  display: grid; place-items: center; align-content: center; gap: 4px;
  min-width: 72px; padding: 6px 12px;
  background: var(--jp-chassis-2); color: var(--jp-on-chassis);
  border-left: var(--jp-bevel) solid var(--jp-lo);
  font: 700 var(--jp-t-xs)/1 var(--jp-face-display); font-style: var(--jp-slant);
  letter-spacing: var(--jp-track-wide); text-transform: uppercase;
}
.mn-song__chev { font: 700 30px/0.7 var(--jp-face-data); font-style: normal; }
.mn-song:hover .mn-song__go { background: var(--jp-well); color: var(--jp-on-well); }
.mn-song:hover { background: var(--jp-chassis-2); }
.mn-song:focus-visible { outline: 2px solid var(--jp-hold); outline-offset: 1px; }
.mn-song__no { font-family: var(--jp-face-data); font-size: var(--jp-t-lg); opacity: .6; }
.mn-song__title {
  font-family: var(--jp-face-display); font-style: var(--jp-slant); font-weight: 700;
  font-size: var(--jp-t-xl); text-transform: uppercase; letter-spacing: var(--jp-track);
  overflow-wrap: anywhere; line-height: 1.05;
}
.mn-song__meta { font-family: var(--jp-face-data); font-size: var(--jp-t-xs); opacity: .75; margin-top: 3px; }
.mn-song__counts { grid-column: 1 / -1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.mn-song__approve { grid-column: 1 / -1; justify-self: start; cursor: pointer; }
@container jp-panel (min-width: 640px) {
  .mn-song__body { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .mn-song__counts, .mn-song__approve { grid-column: auto; }
  .mn-song__approve { justify-self: end; }
}
.mn-bigcount { font-family: var(--jp-face-data); font-size: var(--jp-t-md); font-weight: 700; }

/* ---- transport ---------------------------------------------------- */
.mn-transport {
  display: grid; gap: var(--jp-gap);
  grid-template-columns: minmax(0, 1fr);
}
@container jp-panel (min-width: 700px) {
  .mn-transport { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; }
}
.mn-readout { text-align: left; padding: var(--jp-pad); display: grid; gap: 4px; align-content: center; }
.mn-readout .jp-readout__line { font-size: var(--jp-t-xl); }
.mn-clock {
  font-family: var(--jp-face-data); font-size: var(--jp-t-xl); color: var(--jp-trace);
  letter-spacing: .02em; white-space: nowrap;
}
.mn-clock small { font-size: var(--jp-t-sm); color: var(--jp-dim-well); }
.mn-controls { display: grid; gap: var(--jp-gap); grid-template-columns: minmax(0, 1fr); align-content: start; }
.mn-controls .jp-btn-bank { grid-template-columns: repeat(auto-fit, minmax(min(72px, 100%), 1fr)); }
.mn-controls .jp-btn { padding-inline: 8px; }
.mn-select { width: auto; min-width: 0; flex: 1 1 140px; }
.mn-archive { background: var(--jp-hold); color: #000; }

/* ---- timeline ----------------------------------------------------- */
.mn-timeline {
  position: relative;
  min-height: 180px;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--jp-trace) var(--jp-well);
  user-select: none;
  -webkit-user-select: none;
}
.mn-timeline__inner { position: relative; height: 100%; min-height: 176px; }
.mn-lane {
  position: absolute; left: 0; right: 0; top: 20px; z-index: 2;
  cursor: copy;
  border-bottom: 1px solid var(--jp-well-line);
  background: repeating-linear-gradient(to right, transparent 0 27px, rgba(127,227,255,.06) 27px 28px);
}
.mn-lane__hint {
  position: sticky; left: 8px; top: 0;
  display: inline-block; margin-top: 4px;
  font-family: var(--jp-face-data); font-size: var(--jp-t-xs); color: var(--jp-dim-well);
  pointer-events: none;
}
.mn-canvas {
  position: sticky; left: 0; top: 0;
  display: block; height: 100%;
  cursor: text;
}
.mn-wave-hit { position: absolute; left: 0; right: 0; bottom: 0; cursor: pointer; }

/* A note tag. Square corners: the kit forbids radius (rule 3). */
.mn-tag {
  position: absolute;
  display: inline-flex; align-items: center; gap: 5px;
  height: var(--jp-tap);
  padding: 0 7px 0 6px;
  font: 700 var(--jp-t-xs)/1 var(--jp-face-display);
  font-style: var(--jp-slant);
  letter-spacing: var(--jp-track-wide);
  text-transform: uppercase;
  white-space: nowrap;
  color: #05080f;
  background: var(--mn-c);
  border: 1px solid #05080f;
  cursor: grab;
  touch-action: none;
}
.mn-tag::before {                       /* the stem points at the exact moment */
  content: ""; position: absolute; left: -1px; top: 100%;
  width: 2px; height: 6px; background: var(--mn-c);
}
.mn-tag .jp-led { width: 7px; height: 7px; }
.mn-tag[data-status="CONFIRMED"] { opacity: .45; }
.mn-tag[aria-current="true"] { outline: 2px solid var(--jp-hold); outline-offset: 1px; z-index: 3; }
.mn-tag:focus-visible { outline: 2px solid var(--jp-hold); outline-offset: 1px; }
.mn-tag.is-dragging { cursor: grabbing; z-index: 4; }
.mn-tag[hidden] { display: none; }

@media (pointer: coarse) {
  .mn-tag { padding-inline: 10px; }
}

/* ---- notes panel -------------------------------------------------- */
.mn-filters { display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); }
.mn-filters .jp-chip { padding: 5px 9px; }
.jp-chip .mn-swatch { width: 9px; height: 9px; margin-right: 6px; background: var(--mn-c); border: 1px solid #000; }
.mn-list { display: grid; gap: 3px; grid-template-columns: minmax(0, 1fr); align-content: start; }
.mn-note {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0;
  background: var(--jp-well-2); color: var(--jp-on-well-2);
  border: 0; border-left: 5px solid var(--mn-c);
  padding: 0; text-align: left; cursor: pointer; font: inherit;
}
.mn-note__main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 8px; padding: 6px 8px; min-width: 0; }
.mn-note__go {
  display: grid; place-items: center; align-content: center; gap: 2px;
  min-width: 52px; padding: 4px 8px;
  border-left: 1px solid var(--jp-chassis);
  font: 700 var(--jp-t-xs)/1 var(--jp-face-display); font-style: var(--jp-slant);
  letter-spacing: var(--jp-track-wide); text-transform: uppercase; color: var(--jp-dim-chassis);
}
.mn-note__chev { font: 700 24px/0.8 var(--jp-face-data); font-style: normal; color: var(--jp-on-well-2); }
.mn-note:hover .mn-note__go { background: var(--jp-well); color: var(--jp-on-well); }
.mn-note:hover .mn-note__chev { color: var(--jp-on-well); }
.mn-note:hover { background: var(--jp-chassis-2); }
.mn-note[aria-current="true"] { outline: 2px solid var(--jp-hold); outline-offset: -2px; }
.mn-note:focus-visible { outline: 2px solid var(--jp-hold); outline-offset: -2px; }
.mn-note__time { font-family: var(--jp-face-data); font-size: var(--jp-t-xs); font-weight: 700; }
.mn-note__head { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: center; min-width: 0; }
.mn-note__text { grid-column: 1 / -1; font-size: var(--jp-t-sm); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mn-note__by { font-family: var(--jp-face-data); font-size: var(--jp-t-xs); opacity: .7; margin-left: auto; }
.mn-note[data-status="CONFIRMED"] .mn-note__text { opacity: .6; }

.mn-flag {
  font: 700 var(--jp-t-xs)/1 var(--jp-face-display); font-style: var(--jp-slant);
  letter-spacing: var(--jp-track-wide); text-transform: uppercase;
  background: var(--mn-c); color: #05080f; padding: 4px 6px 3px; white-space: nowrap;
}

.mn-body { font-size: var(--jp-t-md); line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.mn-body a, .mn-entry a { color: var(--jp-data); }
.mn-thread { display: grid; gap: var(--jp-gap); grid-template-columns: minmax(0, 1fr); align-content: start; }
.mn-entry { display: grid; gap: 4px; background: var(--jp-well-2); color: var(--jp-on-well-2); padding: 7px 9px; }
.mn-entry__meta { font-family: var(--jp-face-data); font-size: var(--jp-t-xs); opacity: .7; display: flex; gap: 8px; flex-wrap: wrap; }
.mn-entry__text { font-size: var(--jp-t-sm); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.35; }
.mn-event {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-family: var(--jp-face-data); font-size: var(--jp-t-xs); padding: 2px 9px;
}
.mn-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; background: #000; border: var(--jp-bevel) solid; border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo); }
.mn-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mn-reflink {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-family: var(--jp-face-data); font-size: var(--jp-t-xs);
}
.mn-statusbank .jp-btn[aria-pressed="true"] { background: var(--jp-well); color: var(--jp-on-well); border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo); }
.mn-hint { font-family: var(--jp-face-data); font-size: var(--jp-t-xs); color: var(--jp-dim-chassis); margin: 0; }
.mn-error { background: var(--jp-fail); color: #fff; font-family: var(--jp-face-data); font-size: var(--jp-t-xs); padding: 6px 9px; }

/* ---- identify ----------------------------------------------------- */
.mn-gate { min-height: 0; display: grid; place-items: center; padding: var(--jp-pad-lg); }
.mn-gate .jp-panel { width: min(420px, 100%); }

/* ---- statusbar ---------------------------------------------------- */
.mn-root > .jp-statusbar .jp-statusbar__value { font-size: var(--jp-t-sm); justify-content: flex-start; gap: 14px; flex-wrap: wrap; min-width: 0; }

/* ---- small screens: the console scrolls, the timeline gets a floor -- */
@media (max-width: 979px) {
  .mn-root { height: auto; min-height: calc(100dvh - 2 * var(--jp-gap)); grid-template-rows: auto 1fr auto; }
  .mn-main, .mn-col, .mn-fillpanel { min-height: auto; }
  .mn-col { grid-template-rows: auto auto; }
  .mn-timeline { height: 340px; }
  .mn-scroll { max-height: 70vh; }
}
@media (max-width: 720px) {
  .mn-root > .jp-statusbar .jp-statusbar__tag { display: none; }
}

/* the signed-in name is a readout, not a control */
.mn-who { cursor: default; color: var(--jp-on-chassis); }

/* notes export preview */
.mn-preview {
  margin: 0; max-height: 38vh; overflow: auto;
  font-family: var(--jp-face-data); font-size: var(--jp-t-xs); line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
#mn-export .jp-btn-bank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#mn-export .jp-btn { padding-inline: 8px; }