/*!
 * 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;
}
/* Only reached before the script lifts the name out of the comment cell, and
   only for a row it has not got to yet. Same weight either way. */
#ltn_root #marker_table td:nth-child(3) strong {
  font-weight: 400;
  font-size: 14px;
}

/* The marker name. It is written inside the note cell, in front of the comment
   and separated from it by a <br>, which is fine while the two sit on top of
   each other but leaves the name unable to go anywhere else. The script lifts
   it into a cell of its own so grid can place it, and that cell is what the
   "name" area below refers to. A note without a name has no such cell and the
   row is one area short, which grid is content with. */
#ltn_root #marker_table td.ltn_name {
  grid-area: name;
  min-width: 0;
  font-weight: 400;
  font-size: 14px;
  /* A name is one unbroken run of characters as often as not, and it used to
     inherit this from the comment cell it lived in. Without it a long name
     runs past the edge of the row instead of turning onto a second line. The
     timeline overrides it back to one clipped line, where there is no second
     line to turn onto. */
  overflow-wrap: anywhere;
}
#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;
  /* .btn-app arrives from AdminLTE carrying margin: 0 0 10px 10px. Every other
     property of that rule is overridden above; the margin never was, so the
     button has been standing on 10px of space it does not own. */
  margin: 0;
  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; }
/* Three lines: the name beside the colour dot, then the timecode with whoever
   logged it, then the comment. The timecode spans the first two columns so it
   starts under the dot; because the second of those is the flexible track it
   does not widen the dot column, which would push the name away from its dot. */
#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  name name"
    "tc   tc   meta"
    "tags tags tags"
    "body body body";
  row-gap: 4px;
  overflow: hidden;
}
/* One line, cut with an ellipsis: a long name must not push the comment out of
   a card this size. */
/* The name is written inside a <strong> by every one of the renderers, and a
   <strong> is bold by default whatever its cell says, so it is told here
   rather than in each of them. */
#ltn_root #marker_table td.ltn_name strong { font-weight: 400; }

#ltn_root[data-ltn_notes="timeline"] #marker_table td.ltn_name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The fourth cell is two different things. On a note you can edit it is the
   edit button, which belongs in the corner of the card; on someone else's note
   in a team project it is their name, which belongs beside the timecode. The
   two never appear together, so the row is laid out one way or the other
   rather than compromised into a single shape that suits neither.

   This is the button case. Chasing the button's height was the wrong approach:
   whatever it measures, it is still on the first line, and the first line still
   has to be as tall as the tallest thing on it. So it comes out of the flow
   altogether and is pinned to the corner, where it has no height to give. The
   row keeps exactly the shape it has on a note you cannot edit, and the
   timecode sits on the same line in both.

   With its placement left at auto, an absolutely positioned grid child is
   positioned against the padding box of the row rather than against a grid
   area, which is what puts it in the card's own corner. */
#ltn_root[data-ltn_notes="timeline"] #marker_table tr:has(td:nth-child(4) .btn-app) {
  position: relative;
}
#ltn_root[data-ltn_notes="timeline"] #marker_table tr:has(td:nth-child(4) .btn-app) td:nth-child(4) {
  position: absolute;
  grid-area: auto;
  top: 8px;
  right: 8px;
  display: block;
  line-height: 0;
  z-index: 1;
}
/* The name now runs the full width of the card, so it is held short of the
   corner and cut with its ellipsis before it reaches the button. */
#ltn_root[data-ltn_notes="timeline"] #marker_table tr:has(td:nth-child(4) .btn-app) td.ltn_name {
  padding-right: 22px;
}
/* Small, and with the glyph brought down with it: it is set to 16px further up
   and would otherwise fill the button from the inside. */
#ltn_root[data-ltn_notes="timeline"] #marker_table .btn-app {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 0;
  width: 20px;
  height: 18px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1;
}
#ltn_root[data-ltn_notes="timeline"] #marker_table .btn-app i {
  font-size: 12px;
  line-height: 1;
  margin: 0;
}
#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; }
/* The list reads as it did: the name above the comment in the same column. It
   only needs an area of its own now that the name is a separate cell. */
#ltn_root[data-ltn_notes="list"] #marker_table tr {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas:
    "tc dot name meta"
    "tc dot body meta"
    "tc dot tags 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;
}

/* "Tags" over a row of tags and "Buttons" over a row of buttons is a line of
   text saying what is plainly underneath it. The space is worth more than the
   heading while logging. Review keeps its headings: there the panel is a set of
   filters rather than the things themselves. */
#ltn_root[data-ltn_notes="timeline"] .ltn_area_label,
#ltn_root[data-ltn_notes="list"] .ltn_area_label { display: none; }


/* Four to a row was fixed, so a column that only had room for three left a
   quarter of itself empty on the right. As many as fit, each an equal share of
   what there is: auto-fit collapses the tracks that are not needed and the rest
   stretch to take up the slack. */
#ltn_root .ltn_pads,
#ltn_root .btn-quickbuttons,
#ltn_root .ltn_pads_event,
#ltn_root .btn-quickbuttons_event {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 10px;
  margin: 0;
}
#ltn_root .ltn_pads > div,
#ltn_root .btn-quickbuttons > div,
#ltn_root .ltn_pads_event > div ,
#ltn_root .btn-quickbuttons_event > div {
  display: block;
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
}

/* One grid for the project's buttons, this browser's buttons and the Add
   button, so Add sits in the next free slot after the last of them with the
   same gap between, rather than starting a line of its own.

   The two rows keep their classes for the sake of everything that finds them by
   name; display:contents takes them out of the layout and hands their cells to
   this grid. */
#ltn_root .ltn_pads_flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 10px;
}
/* !important because the app calls .show() and .hide() on these rows, and
   jQuery writes the result inline: an inline display:block would take the row
   back out of the grid and put the Add button on a line of its own again. */
#ltn_root .ltn_pads_flow > .ltn_pads,
#ltn_root .ltn_pads_flow > .ltn_pads_event {
  display: contents !important;
}

/* A group heading is a label over the buttons under it, so it takes the whole
   row rather than a slot of its own. */
#ltn_root .ltn_pads_flow .et-group-separator {
  grid-column: 1 / -1;
  margin: 4px 0 0;
}

/* The empty row a project with no buttons of its own leaves behind would still
   claim a gap in the grid. */
#ltn_root .ltn_pads_flow > .ltn_pads:empty,
#ltn_root .ltn_pads_flow > .ltn_pads_event:empty { display: none !important; }
#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,
  #ltn_root .ltn_pads_event,
  #ltn_root .ltn_pads_flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  #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,
  #ltn_root .ltn_pads_event,
  #ltn_root .ltn_pads_flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@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; }
}

/* The floor a button needs before the text is unreadable. On the track rather
   than the cell: a grid sizes its tracks and then fits the cell to them, so a
   min-width on the cell would be read after the decision that matters. */
#ltn_root .ltn_pads,
#ltn_root .btn-quickbuttons,
#ltn_root .ltn_pads_event,
#ltn_root .btn-quickbuttons_event {
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
}

#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 tags"
      "input hi pads"
      "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);
}

/* Only once it is late. A note is drawn the moment it is written and is marked
   quiet until the queue has had a couple of seconds to send it; the script
   takes that class off if it is still waiting. Without the :not() the row was
   painted as unsynced from the first frame and then turned into an ordinary
   note when it landed, which read as a fault rather than as a note being
   logged. The flag beside the timecode arrives at the same moment. */
#ltn_root #marker_table tr.ltn_pending:not(.ltn_pending_quiet) {
  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;
}

/* These three used to sit on the end of something and were squared to meet it.
   They stand on their own now, so they keep all four corners. An id beats the
   ltn_btn_rounded class whatever either of them says about importance, which is
   why adding that class alone left them square. */
#ltn_root #add_new_event_tag,
#ltn_root #add_new_comment_button,
#ltn_root #add_new_event_button {
  border-radius: var(--ltn_r_field) !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_loggerchip,
#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_loggerchip:hover,
#ltn_root .ltn_tagchip:hover { background: var(--ltn_fill); }
#ltn_root .ltn_loggerchip.ltn_on,
#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 name meta"
    "tc dot body meta"
    "tc dot tags 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; }
}

/* =============================================================================
   Switch Project

   A list of rows rather than the card grid the projects page uses: this one is
   read inside a modal, in the middle of a session, and the useful thing is to
   find a name quickly and get back to logging.
   ========================================================================== */

#ltn_switch_project_modal .ltn_projects_list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 52vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#ltn_switch_project_modal .ltn_project_row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 12px;
  padding: 10px 12px;
  border-radius: var(--ltn_r_card, 10px);
  background: var(--ltn_bg_elevated);
  color: var(--ltn_text);
  text-decoration: none;
}
#ltn_switch_project_modal a.ltn_project_row:hover {
  background: var(--ltn_fill);
  color: var(--ltn_text);
  text-decoration: none;
}
/* The one you are already in: shown so the list is not a puzzle, but not a
   link to where you already are. */
#ltn_switch_project_modal .ltn_project_row_current {
  border: 1px solid color-mix(in srgb, var(--ltn_primary) 55%, transparent);
  cursor: default;
}

#ltn_switch_project_modal .ltn_project_dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}
#ltn_switch_project_modal .ltn_project_body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#ltn_switch_project_modal .ltn_project_name {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ltn_switch_project_modal .ltn_project_meta {
  font-size: 12px;
  color: var(--ltn_text_secondary);
  font-variant-numeric: tabular-nums;
}
#ltn_switch_project_modal .ltn_project_tail {
  font-size: 12px;
  color: var(--ltn_text_tertiary);
  white-space: nowrap;
}
#ltn_switch_project_modal .ltn_switch_empty {
  padding: 22px 12px;
  text-align: center;
  color: var(--ltn_text_tertiary);
  font-size: 14px;
}

/* =============================================================================
   Offline bar

   Sits between the toolbar and the stage, in the amber the pending rows and the
   sync badge already use, so the three read as one state rather than three
   warnings. Not red: nothing has been lost, and red would say it had.
   ========================================================================== */

#ltn_root .ltn_offline_bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 0.5px solid var(--ltn_separator);
  background: color-mix(in srgb, #ff9f0a 14%, var(--ltn_bg));
  color: var(--ltn_text);
  font-size: 13px;
  line-height: 1.4;
}
/* The utility class is #ltn_root .display-none, which is exactly as specific as
   the rule above and appears earlier in the file, so on its own it loses and
   the bar is shown from page load whatever the script says. Same reason
   .ltn_menu_row carries its own copy of this line. */
#ltn_root .ltn_offline_bar.display-none { display: none; }
#ltn_root .ltn_offline_bar > .fa-exclamation-triangle {
  flex: 0 0 auto;
  color: #ff9f0a;
  font-size: 14px;
}
#ltn_root .ltn_offline_text { flex: 1 1 auto; min-width: 0; }

#ltn_root .ltn_offline_retry {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, #ff9f0a 26%, transparent);
  color: var(--ltn_text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
#ltn_root .ltn_offline_retry:hover {
  background: color-mix(in srgb, #ff9f0a 38%, transparent);
  color: var(--ltn_text);
}
#ltn_root .ltn_offline_retry:disabled { opacity: 0.6; }
/* The spin says a try is in flight; the bar going away says it worked. */
#ltn_root .ltn_offline_bar.ltn_offline_trying .fa-sync-alt {
  animation: ltn_spin 0.9s linear infinite;
}

/* On a phone the sentence is the thing worth keeping; the button moves under
   it rather than squeezing it into a column two words wide. */
@media (max-width: 575.98px) {
  #ltn_root .ltn_offline_bar {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  #ltn_root .ltn_offline_text { flex: 1 1 100%; order: 2; }
  #ltn_root .ltn_offline_retry { order: 3; margin-left: auto; }
}

/* =============================================================================
   Alerts

   A panel rather than a browser dialog. window.alert stops every timer on the
   page, including the timecode readout and the poll, which on a machine running
   a shoot is the most damaging thing a warning could do. This says the same
   thing and stops nothing.
   ========================================================================== */

#ltn_root .ltn_alert_backdrop {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
}
/* Same trap as the offline bar: the utility class is no more specific than the
   rule above and comes earlier, so it needs saying here. */
#ltn_root .ltn_alert_backdrop.display-none { display: none; }

#ltn_root .ltn_alert_panel {
  width: 100%;
  max-width: 420px;
  padding: 22px;
  border-radius: var(--ltn_r_card, 12px);
  background: var(--ltn_bg_elevated);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  text-align: center;
}
#ltn_root .ltn_alert_msg {
  margin-bottom: 18px;
  color: var(--ltn_text);
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
#ltn_root .ltn_alert_ok {
  min-width: 120px;
  height: 38px;
  border: 0;
  border-radius: 9px;
}

/* =============================================================================
   Owner-only entries

   Two classes and the id, so this beats the display the toolbar buttons and the
   menu rows are given elsewhere whatever the order in the file. The same trap
   the offline bar and the alert panel fell into.
   ========================================================================== */

#ltn_root .ltn_tbtn.ltn_owner_hidden,
#ltn_root .ltn_menu_row.ltn_owner_hidden,
#ltn_root .ltn_owner_gate.ltn_owner_hidden { display: none; }

/* =============================================================================
   Note tags

   Chips under the comment, in the same rounded shape the tag buttons use, so a
   tag reads as the same object wherever it appears. Quiet by default: they are
   labels on the note, not the note.
   ========================================================================== */

#ltn_root .ltn_note_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* The chips' own cell, so the comment's line clamp cannot reach them. */
#ltn_root #marker_table td.ltn_tags_cell {
  grid-area: tags;
  min-width: 0;
  /* In the timeline the chips sit between the timecode and the comment, so the
     gap they need is under them. */
  padding-bottom: 6px;
}

/* The list and review read as one line per note with the comment last, and
   chips wedged above it break that line up. There they go underneath, and the
   gap goes with them. */
#ltn_root[data-ltn_notes="list"] #marker_table td.ltn_tags_cell,
#ltn_root[data-ltn_notes="review"] #marker_table td.ltn_tags_cell {
  padding-top: 6px;
  padding-bottom: 0;
}
#ltn_root #marker_table td.ltn_tags_cell:empty { display: none; }
#ltn_root .ltn_note_tag {
  display: inline-block;
  max-width: 100%;
  padding: 1px 8px;
  border: 1px solid var(--ltn_separator);
  border-radius: 999px;
  background: var(--ltn_fill);
  color: var(--ltn_text_secondary);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* No clamp of their own: the chips sit in their own cell now, outside the
   comment's line clamp, which is what was cutting them. */
#ltn_root[data-ltn_notes="timeline"] #marker_table td.ltn_tags_cell {
  padding-bottom: 4px;
}

/* =============================================================================
   Switch Layout, selected option

   The ring around the chosen option is enough to say which one it is. Colouring
   the icon and the title as well made the selected card read as a different
   kind of thing rather than as the same card, chosen. Scoped to this modal:
   the other choosers built on .ltn_options_row keep their own look.
   ========================================================================== */

#ltn_help_modal .ltn_help_body h4 {
  margin-top: 22px;
  font-size: 15px;
  font-weight: 600;
}
#ltn_help_modal .ltn_help_body h4:first-child { margin-top: 0; }
#ltn_help_modal .ltn_help_body p,
#ltn_help_modal .ltn_help_body li {
  color: var(--ltn_text_secondary);
  font-size: 14px;
  line-height: 1.5;
}
#ltn_help_modal .ltn_help_body ul { padding-left: 20px; }
/* The script leaves these out when it copies the block in; kept as a second
   line in case the page below the app grows something else picture-shaped. */
#ltn_help_modal .ltn_help_body br { display: none; }
#ltn_help_modal .ltn_help_body img,
#ltn_help_modal .ltn_help_body .content-img { display: none; }

#ltn_layout_modal .ltn_option_on {
  background: var(--ltn_bg_elevated);
}
#ltn_layout_modal .ltn_option_on .ltn_option_name {
  color: var(--ltn_text);
}
#ltn_layout_modal .ltn_options_row .ltn_option_on .ltn_option_icon {
  color: var(--ltn_text_secondary);
}

/* =============================================================================
   Switch Project, the offline session

   Sits above the account's projects, separated by a rule, because it is not one
   of them: it belongs to this browser and is always there. Its dot is grey
   rather than a project colour, since it has none to carry.
   ========================================================================== */

#ltn_switch_project_modal .ltn_switch_local {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--ltn_separator);
}
#ltn_switch_project_modal .ltn_project_dot_local {
  background: var(--ltn_text_tertiary);
}

/* Add new tag stands on its own rather than against a field, so it keeps all
   four corners. */
#ltn_root .ltn_btn_rounded { border-radius: var(--ltn_r_field) !important; }

/* Load tags sits on the end of the preset select and takes b-only-r to square
   the two corners it shares with it. Said again for buttons specifically: .btn
   sets its own radius further down the file, and while b-only-r carries an
   !important that should settle it, a shorthand carrying both a var() and an
   !important is the sort of thing that resolves differently in different
   places. Two classes and the id leaves nothing to argue about. */
#ltn_root .btn.b-only-r {
  border-radius: 0 var(--ltn_r_field) var(--ltn_r_field) 0 !important;
}

/* =============================================================================
   Review, filter by logger

   The same chip as a tag, with a person on it. A name is a name rather than a
   label someone chose, so it gets no colour of its own.
   ========================================================================== */

#ltn_root .ltn_loggerchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#ltn_root .ltn_loggerchip .fa-user {
  font-size: 10px;
  opacity: 0.75;
}
#ltn_root .ltn_loggerchip span {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  white-space: nowrap;
}

/* =============================================================================
   Add button, in the buttons panel

   The same box as the pads beside it: one column wide, the pad height, the pad
   radius. It keeps the dashed outline and the quiet colour, because it adds a
   button rather than being one, but it no longer sits among them as a pill of
   a different size.
   ========================================================================== */



#ltn_root .ltn_add_more_pad {
  align-self: auto;
  justify-content: center;
  width: 100%;
  height: var(--ltn_pad_h);
  margin-top: 0;
  padding: 10px;
  /* 12px, not var(--ltn_r_pad). The pad rule asks for the variable, which is
     10px, but a pad also carries .btn and that rule sets 12px further down the
     file at the same weight, so 12 is what a pad actually renders at. Matching
     the rule rather than the result would leave this two pixels rounder than
     everything beside it. */
  border-radius: 12px;
  /* No font of its own: it takes the 13px normal weight .ltn_add_more sets, the
     same as Add tag. It is the pad's box that had to match, not its lettering -
     this adds a button rather than being one. */
}


/* =============================================================================
   Repeat last comment, in a narrow column

   The actions row sits under the buttons and is exactly as wide as they are, so
   when that column is narrow the label runs out of room before the button does.
   Rather than let it wrap or squash, the label goes and the icon stands for it.
   The title and aria-label are on the button already, so it keeps its name for
   anyone hovering or listening.

   A container query rather than a media query: the column is resizable by hand
   and sits in different places in each layout, so the width of the window says
   nothing useful about it.
   ========================================================================== */

#ltn_root .ltn_actions {
  container-type: inline-size;
  container-name: ltn_actions;
}

@container ltn_actions (max-width: 340px) {
  #ltn_root .ltn_action_repeat span { display: none; }
  #ltn_root .ltn_action_repeat {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 14px;
    gap: 0;
  }
}

/* =============================================================================
   Add button and Add tag: only when there is nothing there

   Both are a way in when the panel is empty, not a permanent fixture. Once a
   project has buttons or tags, the way to change them is the menu, and a
   dashed slot sitting among real ones is a button nobody means to press.

   Said in CSS rather than in script, so it answers the moment the poll writes a
   button in or the last one is taken out, with nothing to keep in step.

   !important because syncOwnerControls shows and hides these with jQuery, which
   writes the result inline, and an inline display would otherwise put an Add
   button back among a full set. */
#ltn_root .ltn_pads_flow:has(.ltn_pad, .btn-quickbutton) > .ltn_add_more_cell {
  display: none !important;
}

#ltn_root .ltn_area_tags:has(.btn-tag) > .ltn_add_more {
  display: none !important;
}