/* MYMENT Studio — dark premium theme, same palette as the app
   (app/lib/core/theme/app_theme.dart). Desktop-first on purpose: this
   tool runs where the footage and the ffmpeg binary already are. */

:root {
  --navy: #070d1a;
  --surface: #161f32;
  --surface-2: #1e293f;
  --green: #00e676;
  --gold: #ffc542;
  --text: #f2f5fa;
  --muted: #8a99ad;
  --danger: #ff6b6b;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

/* ---- chrome ---- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: var(--navy);
  border-bottom: 1px solid var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; letter-spacing: .5px; }
.brand .star { color: var(--green); font-size: 20px; }
.brand strong { color: var(--green); font-weight: 800; }

.account { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }

main { max-width: 900px; margin: 0 auto; padding: 28px 20px 80px; }
/* Set by show() for the editor only — reading a pitch needs the width. */
main.wide { max-width: min(1700px, 96vw); }

h1 { font-size: 26px; margin: 0 0 10px; }
h2 { font-size: 20px; margin: 0 0 4px; }
h3 { font-size: 16px; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }

.step {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  flex: none;
}

.muted { color: var(--muted); }
.small { font-size: 13px; }
.hidden { display: none !important; }
.center { text-align: center; }

/* ---- surfaces ---- */

.card {
  background: var(--surface);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 16px 0;
}

.card.center { max-width: 460px; margin: 60px auto; }

/* ---- controls ---- */

button {
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  border: none;
  padding: 10px 20px;
  transition: filter .15s, opacity .15s;
}
button:disabled { opacity: .45; cursor: not-allowed; }
button:not(:disabled):hover { filter: brightness(1.12); }

.primary { background: var(--green); color: var(--navy); font-weight: 800; }
.secondary { background: var(--surface-2); color: var(--text); font-weight: 700; }

.link {
  background: none;
  color: var(--green);
  padding: 4px 0;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.back { margin-bottom: 14px; }

input[type="text"] {
  font: inherit;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--surface-2);
  background: var(--navy);
  color: var(--text);
}
input[type="text"]:focus { outline: 2px solid var(--green); outline-offset: -1px; }

input[type="file"] {
  font: inherit;
  color: var(--muted);
  margin-top: 6px;
}

.row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; }
.field { flex: 1 1 170px; }
.field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }

.clock-field { margin-top: 16px; }

/* Separate boxes so nobody types a colon again. */
.clock-parts { display: flex; align-items: center; gap: 6px; }
.clock-parts input {
  width: 3.2rem;
  text-align: center;
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 8px 4px;
}
.clock-parts input:last-of-type { width: 2.4rem; color: var(--gold); }
.clock-parts span { color: var(--muted); font-size: 19px; font-weight: 800; }

button.big { width: 100%; padding: 15px 20px; font-size: 16px; margin-top: 16px; }

/* ---- progress ---- */

.progress { margin-top: 16px; }
.progress .bar {
  height: 8px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}
.progress .bar > div {
  height: 100%;
  width: 0;
  background: var(--green);
  border-radius: 99px;
  transition: width .25s ease;
}
#cut-stage { margin-top: 8px; }

details { margin-top: 22px; border-top: 1px solid var(--surface-2); padding-top: 14px; }
details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
details summary:hover { color: var(--green); }

video {
  width: 100%;
  margin-top: 14px;
  border-radius: var(--radius);
  background: #000;
  max-height: 60vh;
}

pre {
  background: var(--navy);
  border: 1px solid var(--surface-2);
  border-radius: 10px;
  padding: 14px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.75;
  white-space: pre;
  max-height: 260px;
  margin-top: 14px;
}

code { background: var(--navy); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }

/* ---- status lines ---- */

.status { margin-top: 14px; font-weight: 700; min-height: 24px; }
.status.ok { color: var(--green); }
.status.bad { color: var(--danger); }
.status.idle { color: var(--muted); font-weight: 400; }

.error { color: var(--danger); }
.warn {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 197, 66, .12);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 13px;
}

/* ---- lists ---- */

.list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.list.compact { gap: 6px; }

.session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius);
  padding: 16px 20px;
  color: var(--text);
}
.session:hover { border-color: var(--green); }
.session .when { font-weight: 700; }
.session .meta { font-size: 13px; color: var(--muted); }
.session .count { color: var(--gold); font-weight: 800; white-space: nowrap; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.tag {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.tag:hover { border-color: var(--green); }
.tag .at { color: var(--green); font-variant-numeric: tabular-nums; }
.tag.dropped { opacity: .45; text-decoration: line-through; }

.upload-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 13px;
}
.upload-row .state { color: var(--muted); white-space: nowrap; }
.upload-row .state.ok { color: var(--green); }
.upload-row .state.bad { color: var(--danger); }

/* ---- dropzone ---- */

.dropzone {
  margin-top: 14px;
  padding: 34px 20px;
  border: 2px dashed var(--surface-2);
  border-radius: var(--radius);
  text-align: center;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.dropzone.over { border-color: var(--green); color: var(--green); background: rgba(0, 230, 118, .06); }

/* ---- folder listing ---- */

.folder-video {
  text-align: start;
  padding: 8px 12px;
  border: 1px solid var(--surface-2);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.folder-video:hover { border-color: var(--green); }

.folder-video.picked {
  border-color: var(--green);
  color: var(--green);
  background: rgba(0, 230, 118, .06);
}

/* Names the automatic route, so the manual drawer below reads as the
   alternative it is rather than as the next step. */
.route-label {
  margin: 16px 0 4px;
  font-weight: 700;
  color: var(--text);
}

#cut-estimate { margin-top: 8px; }
#expected-clips { font-size: 12px; opacity: .8; }

/* ---- analysis editor ---- */

/* ---- the state strip ----
   One line, always in the same place, saying where this footage is up to
   and offering the single next thing to press. It replaced four rows that
   each appeared on their own schedule and each knew a different part of
   the answer. */
.stateline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  /* Lit down its leading edge, so the eye finds it before it reads it. */
  border-inline-start: 3px solid var(--green);
}

.state-say { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.state-say strong { font-size: 15px; }
.state-do { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---- the manual toolkit, folded away ----
   Nothing is removed: the automatic path is what the screen leads with,
   and these still do exactly what they did, for the passage the automatic
   pass got wrong. */
#edit-advanced {
  margin-top: 16px;
  border-top: 1px solid var(--surface-2);
  padding-top: 6px;
}

#edit-advanced > summary {
  cursor: pointer;
  padding: 8px 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  list-style: none;
}

#edit-advanced > summary::-webkit-details-marker { display: none; }

/* A disclosure triangle that points the right way in both directions —
   the app runs RTL and this line is one of the few that has a side. */
#edit-advanced > summary::before {
  content: 'B8';
  display: inline-block;
  margin-inline-end: 8px;
  transition: transform .15s;
}

[dir="rtl"] #edit-advanced > summary::before { transform: scaleX(-1); }
#edit-advanced[open] > summary::before { transform: rotate(90deg); }
[dir="rtl"] #edit-advanced[open] > summary::before { transform: rotate(90deg) scaleX(-1); }
#edit-advanced > summary:hover { color: var(--text); }

/* The scrub bar, with the follow path's waypoints under it. */
.scrub-wrap { position: relative; flex: 1; display: flex; align-items: center; }
.scrub-wrap input[type="range"] { width: 100%; position: relative; z-index: 1; }

.scrub-marks {
  position: absolute;
  inset-inline: 0;
  /* Under the thumb, over the track: a tick has to be visible without
     competing with the handle you are dragging. */
  bottom: 2px;
  height: 5px;
  pointer-events: none;
}

.scrub-marks i {
  position: absolute;
  width: 2px;
  height: 5px;
  margin-inline-start: -1px;
  border-radius: 1px;
  background: var(--gold);
  opacity: .75;
}

/* Held while a scan runs: the band it measures against was read when the
   scan started, so dragging these now would move the drawing and nothing
   else. Dimmed rather than hidden, so it stays clear they exist. */
#pitch-row.locked { opacity: .45; }
#pitch-row.locked input,
#pitch-row.locked button { cursor: not-allowed; }

/* Armed, and saying so: a second press deletes a scan that took twenty
   minutes, so the button stops looking like an ordinary link. */
#edit-restart.armed {
  color: var(--danger);
  font-weight: 800;
  text-decoration: underline;
}

.mode-row { margin-bottom: 4px; }
/* Pushes the view tools away from the two mode buttons, so the row reads
   as "where am I" then "what am I doing" rather than as six equal peers. */
.toolbar-gap { flex: 1 1 12px; }

.secondary.picked {
  border-color: var(--green);
  color: var(--green);
  background: rgba(0, 230, 118, .08);
}

/* One control, two states — not two buttons where only one can be right. */
.segmented { display: flex; }
.segmented button {
  border: 1px solid var(--surface-2);
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  padding: 9px 14px;
  cursor: pointer;
}
.segmented button:first-child { border-radius: 0 10px 10px 0; }
.segmented button:last-child { border-radius: 10px 0 0 10px; }
.segmented button.picked {
  background: rgba(0, 230, 118, .12);
  border-color: var(--green);
  color: var(--green);
}

/* The canvas is the only picture, in both modes: it IS the export, so it
   has to be seen at the shape it will ship at. The video element behind
   it decodes and is never looked at — but it must stay laid out and
   painted, because a display:none video is free to stop presenting
   frames, and then there is nothing to draw. */
.stage {
  margin-top: 12px;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
.stage canvas {
  display: block;
  width: 100%;
  max-height: max(340px, calc(100vh - 300px));
  object-fit: contain;
  background: #000;
}
.stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.stage .hidden { display: none; }

/* One row, both modes: play, step, scrub, time. */
.transport {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.transport #play,
.transport #play-cut { min-width: 62px; padding-inline: 14px; }
.transport #scrub,
.transport #scrub-cut { flex: 1; min-width: 120px; accent-color: var(--green); }
.transport #time-readout,
.transport #time-cut { font-variant-numeric: tabular-nums; }

#mark-tools, #edit-tools { margin-top: 8px; }

.segment-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--surface-2);
  border-radius: 10px;
}
.segment-row input[type="text"] { flex: 1 1 140px; margin: 0; }
.segment-row select {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--surface-2);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
}
.link.danger { color: var(--danger); }

/* Both of Studio's jobs, reachable from anywhere. The editor used to be
   offered only on the session picker — the one screen you never return to
   once you are deep in a cut. */
.topnav { display: flex; gap: 6px; margin-inline-start: auto; margin-inline-end: 18px; }

.navlink {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.navlink:hover { color: var(--text); }
.navlink.picked {
  color: var(--green);
  border-color: var(--green);
  background: rgba(0, 230, 118, .08);
}

/* Three things do not fit on one narrow row, and a header that scrolls
   sideways takes the whole page with it. The nav drops to its own line. */
@media (max-width: 620px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
  .topnav {
    order: 3;
    width: 100%;
    margin-inline: 0;
    justify-content: center;
  }
  .navlink { padding: 6px 10px; font-size: 13px; }
}

/* Fullscreen puts the WORKSPACE up, not just the picture: marking a
   passage of play means reaching the in/out buttons, and a fullscreen
   video with the controls left behind on the page is useless for it. */
#edit-workspace:fullscreen {
  background: var(--navy);
  padding: 10px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 0;
}
#edit-workspace:fullscreen .stage {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
}
#edit-workspace:fullscreen .stage canvas {
  width: 100%;
  height: 100%;
  max-height: none;
}
#edit-workspace:fullscreen .row { margin-top: 0; }

/* ---- panel controls ---- */

/* A switch that says what it IS, not a checkbox whose label says what it
   would be. Two of these used to sit inside panels restating a state the
   toolbar button already showed — and the wheel could change the state
   behind the checkbox's back, so it displayed the wrong answer. */
.toggle {
  border: 1px solid var(--surface-2);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.toggle:hover { border-color: var(--green); }
.toggle.picked {
  border-color: var(--green);
  color: var(--green);
  background: rgba(0, 230, 118, .1);
}

.slider {
  display: grid;
  grid-template-columns: 130px 1fr 60px;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}
.slider span { font-size: 13px; color: var(--muted); }
.slider input[type="range"] { width: 100%; accent-color: var(--green); }
.slider output { font-variant-numeric: tabular-nums; color: var(--text); font-size: 13px; }

@media (max-width: 620px) {
  .slider { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- the one panel that floats over the picture ---- */

.stage { position: relative; }

/* Floating on purpose: calibrating means watching a touchline while
   dragging the slider that straightens it, and a control you have to
   scroll away from is a control you cannot judge. ONE of these — the
   three it replaced could cover each other and the picture both. */
.stage-panel {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  width: min(330px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow: auto;
  padding: 12px 14px 10px;
  border-radius: 12px;
  border: 1px solid var(--surface-2);
  background: rgba(7, 13, 26, .96);
  /* No backdrop-filter. It blurred a region of a canvas repainting sixty
     times a second, which the compositor re-ran on every one of those
     frames — while the panel open was the reframe panel, i.e. exactly
     while somebody was dragging waypoints and complaining that dragging
     waypoints was not smooth. */
  z-index: 4;
}
.stage-panel .row { margin-top: 8px; }
.stage-panel .slider { grid-template-columns: 54px 1fr 52px; gap: 8px; margin-top: 8px; }

.overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.overlay-head strong { font-size: 14px; }

.tiny { font-size: 11.5px; line-height: 1.5; margin: 10px 0 0; }

/* Paused, a drag GRABS the picture and the content stays under the
   cursor — so the cursor has to promise that and nothing else. */
.stage.panning { cursor: grab; }
.stage.panning:active { cursor: grabbing; }

/* A control that refuses has to say so somewhere the eye already is —
   and so does one that worked. Both land on this line: news used to go to
   the file-info line instead, wiping the only standing fact on screen. */
.editor-problem {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--gold);
  background: rgba(255, 197, 66, .1);
  color: var(--text);
  font-size: 13px;
}
.editor-problem.note {
  border-color: var(--surface-2);
  background: var(--surface-2);
  color: var(--muted);
}

/* Gold marks a control that is CHANGING the picture right now; green
   still means "this panel is open". A persisted crop with both panels
   closed was otherwise invisible and read as a broken video. */
.secondary.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(255, 197, 66, .1);
}

/* ---- drawing tools ---- */

.toolrow { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

.tool {
  width: 38px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--surface-2);
  background: transparent;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}
.tool:hover { border-color: var(--green); }
.tool.picked { border-color: var(--green); color: var(--green); background: rgba(0, 230, 118, .1); }

/* Every mark in the segment, named, timed and removable. */
.marklist { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }

.markrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 7px;
  border-radius: 7px;
  border: 1px solid transparent;
}
.markrow:hover { background: rgba(255, 255, 255, .05); border-color: var(--surface-2); }
/* On screen at this instant — otherwise two timestamps are the only clue. */
.markrow.showing { border-color: rgba(0, 230, 118, .45); }
.markdot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(0, 0, 0, .5);
}
.markname { flex: 1; text-align: start; font-size: 12.5px; }

/* What this segment carries, on the segment: reframing and marks belong
   to one segment each, and nothing used to say which. */
.segbadge {
  font-size: 11.5px;
  color: var(--gold);
  white-space: nowrap;
}

.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.swatch.picked { border-color: var(--text); }

#draw-text { width: 100%; margin: 0; }

/* A tool in hand means the pointer draws rather than pans. */
.stage.drawing { cursor: crosshair; }

/* ---- the cut screen's player, over the whole match ---- */

/* The transport belongs to the picture above it, not to the card. */
#player .transport { margin-top: 8px; }
#part-cut { white-space: nowrap; }

/* "All of them" is the ordinary answer for a match the camera split, so
   it leads the list rather than sitting under it. */
.folder-video.all { font-weight: 700; color: var(--green); }

/* A slider that shares a row with others, rather than owning a line. */
.slider.tight { flex: 0 1 190px; gap: 8px; margin: 0; }
.slider.tight input[type="range"] { flex: 1; min-width: 80px; }
#pitch-row { align-items: center; }