/*!
 * Live Timecode Notes
 * Copyright (c) 2026 Owner EditingTools.io. All rights reserved.
 *
 * Proprietary and confidential. No part of this file may be copied, reproduced,
 * modified, republished, redistributed, or used to create derivative works
 * without the prior written permission of the owner.
 *
 * No scraping. Automated access to, crawling of, harvesting from, or extraction
 * of this file or of any data it produces is prohibited. This includes use as
 * input for training or evaluating machine learning models, and the use of any
 * bot, spider, or similar tool, whether or not the content is publicly
 * reachable.
 *
 * https://editingtools.io
 */

/* One palette, always.

   These values used to be the light theme, with the dark one layered on top
   through prefers-color-scheme. Nothing ever set data-ltn_theme, so the theme
   was decided entirely by the reader's operating system, and anyone running
   theirs in light mode was shown a white app that was never designed or
   checked. The dark values are now the only ones, so the tool looks the same
   everywhere. */
#ltn_root {
    --ltn_bg: #000000;
  --ltn_bg_elevated: #1c1c1e;            --ltn_bg_grouped: #1c1c1e;
  --ltn_text: #e3e3e3;                   --ltn_text_secondary: #a0a0a6;
  --ltn_text_tertiary: #6d6d72;          --ltn_separator: rgba(84, 84, 88, 0.65);
  --ltn_separator_opaque: #38383a;
  --ltn_fill: rgba(120, 120, 128, 0.24);
  --ltn_fill_strong: rgba(120, 120, 128, 0.36);
  --ltn_action: #ffd60a;                 --ltn_action_text: #ffda22;            --ltn_active: #5d5bde;                 --ltn_danger: #ff453a;
  --ltn_warning: #ff9f0a;
  --ltn_primary: #0a84ff;            --ltn_primary_text: #ffffff;
  --ltn_scrim: rgba(0, 0, 0, 0.6);
  --ltn_pad_neutral: #c0c0c0;          
    --ltn_r_pad: 10px;                     --ltn_r_card: 20px;                    --ltn_r_sheet: 14px;
  --ltn_r_field: 10px;
  --ltn_gap: 10px;                       --ltn_inset: 16px;                     --ltn_pad_h: 62px;                     --ltn_pad_h_compact: 50px;
  --ltn_toolbar_h: 52px;
  --ltn_timeline_h: 160px;

    --ltn_font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ltn_font_mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

/* The system preference is deliberately not consulted. Dark is the design;
   light is something a person turns on here, not something their operating
   system turns on for them without asking. */

html[data-ltn_theme="light"] #ltn_root {
  color-scheme: light;
  --ltn_bg: #ffffff;
  --ltn_bg_elevated: #f2f2f7;
  --ltn_bg_grouped: #ffffff;
  --ltn_text: #161616;
  --ltn_text_secondary: #6b6b70;
  --ltn_text_tertiary: #9a9a9e;
  --ltn_separator: rgba(60, 60, 67, 0.29);
  --ltn_separator_opaque: #c6c6c8;
  --ltn_fill: rgba(120, 120, 128, 0.12);
  --ltn_fill_strong: rgba(120, 120, 128, 0.2);
  --ltn_action: #e5c009;
  --ltn_action_text: #897305;
  --ltn_active: #6d6be1;
  --ltn_danger: #d70015;
  --ltn_warning: #c25e00;
  --ltn_primary: #007aff;
  --ltn_primary_text: #ffffff;
  --ltn_scrim: rgba(0, 0, 0, 0.4);
  --ltn_pad_neutral: #999999;
}

/* Anything other than light is dark, which is the base, so this only has to
   put the colour-scheme back for form controls and scrollbars. */
html[data-ltn_theme="dark"] #ltn_root { color-scheme: dark; }

html.ltn_fullscreen,
html.ltn_fullscreen body {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
  /* The overlay covers this, but it shows for the moment before the app is
     painted, and white there is exactly the flash being reported. */
  background: #000000;
}
html[data-ltn_theme="light"].ltn_fullscreen,
html[data-ltn_theme="light"].ltn_fullscreen body { background: #ffffff; }

#ltn_root {
  display: none;
  font-family: var(--ltn_font);
  color: var(--ltn_text);
  background: var(--ltn_bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* Not "light dark": the app does not follow the system, so neither should
     the controls the browser draws for it. */
  color-scheme: dark;
}

html.ltn_fullscreen #ltn_root {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1040;
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#ltn_root *,
#ltn_root *::before,
#ltn_root *::after { box-sizing: border-box; }

#ltn_root .display-none { display: none; }

#ltn_root ::-webkit-scrollbar { width: 10px; height: 10px; }
#ltn_root ::-webkit-scrollbar-track { background: transparent; }
#ltn_root ::-webkit-scrollbar-corner { background: transparent; }
#ltn_root ::-webkit-scrollbar-thumb {
  background-color: var(--ltn_fill_strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
#ltn_root ::-webkit-scrollbar-thumb:hover {
  background-color: var(--ltn_text_tertiary);
  background-clip: content-box;
}
#ltn_root {
  scrollbar-width: thin;
  scrollbar-color: var(--ltn_fill_strong) transparent;
}

#ltn_root :focus-visible {
  outline: 2px solid var(--ltn_active);
  outline-offset: 2px;
  border-radius: 6px;
}

#ltn_root .ltn_screen { display: none; height: 100%; }
#ltn_root[data-ltn_screen="landing"] .ltn_screen_landing { display: flex; }
#ltn_root[data-ltn_screen="session"] .ltn_screen_session { display: flex; }

.ltn_screen_landing {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px var(--ltn_inset);
  overflow-y: auto;
}

.ltn_landing_inner { width: 100%; max-width: 460px; }

.ltn_landing_mark {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 28px;
}
.ltn_landing_mark img { width: 30px; height: 30px; border-radius: 7px; }
.ltn_landing_title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ltn_text);
}
.ltn_landing_lead {
  text-align: center;
  color: var(--ltn_text_secondary);
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 26px;
}

.ltn_options {
  background: var(--ltn_bg_elevated);
  border-radius: var(--ltn_r_sheet);
  overflow: hidden;
}

.ltn_option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ltn_separator);
  text-align: left;
  color: var(--ltn_text);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.ltn_option:last-child { border-bottom: 0; }
.ltn_option:hover { background: var(--ltn_fill); }
.ltn_option:active { background: var(--ltn_fill_strong); }
.ltn_option[disabled] { opacity: 0.45; cursor: not-allowed; }

.ltn_option_icon {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #fff;
  background: var(--ltn_active);
}
#ltn_root .ltn_option_icon_team { background: var(--ltn_primary); color: #fff; }
.ltn_option_icon_join { background: #34c759; }
.ltn_option_icon_mine { background: #ff9500; }

/* "My projects" is a real link so it can be opened in a new tab, but it sits
   in a list of buttons and has to read as one of them. */
#ltn_root a.ltn_option,
#ltn_root a.ltn_option:hover,
#ltn_root a.ltn_option:focus { text-decoration: none; color: var(--ltn_text); }

.ltn_option_body { flex: 1 1 auto; min-width: 0; }
.ltn_option_name { font-size: 16px; font-weight: 500; display: block; }
.ltn_option_hint {
  display: block;
  font-size: 13px;
  color: var(--ltn_text_secondary);
  margin-top: 2px;
  line-height: 1.35;
}
.ltn_option_chev { color: var(--ltn_text_tertiary); font-size: 14px; }

.ltn_landing_foot {
  margin-top: 22px;
  text-align: center;
  font-size: 13px;
  color: var(--ltn_text_tertiary);
}
.ltn_landing_foot a { color: var(--ltn_text_secondary); text-decoration: underline; }
.ltn_landing_foot a:hover { color: var(--ltn_text); }

.ltn_screen_session { flex-direction: column; min-height: 0; }

#ltn_root .ltn_panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

#ltn_root .ltn_toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ltn_toolbar_h);
  padding: 6px var(--ltn_inset);
  background: var(--ltn_bg);
  border-bottom: 0.5px solid var(--ltn_separator);
}

#ltn_root .ltn_toolbar_side { display: flex; align-items: center; gap: 2px; }
#ltn_root .ltn_toolbar_side_end { justify-content: flex-end; }

#ltn_root .ltn_toolbar_title {
  order: -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  cursor: default;
}
#ltn_root .ltn_toolbar_side_end { margin-left: auto; }
#ltn_root .ltn_toolbar_name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  /* Pinned rather than left to the font: the icon beside this is sized to the
     two lines together, so their heights have to be a known quantity. */
  line-height: 22px;
  font-weight: 500;
  color: var(--ltn_text_secondary);
  max-width: 32vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ltn_root .ltn_toolbar_sub {
  font-size: 12px;
  line-height: 16px;
  color: var(--ltn_text_tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}
#ltn_root .ltn_toolbar_sub:empty,
#ltn_root .ltn_toolbar_sub:has(#ltn_project_sub_text:empty):not(:has(#ltn_cloud:not(.display-none))) {
  display: none;
}
#ltn_root .ltn_toolbar_sub #ltn_cloud { font-size: 12px; }

#ltn_root .ltn_tbtn,
#ltn_root .btn-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  height: 36px;
  padding: 0 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ltn_text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.12s ease, opacity 0.12s ease;
  white-space: nowrap;
}
#ltn_root .ltn_tbtn:hover,
#ltn_root .btn-app:hover { background: var(--ltn_fill); }
#ltn_root .ltn_tbtn:active,
#ltn_root .btn-app:active { background: var(--ltn_fill_strong); }
#ltn_root .ltn_tbtn i,
#ltn_root .btn-app i { font-size: 16px; padding: 0 !important; }

#ltn_root .ltn_tbtn_label { font-size: 15px; }
#ltn_root .ltn_tbtn_active { color: var(--ltn_active); }

#ltn_root #start_timecode,
#ltn_root #stop_timecode {
  background: var(--ltn_fill) !important;
  color: var(--ltn_text) !important;
  font-weight: 500;
}
#ltn_root #start_timecode { color: #30d158 !important; }
#ltn_root #stop_timecode { color: var(--ltn_action) !important; }

#ltn_root .dropdown-menu {
  min-width: 232px;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 13px;
  background: var(--ltn_bg_elevated);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), 0 0 0 0.5px var(--ltn_separator);
  color: var(--ltn_text);
  font-size: 15px;
  width: auto !important;
}
#ltn_root .dropdown-menu .ltn_menu_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#ltn_root .dropdown-menu .ltn_menu_item:hover { background: var(--ltn_fill); }
#ltn_root .dropdown-menu .ltn_menu_item i { color: var(--ltn_text_secondary); }
#ltn_root .dropdown-menu .ltn_menu_item_danger,
#ltn_root .dropdown-menu .ltn_menu_item_danger i { color: var(--ltn_danger); }
/* Leaving a project is not destructive the way Reset is, so it reads as a
   caution rather than a danger. The icon is coloured too, because the rule
   above it paints every menu icon secondary. */
#ltn_root .dropdown-menu .ltn_menu_item_warn,
#ltn_root .dropdown-menu .ltn_menu_item_warn i { color: var(--ltn_warning); }
#ltn_root .dropdown-menu hr {
  border: 0;
  border-top: 1px solid var(--ltn_separator);
  margin: 5px 8px;
}
#ltn_root .dropdown-menu .ltn_menu_label {
  display: block;
  padding: 6px 12px 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ltn_text_tertiary);
}
#ltn_root .dropdown-menu ul { list-style: none; margin: 0; padding: 0; }
#ltn_root .dropdown-menu a { color: var(--ltn_text); }

#ltn_root .activeusers_list ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }

#ltn_root .ltn_stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--ltn_bg);
}

#ltn_root .ltn_timer_panel {
  flex: 0 0 auto;
  padding: 16px var(--ltn_inset) 0;
  text-align: center;
}

#ltn_root #custom_timecode {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  color: var(--ltn_text);
  font-family: var(--ltn_font);
  font-size: 76px;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  padding: 0;
  line-height: 1.08;
}
#ltn_root #custom_timecode:read-only { cursor: default; }
#ltn_root #custom_timecode:focus { outline: none; }
#ltn_root #custom_timecode:not([readonly]):hover {
  background: var(--ltn_fill);
  border-radius: 12px;
}

#ltn_root .event_over,
#ltn_root .event_not_started {
  font-size: 14px;
  color: var(--ltn_danger);
  padding: 6px 0 0;
}

#ltn_root .ltn_notes_panel {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 14px;
}

#ltn_root .ltn_chip {
  margin: 0 var(--ltn_inset) 10px;
  padding: 8px 14px;
  background: var(--ltn_fill);
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  color: var(--ltn_text_secondary);
}
#ltn_root .ltn_chip .row { align-items: center; margin: 0; }
#ltn_root .ltn_chip .col-8,
#ltn_root .ltn_chip .col-4 { padding: 0; }
#ltn_root #event_name_div_title { font-size: 13px; font-weight: 500; }

#ltn_root .progress-bar-app { background: transparent; }
#ltn_root .ltn_sync { max-width: 120px; margin-left: auto; }
#ltn_root #refresh-progress-bar {
  height: 2px !important;
  background: var(--ltn_fill_strong);
  border-radius: 2px;
  opacity: 0.7;
  transition: width 0.4s linear;
}
#ltn_root #refresh_txt { color: var(--ltn_text_tertiary) !important; }

#ltn_root #ltn_notes { min-height: 0; }
#ltn_root .ltn_notes_table {
  width: 100%;
  margin: 0;
  border: 0;
  color: var(--ltn_text);
  background: transparent;
  font-size: 14px;
}
#ltn_root .ltn_notes_table thead { display: none; }
#ltn_root .ltn_notes_table td { border: 0 !important; padding: 0; vertical-align: top; }

#ltn_root #marker_table tr {
  background: var(--ltn_bg_elevated);
  border-radius: var(--ltn_r_card);
  padding: 14px 16px;
  align-items: start;
  column-gap: 10px;
}
#ltn_root #marker_table td:nth-child(1) {     grid-area: tc;
  font-size: 13px;
  color: var(--ltn_text_secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#ltn_root #marker_table td:nth-child(2) { grid-area: dot; padding-top: 3px; }
#ltn_root #marker_table td:nth-child(3) { grid-area: body; min-width: 0; }
#ltn_root #marker_table td:nth-child(4) {
  grid-area: meta;
  font-size: 13px;
  color: var(--ltn_text_secondary);
  text-align: right;
  white-space: nowrap;
}
#ltn_root #marker_table td:nth-child(3) strong {
  font-weight: 600;
  font-size: 14px;
}
#ltn_root #marker_table td:nth-child(3) {
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#ltn_root #marker_table td:nth-child(2) span {
  display: inline-block;
  font-size: 0 !important;
  line-height: 0;
}
#ltn_root #marker_table td:nth-child(2) span::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}

#ltn_root #marker_table .btn-app {
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  color: var(--ltn_text_secondary);
}

@keyframes ltn_flash {
  0% { background: var(--ltn_fill_strong); }
  100% { background: var(--ltn_bg_elevated); }
}
#ltn_root #marker_table tr.flash { animation: ltn_flash 1.1s ease-out 1; }

#ltn_root[data-ltn_notes="timeline"] .ltn_notes_panel { height: var(--ltn_timeline_h); }
#ltn_root[data-ltn_notes="timeline"] #ltn_notes {
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 var(--ltn_inset) 12px;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(to bottom, transparent, var(--ltn_fill));
}
#ltn_root[data-ltn_notes="timeline"] .ltn_notes_table,
#ltn_root[data-ltn_notes="timeline"] #marker_table { display: block; }
#ltn_root[data-ltn_notes="timeline"] #ltn_notes { direction: rtl; }
#ltn_root[data-ltn_notes="timeline"] #marker_table {
  display: flex;
  flex-direction: row;
  gap: 10px;
  height: 100%;
  align-items: stretch;
}
#ltn_root[data-ltn_notes="timeline"] #marker_table > tr { direction: ltr; }
#ltn_root[data-ltn_notes="timeline"] #marker_table tr {
  display: grid;
  flex: 0 0 232px;
  width: 232px;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "dot tc meta"
    "body body body";
  row-gap: 6px;
  overflow: hidden;
}
#ltn_root[data-ltn_notes="timeline"] #marker_table td:nth-child(3) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#ltn_root[data-ltn_notes="list"] .ltn_notes_panel { flex: 1 1 auto; }
#ltn_root[data-ltn_notes="list"] #ltn_notes {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 var(--ltn_inset) 12px;
  -webkit-overflow-scrolling: touch;
}
#ltn_root[data-ltn_notes="list"] .ltn_notes_table,
#ltn_root[data-ltn_notes="list"] #marker_table { display: block; }
#ltn_root[data-ltn_notes="list"] #marker_table tr {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "tc dot body meta";
  margin-bottom: 8px;
}

#ltn_root[data-ltn_notes="list"] .ltn_stage { overflow: hidden; }

#ltn_root .ltn_work_panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px var(--ltn_inset) var(--ltn_inset);
  gap: 14px;
  overflow: hidden;
}

#ltn_root .ltn_work {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 12px 14px;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "input tags pads"
    "input tags actions";
}
#ltn_root .ltn_work > .ltn_input_panel { grid-area: input; }
#ltn_root .ltn_work_col_tags { grid-area: tags; }
#ltn_root .ltn_work_col_pads { grid-area: pads; }
#ltn_root .ltn_actions { grid-area: actions; }

#ltn_root .ltn_work_col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  flex: 1 1 50%;
  gap: 10px;
}

#ltn_root .ltn_area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#ltn_root .ltn_area_label {
  font-size: 15px;
  color: var(--ltn_text_secondary);
  margin-bottom: 0;
  padding-bottom: 0;
}

#ltn_root .ltn_pads,
#ltn_root .btn-quickbuttons,
#ltn_root .ltn_pads_event ,
#ltn_root .btn-quickbuttons_event {
  margin: 0 -5px;
  font-size: 0;                      }
#ltn_root .ltn_pads > div,
#ltn_root .btn-quickbuttons > div,
#ltn_root .ltn_pads_event > div ,
#ltn_root .btn-quickbuttons_event > div {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  max-width: none;
  flex: none;
  padding: 5px;
  margin: 0;
  font-size: 15px;
}
#ltn_root .ltn_pads_event ,
#ltn_root .btn-quickbuttons_event { margin-bottom: 4px; }

#ltn_root .ltn_pad ,
#ltn_root .btn-quickbutton {
  --ltn_tone: var(--ltn_pad_neutral);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  height: var(--ltn_pad_h) !important;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ltn_tone) 40%, transparent) !important;
  border-radius: var(--ltn_r_pad);
  background: color-mix(in srgb, var(--ltn_tone) 25%, transparent);
  color: var(--ltn_tone);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform 0.06s ease, background-color 0.12s ease;
}
#ltn_root .ltn_pad:hover ,
#ltn_root .btn-quickbutton:hover {
  background: color-mix(in srgb, var(--ltn_tone) 34%, transparent);
}
#ltn_root .ltn_pad:active ,
#ltn_root .btn-quickbutton:active { transform: scale(0.97); }
#ltn_root .ltn_pad > span ,
#ltn_root .btn-quickbutton > span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2;
  font-size: 15px !important;
}

#ltn_root .ltn_pads button[onclick="repeatCommentButton()"] ,
#ltn_root .btn-quickbuttons button[onclick="repeatCommentButton()"] { display: none; }
#ltn_root .ltn_pads > div:has(button[onclick="repeatCommentButton()"]) ,
#ltn_root .btn-quickbuttons > div:has(button[onclick="repeatCommentButton()"]) { display: none; }

#ltn_root .ltn_tags > div ,
#ltn_root .et-btn-smalls > div { width: 100%; max-width: none; flex: none; padding: 0; }

#ltn_root .ltn_tag ,
#ltn_root .et-btn-small {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  min-height: 34px;
  margin: 0 6px 6px 0 !important;
  padding: 0 !important;
  border: 1px solid var(--ltn_fill_strong) !important;
  border-radius: 999px !important;
  background: transparent;
  color: var(--ltn_text_secondary);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
  overflow: hidden;
}
#ltn_root .ltn_tag span ,
#ltn_root .et-btn-small span {
  display: inline-block;
  padding: 7px 13px !important;
  width: auto !important;
  height: auto !important;
  font-size: 13px !important;
  line-height: 1.2;
  white-space: nowrap;
}
#ltn_root .ltn_tag:hover ,
#ltn_root .et-btn-small:hover { background: var(--ltn_fill); }
#ltn_root label.ltn_tag input[type="checkbox"]:checked + span ,
#ltn_root label.et-btn-small input[type="checkbox"]:checked + span {
  background: transparent;
}
#ltn_root .ltn_tag:has(input[type="checkbox"]:checked) ,
#ltn_root .et-btn-small:has(input[type="checkbox"]:checked) {
  background: color-mix(in srgb, var(--ltn_text) 15%, transparent);
  border-color: color-mix(in srgb, var(--ltn_text) 30%, transparent) !important;
  color: var(--ltn_text);
}
#ltn_root .btn-tag { position: absolute; opacity: 0; pointer-events: none; }

#ltn_root .ltn_tagbar ,
#ltn_root .et-btn-smallbar {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  color: var(--ltn_text_secondary);
  padding-top: 4px;
}
#ltn_root .ltn_tagbar button ,
#ltn_root .et-btn-smallbar button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ltn_active);
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#ltn_root .ltn_tagbar button[disabled] ,
#ltn_root .et-btn-smallbar button[disabled] { color: var(--ltn_text_tertiary); cursor: default; }
#ltn_root .ltn_tagbar_count ,
#ltn_root .et-btn-smallbar_count { margin-left: auto; }

#ltn_root .ltn_actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  align-items: stretch;
}

#ltn_root .ltn_action {
  --ltn_tone: var(--ltn_pad_neutral);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--ltn_pad_h);
  min-width: 60px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--ltn_tone) 40%, transparent);
  border-radius: var(--ltn_r_pad);
  background: color-mix(in srgb, var(--ltn_tone) 25%, transparent);
  color: var(--ltn_text);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.06s ease, background-color 0.12s ease;
}
#ltn_root .ltn_action:hover {
  background: color-mix(in srgb, var(--ltn_tone) 34%, transparent);
}
#ltn_root .ltn_action:active { transform: scale(0.97); }
#ltn_root .ltn_action[disabled] { opacity: 0.4; cursor: default; transform: none; }
#ltn_root .ltn_action i { font-size: 18px; }

#ltn_root .ltn_action_primary {
  --ltn_tone: var(--ltn_primary);
  flex: 1 1 auto;
  color: var(--ltn_primary);
  font-weight: 500;
}

#ltn_root .ltn_input_panel {
  background: var(--ltn_bg_elevated);
  border-radius: var(--ltn_r_sheet);
  padding: 16px;
  overflow-y: auto;
}

#ltn_root .ltn_sheet_head { display: none; }

#ltn_root .ltn_live_options .input-group-text,
#ltn_root .ltn_edit_options .input-group-text { width: 120px !important; }

#ltn_root .ltn_sheet_scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1085;
  background: var(--ltn_scrim);
}

#ltn_root .form-group { margin-bottom: 14px; }
#ltn_root .input-group { display: flex; align-items: stretch; }
#ltn_root .input-group-prepend,
#ltn_root .input-group-append { display: flex; }

#ltn_root .input-group-text {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--ltn_fill);
  border: 0;
  border-radius: var(--ltn_r_field) 0 0 var(--ltn_r_field);
  color: var(--ltn_text_secondary);
  font-size: 14px;
}
#ltn_root .input-group-append .input-group-text {
  border-radius: 0 var(--ltn_r_field) var(--ltn_r_field) 0;
}

#ltn_root .form-control,
#ltn_root .custom-select,
#ltn_root select,
#ltn_root textarea,
#ltn_root input[type="text"],
#ltn_root input[type="number"],
#ltn_root input[type="email"],
#ltn_root input[type="password"] {
  flex: 1 1 auto;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--ltn_separator);
  border-radius: var(--ltn_r_field);
  background-color: var(--ltn_bg) !important;
  color: var(--ltn_text) !important;
  font-family: inherit;
  font-size: 16px;                line-height: 1.3;
  appearance: none;
  -webkit-appearance: none;
}
#ltn_root textarea { min-height: 96px; resize: vertical; }
#ltn_root .form-control:focus,
#ltn_root .custom-select:focus,
#ltn_root textarea:focus {
  border-color: var(--ltn_active);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ltn_active) 22%, transparent);
  outline: none;
}
#ltn_root .form-control::placeholder,
#ltn_root textarea::placeholder { color: var(--ltn_text_tertiary); }

#ltn_root .input-group > .form-control,
#ltn_root .input-group > .custom-select,
#ltn_root .input-group > select {
  border-radius: 0 var(--ltn_r_field) var(--ltn_r_field) 0;
}
#ltn_root .input-group > .form-control:first-child,
#ltn_root .input-group > .custom-select:first-child { border-radius: var(--ltn_r_field); }
#ltn_root .b-only-l { border-radius: var(--ltn_r_field) 0 0 var(--ltn_r_field) !important; }
#ltn_root .b-only-r { border-radius: 0 var(--ltn_r_field) var(--ltn_r_field) 0 !important; }

#ltn_root select.custom-select,
#ltn_root select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ltn_text_secondary) 50%),
    linear-gradient(135deg, var(--ltn_text_secondary) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
#ltn_root option { background: var(--ltn_bg_elevated); color: var(--ltn_text); }

#ltn_root .custom-switch,
#ltn_root .custom-control {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  min-height: 32px;
}
#ltn_root .custom-control-input {
  position: absolute;
  opacity: 0;
  width: 51px;
  height: 31px;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}
#ltn_root .custom-control-label {
  order: 1;
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 400;
  color: var(--ltn_text);
  padding: 4px 0 0 !important;
  cursor: pointer;
  line-height: 1.35;
}
#ltn_root .custom-control-label::before,
#ltn_root .custom-control-label::after { position: static; }
#ltn_root .custom-switch .custom-control-label::before {
  content: "";
  order: 2;
  flex: 0 0 51px;
  width: 51px;
  height: 31px;
  border-radius: 999px;
  background: var(--ltn_fill_strong);
  border: 0;
  transition: background-color 0.2s ease;
}
#ltn_root .custom-switch .custom-control-label::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
#ltn_root .custom-switch { flex-wrap: wrap; padding-right: 0; }
#ltn_root .custom-switch .custom-control-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}
#ltn_root .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--ltn_primary);
}
#ltn_root .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(20px);
}
#ltn_root .custom-control-label small { color: var(--ltn_text_tertiary); font-size: 13px; }

#ltn_root .custom-checkbox .custom-control-label::before {
  content: "";
  order: 0;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--ltn_separator_opaque);
  background: transparent;
}
#ltn_root .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--ltn_active);
  border-color: var(--ltn_active);
}
#ltn_root .custom-checkbox .custom-control-label {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

#ltn_root .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 20px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: filter 0.12s ease, background-color 0.12s ease;
  text-decoration: none;
}
#ltn_root .btn-block { width: 100%; display: flex; }
#ltn_root .btn-primary,
#ltn_root .add-comment-btn,
#ltn_root input[type="submit"].btn {
  background: var(--ltn_primary);
  color: var(--ltn_primary_text);
}
#ltn_root .btn-primary:hover { filter: brightness(1.08); }
#ltn_root .btn-outline-primary {
  background: var(--ltn_fill);
  color: var(--ltn_text) !important;
  border: 0 !important;
}
#ltn_root .btn-outline-primary:hover { background: var(--ltn_fill_strong); }
#ltn_root .btn-outline-danger,
#ltn_root .btn-danger {
  background: color-mix(in srgb, var(--ltn_danger) 16%, transparent);
  color: var(--ltn_danger) !important;
  border: 0 !important;
}
#ltn_root .btn-outline-danger:hover { background: color-mix(in srgb, var(--ltn_danger) 26%, transparent); }
#ltn_root .btn-light,
#ltn_root .btn-dark { background: var(--ltn_fill); color: var(--ltn_text); }
#ltn_root .btn-success { background: #34c759; color: #04270f; }
#ltn_root .btn-xs { min-height: 38px; font-size: 14px; }
#ltn_root .btn-sm { min-height: 36px; padding: 6px 12px; font-size: 14px; }

#ltn_root .modal { z-index: 1080; }
#ltn_root .modal-backdrop { z-index: 1070; }

#ltn_root .ltn_modal_dialog {
  max-width: 620px;
  margin: 0 auto;
  padding: 24px 16px;
  min-height: 100%;
  display: flex;
  align-items: center;
}
#ltn_root .ltn_modal_content {
  width: 100%;
  border: 0;
  border-radius: var(--ltn_r_sheet);
  background: var(--ltn_bg_grouped);
  color: var(--ltn_text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
  max-height: calc(100vh - 48px);
  overflow: hidden;
}
#ltn_root .ltn_modal_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 0.5px solid var(--ltn_separator);
}
#ltn_root .modal-title,
#ltn_root .ltn_modal_header h5 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  color: var(--ltn_text);
}
#ltn_root .ltn_modal_header .close {
  border: 0;
  background: var(--ltn_fill);
  color: var(--ltn_text_secondary);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 1;
  padding: 0;
  text-shadow: none;
  flex: 0 0 auto;
}
#ltn_root .ltn_modal_header .close:hover { background: var(--ltn_fill_strong); color: var(--ltn_text); }
#ltn_root .ltn_modal_body {
  padding: 20px;
  overflow-y: auto;
  max-height: calc(100vh - 210px);
}
#ltn_root .ltn_modal_body h5 { font-size: 16px; font-weight: 600; margin: 22px 0 8px; }
#ltn_root .ltn_modal_body h5:first-child { margin-top: 0; }
#ltn_root .ltn_modal_body p { font-size: 14px; color: var(--ltn_text_secondary); line-height: 1.5; }
#ltn_root .ltn_modal_body hr { border: 0; border-top: 1px solid var(--ltn_separator); margin: 20px 0; }
#ltn_root .ltn_modal_footer {
  padding: 14px 20px;
  border-top: 0.5px solid var(--ltn_separator);
  background: var(--ltn_bg_grouped);
}
#ltn_root .ltn_modal_footer .row { width: 100%; margin: 0; gap: 10px; display: flex; }
#ltn_root .ltn_modal_footer .row > [class*="col-"] {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none;
  flex: 1 1 0;
}
#ltn_root .ltn_modal_footer .row > .col-4,
#ltn_root .ltn_modal_footer .row > .col-3 { flex: 0 0 auto; min-width: 120px; }

#ltn_root .ltn_tabs {
  display: flex;
  gap: 2px;
  border: 0;
  background: var(--ltn_fill);
  border-radius: 9px;
  padding: 2px;
  margin-bottom: 16px;
  list-style: none;
}
#ltn_root .ltn_tabs .nav-item { flex: 1 1 0; }
#ltn_root .ltn_tabs .nav-link {
  display: block;
  text-align: center;
  padding: 7px 10px;
  border: 0 !important;
  border-radius: 7px;
  color: var(--ltn_text_secondary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
#ltn_root .ltn_tabs .nav-link.active {
  background: var(--ltn_bg);
  color: var(--ltn_text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

#ltn_root .alert {
  border: 0;
  border-radius: var(--ltn_r_field);
  padding: 12px 16px;
  font-size: 14px;
  background: var(--ltn_fill);
  color: var(--ltn_text);
}
#ltn_root .alert-info { background: color-mix(in srgb, var(--ltn_active) 16%, transparent); }
#ltn_root .alert-warning { background: color-mix(in srgb, #ff9f0a 18%, transparent); }
#ltn_root .alert-success { background: color-mix(in srgb, #34c759 18%, transparent); }

#ltn_root .table { color: var(--ltn_text); }
#ltn_root .badge { border-radius: 6px; padding: 4px 8px; font-size: 12px; }

#ltn_root .ltn_status_overlay {
  position: fixed;
  inset: 0;
  z-index: 1075;
  background: var(--ltn_scrim);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#ltn_root .ltn_status_overlay .ltn_modal_dialog { padding: 0; min-height: 0; }

#ltn_root .ltn_spinner {
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--ltn_fill_strong);
  border-top-color: var(--ltn_text_secondary);
  border-radius: 50%;
  margin: 0 auto;
  animation: ltn_spin 0.8s linear infinite;
}
@keyframes ltn_spin { to { transform: rotate(360deg); } }

@media (max-width: 833px) {
  #ltn_root {
    --ltn_inset: 14px;
    --ltn_pad_h: var(--ltn_pad_h_compact);
    --ltn_timeline_h: 172px;
  }

  #ltn_root #custom_timecode { font-size: 48px; }
  #ltn_root .ltn_toolbar_name { font-size: 15px; line-height: 20px; max-width: 40vw; }
  #ltn_root .ltn_tbtn_label span { display: none; }

    #ltn_root .ltn_work {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "actions"
      "tags"
      "pads";
  }
    #ltn_root .ltn_work > .ltn_input_panel { grid-area: auto; }
  #ltn_root .ltn_work_panel { overflow-y: auto; gap: 12px; }
  #ltn_root .ltn_work_col { flex: 0 0 auto; }
  #ltn_root .ltn_area { overflow: visible; min-height: 96px; }

  #ltn_root .ltn_pads > div,
  #ltn_root .ltn_pads_event > div { width: 50%; }

  #ltn_root .ltn_work_col_tags::after {
    content: "";
    display: block;
    height: 1px;
    background: var(--ltn_separator);
    margin: 4px 0 0;
  }

    #ltn_root .ltn_input_panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 1090;
    max-height: 88vh;
    border-radius: 14px 14px 0 0;
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }
  #ltn_root.ltn_sheet_open .ltn_input_panel { transform: translateY(0); }

  #ltn_root .ltn_sheet_head {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0 12px;
    position: relative;
  }
  #ltn_root .ltn_sheet_grabber {
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: var(--ltn_fill_strong);
  }
  #ltn_root .ltn_sheet_close {
    position: absolute;
    right: 0;
    top: 2px;
    border: 0;
    background: var(--ltn_fill);
    color: var(--ltn_text_secondary);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }
  #ltn_root.ltn_sheet_open .ltn_sheet_scrim { display: block; }

  #ltn_root .ltn_modal_dialog { padding: 0; align-items: flex-end; }
  #ltn_root .ltn_modal_content {
    border-radius: 14px 14px 0 0;
    max-height: 92vh;
  }
  #ltn_root .ltn_modal_body { max-height: calc(92vh - 150px); }
  #ltn_root[data-ltn_notes="timeline"] #marker_table tr { flex-basis: 210px; width: 210px; }
}

@media (max-width: 480px) {
  #ltn_root #custom_timecode { font-size: 40px; }
  #ltn_root .ltn_pads > div,
  #ltn_root .ltn_pads_event > div { width: 50%; }
}

@supports not (background: color-mix(in srgb, red 25%, transparent)) {
  #ltn_root .ltn_pad,
  #ltn_root .ltn_action {
    background: var(--ltn_fill);
    border-color: var(--ltn_fill_strong) !important;
  }
  #ltn_root .ltn_action_primary { background: var(--ltn_primary); color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  #ltn_root *,
  #ltn_root *::before,
  #ltn_root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (min-width: 834px) {
  #ltn_root .ltn_work > .ltn_input_panel { width: 340px; align-self: stretch; }
}

#ltn_root .ltn_tag ,
#ltn_root .et-btn-small {
  border-color: color-mix(in srgb, var(--ltn_tone, #999) 45%, transparent) !important;
}
#ltn_root .ltn_tag:has(input[type="checkbox"]:checked) ,
#ltn_root .et-btn-small:has(input[type="checkbox"]:checked) {
  background: color-mix(in srgb, var(--ltn_tone, var(--ltn_text)) 26%, transparent);
  border-color: color-mix(in srgb, var(--ltn_tone, var(--ltn_text)) 70%, transparent) !important;
  color: var(--ltn_text);
}

#ltn_root[data-ltn_screen="landing"] .ltn_status_overlay { display: none !important; }

#ltn_root .ltn_work_col_tags.ltn_hidden { display: none; }

html.ltn_fullscreen .ltn_seo_content { visibility: hidden; }

#ltn_root #privat_session_name_div { display: none !important; }
#ltn_root #event_name_div {
  margin: 0 var(--ltn_inset) 6px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  min-height: 3px;
}
#ltn_root #event_name_div .col-8 { display: none; }
#ltn_root #event_name_div .col-4 { flex: 1 1 100%; max-width: 100%; padding: 0; }
#ltn_root #event_name_div .ltn_sync { max-width: none; margin: 0; }

#ltn_root[data-ltn_notes="timeline"] .ltn_notes_panel { height: auto; flex: 0 0 auto; }
#ltn_root[data-ltn_notes="timeline"] #ltn_notes {
  height: var(--ltn_timeline_h);
  flex: 0 0 var(--ltn_timeline_h);
}
#ltn_root[data-ltn_notes="timeline"] #marker_table tr {
  height: calc(var(--ltn_timeline_h) - 12px);
  align-content: start;
}
#ltn_root[data-ltn_notes="timeline"] #marker_table td:nth-child(3) {
  -webkit-line-clamp: 2;
}

@media (max-width: 833px) {
    #ltn_root[data-ltn_notes="list"] .ltn_work_panel { max-height: none; }
  #ltn_root[data-ltn_notes="list"] .ltn_notes_panel { flex: 0 0 auto; max-height: 46vh; }
}

#ltn_root .ltn_pads > div,
#ltn_root .btn-quickbuttons > div,
#ltn_root .ltn_pads_event > div ,
#ltn_root .btn-quickbuttons_event > div { min-width: 124px; }

#ltn_root .ltn_tags ,
#ltn_root .et-btn-smalls { margin: 0; }

/* Was also under prefers-color-scheme; the attribute rule below is now the
   only way these apply, matching the palette. */
html[data-ltn_theme="light"] #ltn_root .ltn_pad {
  color: color-mix(in srgb, var(--ltn_tone) 72%, #000);
}
html[data-ltn_theme="light"] #ltn_root .ltn_action_primary { color: #0060df; }

html.ltn_fullscreen #ltn_root { z-index: 1060; }
html.ltn_fullscreen .modal-backdrop { display: none !important; }

#ltn_root .modal {
  background: var(--ltn_scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
#ltn_root .modal.show { display: block; }

#ltn_root .ltn_modal_dialog { pointer-events: auto; }

#ltn_root .ltn_menu { position: relative; }
#ltn_root .ltn_menu_list {
  position: absolute;
  inset: auto 0 auto auto;
  margin-top: 6px;
}
#ltn_root .ltn_menu_list.show { display: block; }
#ltn_root .ltn_menu_row { display: block; width: 100%; }
#ltn_root .ltn_menu_row.display-none { display: none; }

/* On a short window the menu was taller than the space under the toolbar and
   the last entries were simply cut off, with no way to reach them. It now
   stops short of the bottom of the viewport and scrolls instead. The toolbar
   plus a small margin is roughly 96px. */
#ltn_root .ltn_menu_list {
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Active users, in its own dropdown next to the menu. */
#ltn_root #ltn_users_toggle { position: relative; }
#ltn_root .ltn_users_count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--ltn_primary);
  color: var(--ltn_primary_text);
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
}
#ltn_root .ltn_users_list { min-width: 200px; max-width: 280px; }
#ltn_root .ltn_users_list .activeusers_list { padding: 2px 12px 6px; }

#ltn_root .ltn_actions.ltn_actions_inline_input .ltn_action_primary { display: none; }
#ltn_root .ltn_actions.ltn_actions_inline_input .ltn_action { flex: 1 1 auto; }

#ltn_root .ltn_notes_table,
#ltn_root .ltn_notes_table > :not(caption) > * > * {
  background-color: transparent;
  box-shadow: none;
  color: var(--ltn_text);
  border-bottom-width: 0;
}

#ltn_root .input-group { flex-wrap: nowrap; align-items: stretch; }

#ltn_root .input-group > .form-control,
#ltn_root .input-group > .custom-select,
#ltn_root .input-group > select,
#ltn_root .input-group > input,
#ltn_root .input-group > textarea {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

#ltn_root .input-group > .input-group-prepend,
#ltn_root .input-group > .input-group-append,
#ltn_root .input-group > .input-group-text {
  flex: 0 0 auto;
  max-width: 55%;
}

#ltn_root .input-group-text { min-width: 0; max-width: 100%; }

@media (max-width: 560px) {
  #ltn_root .input-group-text { width: auto !important; max-width: 42%; }
}

#ltn_root .custom-switch .custom-control-label { padding: 0 !important; }

#ltn_root .custom-switch .custom-control-label::before { align-self: center; }

#ltn_root .custom-switch .custom-control-label::after {
  top: 50%;
  transform: translateY(-50%);
}
#ltn_root .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translate(20px, -50%);
}

#ltn_root .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}

@media (min-width: 834px) {
  #ltn_root .ltn_input_panel .input-group-text { width: 104px !important; }
  #ltn_root .ltn_input_panel .input-group > .input-group-prepend { max-width: 104px; }
}

#ltn_root .ltn_timer_meta {
  font-size: 13px;
  color: var(--ltn_text_tertiary);
  letter-spacing: 0.01em;
  margin-top: -2px;
  min-height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#ltn_root .ltn_timer_meta:empty { display: none; }
#ltn_root .ltn_meta_sep { opacity: 0.5; }
#ltn_root .ltn_meta_offset { color: var(--ltn_text_secondary); }

#ltn_root #custom_timecode { font-size: calc(76px * var(--ltn_tc_scale, 1)); }

@media (max-width: 833px) {
  #ltn_root #custom_timecode { font-size: calc(48px * var(--ltn_tc_scale, 1)); }
}
@media (max-width: 480px) {
  #ltn_root #custom_timecode { font-size: calc(40px * var(--ltn_tc_scale, 1)); }
}

#ltn_root .ltn_resize_v,
#ltn_root .ltn_resize_c {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#ltn_root .ltn_resize_v {
  height: 12px;
  cursor: row-resize;
  margin: 0 var(--ltn_inset);
}
#ltn_root .ltn_resize_c {
  cursor: col-resize;
  width: 100%;
}

#ltn_root .ltn_resize_grip {
  display: block;
  border-radius: 3px;
  background: var(--ltn_fill_strong);
  transition: background-color 0.12s ease;
}
#ltn_root .ltn_resize_v .ltn_resize_grip { width: 48px; height: 4px; }
#ltn_root .ltn_resize_c .ltn_resize_grip { width: 4px; height: 44px; }

#ltn_root .ltn_resize_v:hover .ltn_resize_grip,
#ltn_root .ltn_resize_c:hover .ltn_resize_grip,
#ltn_root .ltn_resize_v:focus-visible .ltn_resize_grip,
#ltn_root .ltn_resize_c:focus-visible .ltn_resize_grip { background: var(--ltn_primary); }

#ltn_root.ltn_resizing,
#ltn_root.ltn_resizing * { cursor: inherit !important; user-select: none !important; }
#ltn_root.ltn_resizing .ltn_resize_grip { background: var(--ltn_primary); }

@media (min-width: 834px) {
  #ltn_root .ltn_work {
        grid-template-columns:
      var(--ltn_w_input, 340px)
      10px
      var(--ltn_w_tags, minmax(0, 1fr))
      10px
      var(--ltn_w_pads, minmax(0, 1fr));
    grid-template-areas:
      "input hi tags hc pads"
      "input hi tags hc actions";
  }
  #ltn_root #ltn_resize_cols  { grid-area: hc; }
  #ltn_root #ltn_resize_input { grid-area: hi; }
  #ltn_root .ltn_work > .ltn_input_panel { width: auto; }

    #ltn_root .ltn_work.ltn_work_no_input {
        grid-template-columns:
      0 0 var(--ltn_w_tags, minmax(0, 1fr)) 10px var(--ltn_w_pads, minmax(0, 1fr));
  }
  #ltn_root .ltn_work.ltn_work_no_input #ltn_resize_input { display: none; }

    #ltn_root[data-ltn_notes="timeline"] #ltn_notes {
    height: var(--ltn_h_notes, var(--ltn_timeline_h));
    flex: 0 0 var(--ltn_h_notes, var(--ltn_timeline_h));
  }
  #ltn_root[data-ltn_notes="list"] .ltn_notes_panel {
    flex: 0 0 var(--ltn_h_notes, 46vh);
    min-height: 0;
  }
  #ltn_root[data-ltn_notes="list"] .ltn_work_panel { flex: 1 1 auto; max-height: none; }
}

@media (max-width: 833px) {
  #ltn_root .ltn_resize_v,
  #ltn_root .ltn_resize_c { display: none; }
}

#ltn_root select.custom-select,
#ltn_root select,
#ltn_root .custom-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20' fill='none' stroke='%238a8a8f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5L6 4l3.5 3.5'/%3E%3Cpath d='M2.5 12.5L6 16l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 18px;
  padding-right: 34px;
}
/* The lighter arrow is the default now that dark is; light mode puts the
   darker one back. */
html[data-ltn_theme="light"] #ltn_root select.custom-select,
html[data-ltn_theme="light"] #ltn_root select,
html[data-ltn_theme="light"] #ltn_root .custom-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20' fill='none' stroke='%236b6b70' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5L6 4l3.5 3.5'/%3E%3Cpath d='M2.5 12.5L6 16l3.5-3.5'/%3E%3C/svg%3E");
}
#ltn_root select[multiple],
#ltn_root select[size]:not([size="1"]) { background-image: none; padding-right: 14px; }

#ltn_root .modal-xl .ltn_modal_content,
#ltn_root .modal-xl { max-width: none; }
#ltn_root .modal-dialog.modal-xl { max-width: 1000px; }

@media (max-width: 1060px) {
  #ltn_root .modal-dialog.modal-xl { max-width: 100%; }
}

@media (min-width: 900px) {
  #ltn_root .modal-xl .ltn_modal_body { column-gap: 32px; }
}

#ltn_root #ltn_tags_host > .tab-pane { display: block; opacity: 1; }
#ltn_root #ltn_tags_host > .tab-pane > h5:first-child { margin-top: 0; }

/* Stands in for the lock emoji the app writes into private notes. Sized to sit
   with the text rather than to be read as part of it. */
#ltn_root .ltn_lock {
  font-size: 0.85em;
  color: var(--ltn_text_tertiary);
  margin-right: 4px;
  vertical-align: baseline;
}
/* An emoji carries its own colour; a Font Awesome glyph inherits, so it needs
   to stay legible on the tinted rows too. */
#ltn_root .ltn_pending .ltn_lock,
#ltn_root .flash .ltn_lock { color: inherit; opacity: 0.65; }

@media (max-width: 833px) {
  #ltn_root .ltn_toolbar__side--end .mobile-hide,
  #ltn_root .ltn_toolbar_side_end .mobile-hide { display: none; }
}

#ltn_root #ltn_tags_host > .tab-pane > h5:first-child,
#ltn_root #ltn_tags_host > .tab-pane > h5:first-child + p { display: none; }
#ltn_root #ltn_tags_host .et_tags_div:empty { display: none; }
#ltn_root #ltn_tags_host { min-height: 40px; }

@media (min-width: 834px) {

  #ltn_root[data-ltn_notes="list"] .ltn_stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 10px var(--ltn_w_notes, 380px);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "timer timer  timer"
      "htime htime  htime"
      "work  hnotes notes";
    min-height: 0;
  }

  #ltn_root[data-ltn_notes="list"] .ltn_timer_panel { grid-area: timer; }
    #ltn_root[data-ltn_notes="list"] #ltn_resize_timer {
    grid-area: htime;
        display: flex;
    align-items: center;
    justify-content: center;
  }
  #ltn_root[data-ltn_notes="list"] .ltn_work_panel  { grid-area: work; }
  #ltn_root[data-ltn_notes="list"] .ltn_notes_panel { grid-area: notes; }
  #ltn_root[data-ltn_notes="list"] #ltn_resize_notes { grid-area: hnotes; }

    #ltn_root[data-ltn_notes="list"] #ltn_resize_notes {
    height: auto;
    width: 100%;
    margin: 0;
    cursor: col-resize;
  }
  #ltn_root[data-ltn_notes="list"] #ltn_resize_notes .ltn_resize_grip {
    width: 4px;
    height: 44px;
  }

  #ltn_root[data-ltn_notes="list"] .ltn_notes_panel {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    padding-top: 0;
  }
  #ltn_root[data-ltn_notes="list"] .ltn_work_panel {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    padding-right: 0;
  }
  #ltn_root[data-ltn_notes="list"] #ltn_notes { padding-right: var(--ltn_inset); }

    #ltn_root[data-ltn_notes="list"] .ltn_work {
    grid-template-columns: var(--ltn_w_input, 320px) 10px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "input hi pads"
      "input hi tags"
      "input hi actions";
  }
  #ltn_root[data-ltn_notes="list"] .ltn_work > .ltn_input_panel { grid-area: input; width: auto; }
  #ltn_root[data-ltn_notes="list"] .ltn_work_col_pads { grid-area: pads; }
  #ltn_root[data-ltn_notes="list"] .ltn_work_col_pads .ltn_area {
    flex: 0 0 auto;
    max-height: 44vh;
    overflow-y: auto;
  }
  #ltn_root[data-ltn_notes="list"] .ltn_work_col_tags { grid-area: tags; }
  #ltn_root[data-ltn_notes="list"] .ltn_actions        { grid-area: actions; align-self: end; }
  #ltn_root[data-ltn_notes="list"] #ltn_resize_input   { grid-area: hi; }

    #ltn_root[data-ltn_notes="list"] #ltn_resize_cols { display: none; }

    #ltn_root[data-ltn_notes="list"] .ltn_work_col_tags .ltn_area {
    flex: 0 0 auto;
    max-height: 132px;
    overflow-y: auto;
  }
  
    #ltn_root[data-ltn_notes="list"] .ltn_work.ltn_work_no_input {
    grid-template-columns: 0 0 minmax(0, 1fr);
  }
  #ltn_root[data-ltn_notes="list"] .ltn_work.ltn_work_no_input #ltn_resize_input { display: none; }
}

#ltn_root[data-ltn_screen="landing"] {
  display: block;
  position: static;
  padding: 0;
  margin: 8px 0 40px;
  background: transparent;
}

#ltn_root[data-ltn_screen="landing"] .ltn_screen_landing {
  display: block;
  height: auto;
  padding: 0;
  overflow: visible;
}

/* The image is the whole panel now, not a column beside it, so it moves onto
   .ltn_hero itself and the chooser sits centred on top of it. */
#ltn_root .ltn_hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 700px;
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--ltn_fill);
  /* The stylesheet lives in assets/ now, and url() resolves against the
     stylesheet, so the image one level up needs saying so. */
  background-image: url("../ltn_pro_bg.jpg");
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 0 var(--ltn_separator) inset;
}

/* The media column was an empty div holding the picture; the picture is on the
   parent now, so there is nothing left for it to do. Kept in the markup
   because it is only presentational. */
#ltn_root .ltn_hero_media { display: none; }

#ltn_root .ltn_hero_body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  padding: 40px 28px;
}

/* Centred, and not stretched the full width of a wide panel. */
#ltn_root .ltn_hero .ltn_options,
#ltn_root .ltn_hero .ltn_resume {
  width: 100%;
  max-width: 460px;
}

/* Both sit on the photo now. The resume chip was a 12% tint, which was legible
   over a flat colour column but not over an image, so inside the hero it gets
   a solid backing like the chooser below it. */
#ltn_root .ltn_hero .ltn_resume {
  background: var(--ltn_bg);
  border-color: color-mix(in srgb, var(--ltn_primary) 32%, var(--ltn_separator));
}

#ltn_root .ltn_hero_eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ltn_primary);
  font-weight: 600;
}
#ltn_root .ltn_hero_title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ltn_text);
}
#ltn_root .ltn_hero_lead {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ltn_text_secondary);
  max-width: 62ch;
}

#ltn_root .ltn_hero .ltn_options {
  background: var(--ltn_bg);
  border: 1px solid var(--ltn_separator);
}

#ltn_root .ltn_resume {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ltn_primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ltn_primary) 32%, transparent);
}
#ltn_root .ltn_resume_mark {
  flex: 0 0 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--ltn_primary);
  color: #fff;
}
#ltn_root .ltn_resume_body { flex: 1 1 auto; min-width: 0; }
#ltn_root .ltn_resume_label {
  display: block;
  font-size: 12px;
  color: var(--ltn_text_secondary);
}
#ltn_root .ltn_resume_name {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--ltn_text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ltn_root .ltn_resume .btn { flex: 0 0 auto; min-height: 40px; }

@media (max-width: 560px) {
  /* 700px is most of a phone screen, so the panel keeps its proportions
     without pushing everything below it out of reach. */
  #ltn_root .ltn_hero { min-height: 420px; }
  #ltn_root .ltn_hero_body { padding: 24px 18px; }
  #ltn_root .ltn_resume { flex-wrap: wrap; }
  #ltn_root .ltn_resume .btn { width: 100%; }
}

#ltn_root .display-none { display: none; }

#ltn_root .ltn_timer_panel {
    height: var(--ltn_h_timer, calc(132px * var(--ltn_tc_scale, 1)));
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

#ltn_root .ltn_timer_panel #custom_timecode {
    font-size: calc(76px * var(--ltn_tc_scale, 1));
  line-height: 1;
  flex: 0 0 auto;
}

#ltn_root #ltn_resize_timer { margin-top: 2px; }

#ltn_root #eventTabContent,
#ltn_root #eventTabContent > .tab-pane {
  background: transparent;
  padding: 0;
  border: 0;
}
#ltn_root #eventTabContent > .tab-pane { padding-top: 14px; }

#ltn_root .ltn_sync_warn {
  position: relative;
  color: #ff9f0a;
  background: color-mix(in srgb, #ff9f0a 16%, transparent);
}
#ltn_root .ltn_sync_warn:hover {
  background: color-mix(in srgb, #ff9f0a 28%, transparent);
}
#ltn_root .ltn_sync_count {
  font-size: 13px;
  font-weight: 600;
  margin-left: 5px;
  font-variant-numeric: tabular-nums;
}

#ltn_root .ltn_sync_warn.ltn_syncing {
  color: var(--ltn_text_secondary);
  background: var(--ltn_fill);
}
#ltn_root .ltn_sync_warn.ltn_syncing i { animation: ltn_spin 0.9s linear infinite; }

#ltn_root .ltn_sync_tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: none;
  width: max-content;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--ltn_bg_elevated);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 0 0.5px var(--ltn_separator);
  color: var(--ltn_text);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}
#ltn_root .ltn_sync_warn:hover .ltn_sync_tip,
#ltn_root .ltn_sync_warn:focus-visible .ltn_sync_tip { display: block; }
#ltn_root .ltn_sync_tip b { display: block; margin-bottom: 3px; }
#ltn_root .ltn_sync_tip em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  color: var(--ltn_text_secondary);
}

#ltn_root #marker_table tr.ltn_pending {
  border: 1px dashed color-mix(in srgb, #ff9f0a 55%, transparent);
  background: color-mix(in srgb, #ff9f0a 9%, var(--ltn_bg_elevated));
}
#ltn_root .ltn_pending_flag {
  color: #ff9f0a;
  font-size: 11px;
  margin-left: 6px;
}

#ltn_root select.ltn_select_swatched {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

#ltn_root .ltn_swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--ltn_separator);
  border-radius: 0 var(--ltn_r_field) var(--ltn_r_field) 0;
  background: var(--ltn_bg);
}

#ltn_root .ltn_swatch {
  --ltn_swatch: #999999;
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ltn_swatch);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.12s ease;
}
#ltn_root .ltn_swatch:hover { transform: scale(1.12); }

#ltn_root .ltn_swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, 0.45);
  pointer-events: none;
}

#ltn_root .ltn_swatch_on {
  box-shadow: 0 0 0 2px var(--ltn_bg),
              0 0 0 4px var(--ltn_swatch),
              0 0 0 5px rgba(128, 128, 128, 0.55);
}
#ltn_root .ltn_swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ltn_bg), 0 0 0 4px var(--ltn_primary);
}

#ltn_root .ltn_swatch_none {
  background: transparent;
  border: 1.5px dashed var(--ltn_separator_opaque);
}
#ltn_root .ltn_swatch_none::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  bottom: 3px;
  width: 1.5px;
  background: var(--ltn_separator_opaque);
  transform: rotate(45deg);
}
#ltn_root .ltn_swatch_none.ltn_swatch_on {
  box-shadow: 0 0 0 2px var(--ltn_bg), 0 0 0 4px var(--ltn_text_secondary);
}

#ltn_root .input-group:has(.ltn_swatches) { flex-wrap: wrap; }
#ltn_root .input-group:has(.ltn_swatches) .input-group-prepend {
  max-width: 100%;
  flex: 1 1 100%;
}
#ltn_root .input-group:has(.ltn_swatches) .input-group-text {
  width: 100% !important;
  max-width: 100%;
  border-radius: var(--ltn_r_field) var(--ltn_r_field) 0 0;
}
#ltn_root .ltn_swatches {
  border-radius: 0 0 var(--ltn_r_field) var(--ltn_r_field);
  border-top: 0;
  width: 100%;
  flex: 1 1 100%;
}

#ltn_root.ltn_buttons_team #ltn_own_buttons { display: none; }

#ltn_root #buttonsModal .row:has(#form_option_display_buttons2) { display: none; }

#ltn_root #ltn_team_buttons_host > .tab-pane { display: block; opacity: 1; }
#ltn_root #ltn_team_buttons_host > .tab-pane > h5:first-child { display: none; }
#ltn_root #ltn_team_buttons_host:empty { display: none; }

#ltn_root #copy-event-url-btn {
  border-radius: 0 var(--ltn_r_field) var(--ltn_r_field) 0 !important;
  height: auto !important;
  min-height: 44px;
}
#ltn_root #event_url {
  border-radius: var(--ltn_r_field) 0 0 var(--ltn_r_field) !important;
}

#ltn_root .ltn_ios_btn {
  background: var(--ltn_fill);
  color: var(--ltn_text);
  gap: 9px;
}
#ltn_root .ltn_ios_btn:hover { background: var(--ltn_fill_strong); color: var(--ltn_text); }
#ltn_root .ltn_ios_btn i { font-size: 17px; }

#ltn_root .timecode_markers_event_info { margin: 18px 0; }
#ltn_root .timecode_markers_event_info h4 { font-size: 18px; margin-bottom: 8px; }
#ltn_root .timecode_markers_event_info img { max-width: 180px; height: auto; }

#ltn_root .ltn_fps_note.text-muted,
#ltn_root .ltn_fps_note {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: #ff9f0a !important;
  line-height: 1.4;
}
#ltn_root .ltn_fps_note:empty { display: none; }

#ltn_root .custom-switch:has(#form_option_display_buttons),
#ltn_root .custom-switch:has(#form_option_display_buttons2),
#ltn_root .custom-switch:has(#form_option_display_advanced_button_settings),
#ltn_root .form-group:has(> .custom-switch > #form_option_display_buttons),
#ltn_root .form-group:has(> .custom-switch > #form_option_display_advanced_button_settings) {
  display: none;
}

#ltn_root .ltn_meta_fps { color: var(--ltn_text_tertiary); font-size: 12px; }

#ltn_root .ltn_toolbar_sub #ltn_private { font-size: 11px; }

#ltn_root .ltn_add_more {
  align-self: flex-start;
  clear: both;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 7px 14px;
  border: 1px dashed var(--ltn_separator_opaque);
  border-radius: 999px;
  background: transparent;
  color: var(--ltn_text_tertiary);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}
#ltn_root .ltn_add_more:hover {
  color: var(--ltn_text_secondary);
  border-color: var(--ltn_text_tertiary);
  background: var(--ltn_fill);
}
#ltn_root .ltn_add_more i { font-size: 11px; }

@keyframes ltn_note_in {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes ltn_note_in_side {
  from { opacity: 0; transform: translateX(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
#ltn_root[data-ltn_notes="list"] #marker_table tr.flash {
  animation: ltn_note_in 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both,
             ltn_flash 1.1s ease-out 1;
}
#ltn_root[data-ltn_notes="timeline"] #marker_table tr.flash {
  animation: ltn_note_in_side 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both,
             ltn_flash 1.1s ease-out 1;
}

#ltn_root #add_new_event_tag,
#ltn_root #add_new_comment_button,
#ltn_root #add_new_event_button {
  border-radius: 0 var(--ltn_r_field) var(--ltn_r_field) 0 !important;
}
#ltn_root .btn-remove {
  border-radius: 0 var(--ltn_r_field) var(--ltn_r_field) 0 !important;
}

#ltn_root .et-group-separator {
  width: 100%;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ltn_text_tertiary);
  margin: 10px 0 4px;
}

#ltn_root .ltn_review,
#ltn_root .ltn_review_add { display: none; }

#ltn_root[data-ltn_notes="review"] .ltn_timer_panel,
#ltn_root[data-ltn_notes="review"] #ltn_resize_timer { display: none; }

#ltn_root[data-ltn_notes="review"] .ltn_review { display: flex; }
#ltn_root[data-ltn_notes="review"] .ltn_review_add { display: grid; }

@media (min-width: 834px) {
  #ltn_root[data-ltn_notes="review"] .ltn_stage {
    display: grid;
    grid-template-columns: var(--ltn_w_review, minmax(0, 360px)) 10px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "filters handle notes";
    min-height: 0;
  }
  #ltn_root[data-ltn_notes="review"] .ltn_review { grid-area: filters; }
  #ltn_root[data-ltn_notes="review"] #ltn_resize_notes { grid-area: handle; }
  #ltn_root[data-ltn_notes="review"] .ltn_notes_panel { grid-area: notes; }

    #ltn_root[data-ltn_notes="review"] #ltn_resize_notes {
    height: auto;
    width: 100%;
    margin: 0;
    cursor: col-resize;
  }
  #ltn_root[data-ltn_notes="review"] #ltn_resize_notes .ltn_resize_grip {
    width: 4px;
    height: 44px;
  }

    #ltn_root[data-ltn_notes="review"] .ltn_work_panel {
    grid-area: filters;
    height: 0;
    min-height: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
  }
  #ltn_root[data-ltn_notes="review"] .ltn_work > *:not(.ltn_input_panel) { display: none; }
  #ltn_root[data-ltn_notes="review"] .ltn_input_panel { pointer-events: auto; }
}

@media (max-width: 833px) {
  #ltn_root[data-ltn_notes="review"] .ltn_stage { overflow-y: auto; }
  #ltn_root[data-ltn_notes="review"] .ltn_work_panel { display: none; }
    #ltn_root[data-ltn_notes="review"] .ltn_review { order: -1; overflow: visible; }
  #ltn_root[data-ltn_notes="review"] .ltn_notes_panel { flex: 1 1 auto; min-height: 50vh; }
  #ltn_root[data-ltn_notes="review"] #ltn_notes { overflow-y: visible; }
  #ltn_root .ltn_review_add { right: 18px; bottom: 18px; }
}

#ltn_root .ltn_review {
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  padding: 18px var(--ltn_inset);
}

#ltn_root .ltn_review_head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
#ltn_root .ltn_review_title {
  font-size: 26px;
  font-weight: 300;
  color: var(--ltn_text_secondary);
  letter-spacing: -0.01em;
}
#ltn_root .ltn_review_count { font-size: 13px; color: var(--ltn_text_tertiary); }

#ltn_root .ltn_search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 12px;
  background: var(--ltn_bg_elevated);
  border-radius: 14px;
}
#ltn_root .ltn_search > i { color: var(--ltn_primary); font-size: 15px; }
#ltn_root .ltn_search input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  border: 0 !important;
  background: transparent !important;
  color: var(--ltn_text) !important;
  font-size: 16px;
  padding: 0;
}
#ltn_root .ltn_search input:focus { box-shadow: none; outline: none; }
#ltn_root .ltn_search_clear {
  border: 0;
  background: none;
  color: var(--ltn_text_tertiary);
  cursor: pointer;
  padding: 4px;
}
#ltn_root .ltn_search_clear:hover { color: var(--ltn_text_secondary); }

#ltn_root .ltn_review_group { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
#ltn_root .ltn_review_label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ltn_text_secondary);
}
#ltn_root .ltn_review_clear,
#ltn_root .ltn_review_reset {
  border: 0;
  background: none;
  color: var(--ltn_primary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
#ltn_root .ltn_review_reset {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#ltn_root .ltn_tone_grid { display: flex; flex-wrap: wrap; gap: 8px; }
#ltn_root .ltn_tone {
  --ltn_swatch: #999;
  position: relative;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ltn_swatch);
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.12s ease, box-shadow 0.12s ease;
}
#ltn_root .ltn_tone::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, 0.45);
}
#ltn_root .ltn_tone:hover { opacity: 0.8; }
#ltn_root .ltn_tone.ltn_on {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--ltn_bg), 0 0 0 4px var(--ltn_swatch);
}

#ltn_root .ltn_tagfilter { display: flex; flex-wrap: wrap; gap: 6px; }
#ltn_root .ltn_tagchip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 13px;
  border: 1px solid var(--ltn_fill_strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ltn_text_secondary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
#ltn_root .ltn_tagchip:hover { background: var(--ltn_fill); }
#ltn_root .ltn_tagchip.ltn_on {
  background: color-mix(in srgb, var(--ltn_primary) 22%, transparent);
  border-color: color-mix(in srgb, var(--ltn_primary) 55%, transparent);
  color: var(--ltn_text);
}
#ltn_root .ltn_review_hint { font-size: 13px; color: var(--ltn_text_tertiary); margin: 0; }

#ltn_root[data-ltn_notes="review"] .ltn_notes_panel { flex: 1 1 auto; padding-top: 14px; }
#ltn_root[data-ltn_notes="review"] #ltn_notes {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 var(--ltn_inset) 12px;
}
#ltn_root[data-ltn_notes="review"] .ltn_notes_table,
#ltn_root[data-ltn_notes="review"] #marker_table { display: block; }
#ltn_root[data-ltn_notes="review"] #marker_table tr {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "tc dot body meta";
  margin-bottom: 8px;
}

#ltn_root #marker_table tr.ltn_filtered { display: none !important; }

#ltn_root .ltn_review_empty {
  padding: 26px 16px;
  text-align: center;
  color: var(--ltn_text_tertiary);
  font-size: 14px;
}

#ltn_root .ltn_review_add {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 12;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: var(--ltn_active);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.32);
  transition: transform 0.1s ease, filter 0.12s ease;
}
#ltn_root .ltn_review_add:hover { filter: brightness(1.1); }
#ltn_root .ltn_review_add:active { transform: scale(0.94); }

#ltn_root[data-ltn_notes="review"] .ltn_input_panel {
  position: fixed;
  left: auto;
  right: 0;
  bottom: 0;
  width: min(460px, 100%);
  z-index: 1090;
  max-height: 88vh;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
#ltn_root[data-ltn_notes="review"].ltn_sheet_open .ltn_input_panel { transform: translateY(0); }
#ltn_root[data-ltn_notes="review"] .ltn_sheet_head { display: flex; }


#ltn_root .ltn_action_repeat { flex: 0 1 auto; padding: 0 18px; }
#ltn_root .ltn_action_repeat span { font-size: 15px; white-space: nowrap; }

@media (max-width: 833px) {
    #ltn_root .ltn_action_repeat span { display: none; }
  #ltn_root .ltn_action_repeat { padding: 0 16px; }
}

/* Sized to the title beside it: the name's line box (22px) plus the subline's
   (16px) plus the 1px between them. One number, so the two stay in step. */
#ltn_root { --ltn_toolbar_icon_size: 39px; }

#ltn_root .ltn_toolbar_icon {
  order: -2;
  flex: 0 0 auto;
  width: var(--ltn_toolbar_icon_size);
  height: var(--ltn_toolbar_icon_size);
  margin-right: 10px;
  /* A proportion rather than a fixed radius, so the corners keep their shape
     at any size. 22.37% is the ratio Apple uses for an app icon. */
  border-radius: 22.37%;
  object-fit: cover;
  display: block;
}

#ltn_root .ltn_toolbar_icon:not([src]),
#ltn_root .ltn_toolbar_icon[src=""] { display: none; }

@media (max-width: 833px) {
  /* 20px name line + 1px + 16px subline */
  #ltn_root { --ltn_toolbar_icon_size: 37px; }
  #ltn_root .ltn_toolbar_icon { margin-right: 8px; }
}

@media (min-width: 834px) {
  #ltn_root.ltn_sheet_open .ltn_sheet_scrim { display: none; }
}

#ltn_root .ltn_sheet_close {
  position: absolute;
  right: 0;
  top: 2px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ltn_fill);
  color: var(--ltn_text_secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  text-shadow: none;
  opacity: 1;
}
#ltn_root .ltn_sheet_close:hover {
  background: var(--ltn_fill_strong);
  color: var(--ltn_text);
}

@media (min-width: 834px) {
    #ltn_root[data-ltn_notes="review"] .ltn_sheet_head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    padding: 0 0 10px;
    min-height: 30px;
  }
  #ltn_root[data-ltn_notes="review"] .ltn_sheet_grabber { display: none; }

    #ltn_root[data-ltn_notes="review"].ltn_sheet_open .ltn_work_panel,
  #ltn_root[data-ltn_notes="review"].ltn_review_editing .ltn_work_panel {
    display: block;
        height: auto;
    grid-area: auto;
    pointer-events: auto;
    position: fixed;
    right: 22px;
    bottom: 22px;
    left: auto;
    top: auto;
    z-index: 1080;
    width: min(420px, calc(100vw - 44px));
    max-height: min(76vh, 720px);
    padding: 0;
    border-radius: var(--ltn_r_sheet);
    background: var(--ltn_bg_elevated);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42), 0 0 0 0.5px var(--ltn_separator);
    overflow: hidden;
  }

  #ltn_root[data-ltn_notes="review"].ltn_sheet_open .ltn_work,
  #ltn_root[data-ltn_notes="review"].ltn_review_editing .ltn_work {
    display: block;
    grid-template-columns: none;
    grid-template-areas: none;
    gap: 0;
    height: auto;
    max-height: min(76vh, 720px);
    overflow-y: auto;
    padding: 12px 16px 16px;
  }

    #ltn_root[data-ltn_notes="review"].ltn_sheet_open .ltn_input_panel,
  #ltn_root[data-ltn_notes="review"].ltn_review_editing .ltn_input_panel {
    position: static;
    width: 100%;
    max-width: none;
    max-height: none;
    inset: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    overflow: visible;
  }

    #ltn_root[data-ltn_notes="review"].ltn_sheet_open .ltn_work_col_tags,
  #ltn_root[data-ltn_notes="review"].ltn_review_editing .ltn_work_col_tags {
    display: flex;
    width: 100%;
    max-width: none;
    margin-top: 12px;
    padding: 0;
  }
  #ltn_root[data-ltn_notes="review"].ltn_sheet_open .ltn_work_col_tags .ltn_area,
  #ltn_root[data-ltn_notes="review"].ltn_review_editing .ltn_work_col_tags .ltn_area {
    max-height: 22vh;
    overflow-y: auto;
    padding: 0;
  }

    #ltn_root[data-ltn_notes="review"].ltn_sheet_open .ltn_work_col_pads,
  #ltn_root[data-ltn_notes="review"].ltn_review_editing .ltn_work_col_pads,
  #ltn_root[data-ltn_notes="review"].ltn_sheet_open .ltn_actions,
  #ltn_root[data-ltn_notes="review"].ltn_review_editing .ltn_actions,
  #ltn_root[data-ltn_notes="review"].ltn_sheet_open #ltn_resize_input,
  #ltn_root[data-ltn_notes="review"].ltn_review_editing #ltn_resize_input { display: none; }

    #ltn_root[data-ltn_notes="review"].ltn_sheet_open .ltn_review_add,
  #ltn_root[data-ltn_notes="review"].ltn_review_editing .ltn_review_add { display: none; }
}

#ltn_root[data-ltn_notes="review"] #marker_timecode {
  background-color: var(--ltn_bg) !important;
  color: var(--ltn_text) !important;
  cursor: text;
}

#ltn_root .qb_hotkey_select,
#ltn_root .eb_hotkey_select {
  border-radius: 0 var(--ltn_r_field) var(--ltn_r_field) 0 !important;
}

#ltn_root .ltn_modal_sub {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ltn_text_secondary);
}

#ltn_root .ltn_when { display: flex; flex-wrap: wrap; gap: 8px; }
#ltn_root .ltn_when_preset {
  padding: 8px 14px;
  border: 1px solid var(--ltn_separator);
  border-radius: 999px;
  background: transparent;
  color: var(--ltn_text_secondary);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
#ltn_root .ltn_when_preset:hover { background: var(--ltn_fill); color: var(--ltn_text); }
#ltn_root .ltn_when_preset.ltn_on {
  background: color-mix(in srgb, var(--ltn_primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--ltn_primary) 55%, transparent);
  color: var(--ltn_text);
}

#ltn_root #ltn_when_note { display: block; margin-top: 6px; }

html:not(.ltn_fullscreen) #ltn_root .modal {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#ltn_root .ltn_option_on {
  background: color-mix(in srgb, var(--ltn_primary) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--ltn_primary);
}
#ltn_root .ltn_option_on .ltn_option_name { color: var(--ltn_primary); font-weight: 600; }

/* Hides regardless of what else a rule says, and composes with mobile-hide
   because it is a class rather than an inline style: toggling with jQuery
   show/hide would override the stylesheet and put a toolbar button back on a
   phone where it does not belong. */
#ltn_root .ltn_force_hidden { display: none !important; }

#ltn_root .ltn_options_row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  background: transparent;
  border: 0;
  overflow: visible;
}

#ltn_root .ltn_options_row .ltn_option {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 20px 14px;
  border: 1px solid var(--ltn_separator);
  border-radius: var(--ltn_r_sheet);
  background: var(--ltn_bg_elevated);
}
#ltn_root .ltn_options_row .ltn_option:hover {
  background: var(--ltn_fill);
  border-color: var(--ltn_separator_opaque);
}

#ltn_root .ltn_options_row .ltn_option_icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 17px;
}
#ltn_root .ltn_options_row .ltn_option_body { text-align: center; }
#ltn_root .ltn_options_row .ltn_option_hint { margin-top: 4px; }

#ltn_root .ltn_options_row .ltn_option_chev { display: none; }

#ltn_root .ltn_options_row .ltn_option_on {
  box-shadow: 0 0 0 2px var(--ltn_primary);
  border-color: transparent;
}

@media (max-width: 640px) {
  #ltn_root .ltn_options_row { grid-template-columns: minmax(0, 1fr); }
  #ltn_root .ltn_options_row .ltn_option {
    flex-direction: row;
    text-align: left;
    padding: 14px 16px;
  }
  #ltn_root .ltn_options_row .ltn_option_body { text-align: left; }
}

#ltn_root .custom-switch .custom-control-label {
  flex-wrap: wrap;
  align-items: center;
}
#ltn_root .custom-switch .custom-control-label > small,
#ltn_root .custom-switch .custom-control-label > p,
#ltn_root .custom-switch .custom-control-label > span.ltn_hint {
  flex: 1 1 100%;
  order: 3;
  margin: 5px 0 0;
  padding-right: 70px;     font-size: 13px;
  line-height: 1.45;
    color: var(--ltn_text_secondary) !important;
  font-weight: 400;
}

#ltn_root .text-muted { color: var(--ltn_text_secondary) !important; }

#ltn_root .ltn_toolbar_icon_link {
  order: -2;
  flex: 0 0 auto;
  display: block;
  margin-right: 10px;
  line-height: 0;
  /* Matches the icon it wraps, so the focus ring follows the same corners
     rather than boxing a rounded image. */
  border-radius: 22.37%;
}
#ltn_root .ltn_toolbar_icon_link:focus-visible { outline: 2px solid var(--ltn_primary); outline-offset: 2px; }
#ltn_root .ltn_toolbar_icon_link .ltn_toolbar_icon { margin-right: 0; order: 0; }

#ltn_root .custom-control.custom-switch {
  padding-left: 0;
  display: block;
}

#ltn_root .custom-switch .custom-control-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  grid-template-areas:
    "text control"
    "hint hint";
  align-items: center;
  column-gap: 12px;
  width: 100%;
  padding-left: 0;
  min-height: 32px;
}

#ltn_root .custom-switch .custom-control-label > small,
#ltn_root .custom-switch .custom-control-label > p,
#ltn_root .custom-switch .custom-control-label > span.ltn_hint {
  grid-area: hint;
}

/* The markup separates a switch label from its subline with a <br>. In a grid
   that <br> becomes an item of its own and is auto-placed into an implicit
   row, which is the empty line between the two. The same goes for a <br>
   opening the subline itself. The grid already puts the hint on its own row,
   so neither break has anything left to do. */
#ltn_root .custom-switch .custom-control-label > br { display: none; }
#ltn_root .custom-switch .custom-control-label > small > br:first-child,
#ltn_root .custom-switch .custom-control-label > p > br:first-child,
#ltn_root .custom-switch .custom-control-label > span.ltn_hint > br:first-child { display: none; }

#ltn_root .custom-switch .custom-control-label::before {
  grid-area: control;
  position: static;
  justify-self: end;
  align-self: center;
  width: 46px;
  height: 28px;
  margin: 0;
  left: auto;
  top: auto;
  transform: none;
}
#ltn_root .custom-switch .custom-control-label::after {
  grid-area: control;
  position: relative;
  justify-self: end;
  align-self: center;
  right: 0;
  left: auto;
  top: auto;
  width: 24px;
  height: 24px;
  margin: 0;
  transform: translateX(-20px);
}
#ltn_root .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(-2px);
}

#ltn_root .custom-switch.ltn_retired_option { display: none; }

#ltn_root .ltn_options_row .ltn_option_icon,
#ltn_root .ltn_options_row .ltn_option_icon_team,
#ltn_root .ltn_options_row .ltn_option_icon_join {
  background: var(--ltn_fill_strong);
  color: var(--ltn_text_secondary);
}
#ltn_root .ltn_options_row .ltn_option_on .ltn_option_icon {
  background: var(--ltn_fill_strong);
  color: var(--ltn_primary);
}

#ltn_root .modal-footer > .row { align-items: center; }
#ltn_root .modal-footer .form-group { margin-bottom: 0; }

#ltn_root .ltn_resize_v,
#ltn_root .ltn_resize_c {
  display: flex;
  align-items: center;
  justify-content: center;
}

#ltn_root .ltn_tight { margin-bottom: 8px; padding-bottom: 0; }

#ltn_root a.ltn_menu_item { text-decoration: none; }
#ltn_root a.ltn_menu_item:hover { text-decoration: none; color: var(--ltn_text); }

#ltn_root .ltn_notes_panel {
  min-height: 0;
  min-width: 0;
}

#ltn_root #ltn_notes {
  min-height: 0;
  max-height: 100%;
}

@media (min-width: 834px) {
  #ltn_root[data-ltn_notes="review"] .ltn_notes_panel,
  #ltn_root[data-ltn_notes="list"] .ltn_notes_panel {
    height: 100%;
    overflow: hidden;
  }
  #ltn_root[data-ltn_notes="review"] #ltn_notes,
  #ltn_root[data-ltn_notes="list"] #ltn_notes {
    height: 100%;
    overflow-y: auto;
  }
    #ltn_root[data-ltn_notes="review"] .ltn_notes_table,
  #ltn_root[data-ltn_notes="list"] .ltn_notes_table {
    min-height: 0;
    height: auto;
  }
}

/* ---------------------------------------------------------------------------
   Import: the file picker

   .custom-file is a Bootstrap 4 component and the import form is the only
   place left using it. Without the shim the real input renders on top of the
   label it is supposed to hide, so both are visible at once. Same approach as
   the other legacy controls above: keep the markup, restyle it to match.
   ------------------------------------------------------------------------ */

#ltn_root .custom-file {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
}
#ltn_root .custom-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
#ltn_root .custom-file-label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--ltn_separator);
  border-radius: var(--ltn_r_field);
  background: var(--ltn_bg);
  color: var(--ltn_text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
#ltn_root .custom-file-input:hover ~ .custom-file-label { background: var(--ltn_fill); }
#ltn_root .custom-file-input:focus-visible ~ .custom-file-label {
  border-color: var(--ltn_active);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ltn_active) 22%, transparent);
}

/* Quick start presets in the create form. A row of chips that wraps rather
   than overflowing on a narrow modal. */
#ltn_root .ltn_quick_starts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
#ltn_root .ltn_quick_starts .btn { flex: 0 0 auto; width: auto; }

/* ===========================================================================
   Phone layout

   Below 600px the two-column shell has nowhere to go, so the app becomes one
   plain column and the page scrolls: timecode, note form, tags, buttons,
   notes. 600px rather than the 833px used for "compact", because 833 also
   catches an iPad in portrait, which has room for the normal shell.

   Keyed off .ltn_phone, set from JS, so the stylesheet and the behaviour that
   goes with it (one layout, no bottom sheet) can never disagree.
   ======================================================================== */

@media (max-width: 600px) {

  /* The shell normally fills the viewport and scrolls each panel on its own.
     Stacked into one column that no longer works, so the whole column scrolls
     instead.

     The root stays pinned. It is what covers the page underneath, and letting
     it fall back into normal flow put the app in among the site's own
     content. So the overlay is kept and made the scroller: fixed to the
     viewport, with everything inside it free to grow past that height. */
  html.ltn_fullscreen #ltn_root.ltn_phone {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #ltn_root.ltn_phone .ltn_panel {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  /* The toolbar would scroll away with everything else, taking the menu with
     it, so it stays at the top of the scrolling column. */
  #ltn_root.ltn_phone .ltn_toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
  }

  #ltn_root.ltn_phone .ltn_stage {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: visible;
    gap: 14px;
  }

  /* The markup puts the notes above the work area, which is right on a
     desktop. Here they belong last, after the things used to create one. */
  #ltn_root.ltn_phone .ltn_timer_panel { order: 1; }
  #ltn_root.ltn_phone .ltn_work_panel  { order: 2; }
  #ltn_root.ltn_phone .ltn_notes_panel { order: 3; }

  /* Nothing to drag when everything is stacked. */
  #ltn_root.ltn_phone .ltn_resize_v,
  #ltn_root.ltn_phone .ltn_resize_c { display: none !important; }

  #ltn_root.ltn_phone .ltn_timer_panel,
  #ltn_root.ltn_phone .ltn_work_panel,
  #ltn_root.ltn_phone .ltn_notes_panel {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  /* Form, tags, buttons, actions: one column, in that order. */
  #ltn_root.ltn_phone .ltn_work {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: auto;
  }
  #ltn_root.ltn_phone .ltn_work > .ltn_input_panel { order: 1; }
  #ltn_root.ltn_phone .ltn_work_col_tags           { order: 2; }
  #ltn_root.ltn_phone .ltn_work_col_pads           { order: 3; }
  #ltn_root.ltn_phone .ltn_actions                 { order: 4; }

  /* The note form is part of the page here, not a sheet that slides up, so
     everything the sheet needs is undone. */
  #ltn_root.ltn_phone .ltn_input_panel {
    position: static;
    transform: none;
    max-height: none;
    box-shadow: none;
    border-radius: var(--ltn_r_sheet);
    padding: 14px;
    z-index: auto;
  }
  #ltn_root.ltn_phone .ltn_sheet_head,
  #ltn_root.ltn_phone .ltn_sheet_scrim,
  #ltn_root.ltn_phone .ltn_action_primary { display: none !important; }

  /* Tags, without the controls that manage them: on a phone this is a set to
     pick from, and adding or clearing belongs on a bigger screen. */
  #ltn_root.ltn_phone .ltn_tagbar,
  #ltn_root.ltn_phone .ltn_area_tags .ltn_add_more { display: none !important; }

  /* Switching layout is not offered, because there is only one. */
  #ltn_root.ltn_phone #ltn_notes_toggle,
  #ltn_root.ltn_phone #ltn_menu_view,
  #ltn_root.ltn_phone .ltn_menu_row:has(#ltn_menu_view) { display: none !important; }

  #ltn_root.ltn_phone .ltn_area {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  /* The list grows with the notes rather than scrolling inside a box; the
     page is the scroller now. */
  #ltn_root.ltn_phone .ltn_notes_panel,
  #ltn_root.ltn_phone #ltn_notes,
  #ltn_root.ltn_phone .ltn_notes_table {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }
  #ltn_root.ltn_phone .ltn_notes_panel { padding-bottom: env(safe-area-inset-bottom); }
}

/* The two "Reset to ..." buttons in Timecode Settings, side by side and even.
   A grid rather than two columns, so they stay equal whatever the labels say,
   and drop to one per row when there is not enough width for both. */
#ltn_root .ltn_tc_reset_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#ltn_root .ltn_tc_reset_row .btn { width: 100%; margin: 0; }

@media (max-width: 420px) {
  #ltn_root .ltn_tc_reset_row { grid-template-columns: 1fr; }
}