/* =====================================================================================================
   2. NEW FOR LABELJOY - must be added to the site before publishing
   ===================================================================================================== */

/*  2026-09-23 - Claude Code - Modified: rewritten as the new version's own look. Andrea: "let's give it a
    different style, one that clearly states: This is the new version of Labeljoy. Take colors, fonts and
    other elements from the project's html." (docs/online-help.md #42)

    Taken from the application's hybrid UI (LJXMaui/Resources/Raw/html/assets/css):
      - the font: Bootstrap 5's system stack, as the whole UI uses it (common.css, bootstrap.css);
      - the colours: the brand orange #eb7e14 with its hover shade (common.css :root), and Bootstrap's
        body, muted, border and subtle-background greys;
      - the elements:
          panel titles, light and upper case (tools.css .tool-title)       -> the page title
          section titles, semibold and faded (tools.css .section-title)    -> "See also", table headings
          the active document tab, an orange tint and border (common.css)  -> the current menu item
          the home screen's tiles, bordered, orange and lifted on hover    -> the "See also" links
          (home.css .home-tile)
          the orange focus ring of the assistant's field (home.css)        -> the search box
    No icon font: the site does not load Font Awesome, and #5 rules out depending on it.

    Every rule is scoped under .ljx-help, and the page rules under #help-guide.ljx-help as well: that beats
    the Labeljoy 6 rules of part 1 (#help-guide .title and the rest) on specificity, whatever the load
    order, so part 1 can stay on the site untouched for the Labeljoy 6 pages. The menu rules are scoped
    #ljx-help-menu: the theme's sidebar rules chain up to five classes (.sidebar ul.menu ul.sub-menu
    li.menu-item), and an id outranks any number of classes without resorting to !important. */

.ljx-help {
  --ljx-orange: #eb7e14;
  --ljx-orange-rgb: 235, 126, 20;
  --ljx-orange-hover: #ca6510;
  --ljx-body: #212529;
  --ljx-muted: #6c757d;
  --ljx-border: #dee2e6;
  --ljx-subtle: #f8f9fa;
  --ljx-radius: .375rem;
  --ljx-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --ljx-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-family: var(--ljx-font);
  color: var(--ljx-body);
}

/* --- the page ---------------------------------------------------------------------------------------- */

#help-guide.ljx-help {
  font-size: 16px;
  line-height: 1.6;
}

/* The band at the top of every page: the new version, said in words and in the app's colour. */
#help-guide.ljx-help .ljx-help-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px 0;
  padding: 8px 14px;
  border: 1px solid rgba(var(--ljx-orange-rgb), .35);
  border-radius: var(--ljx-radius);
  background: rgba(var(--ljx-orange-rgb), .08);
}
#help-guide.ljx-help .ljx-help-brand-name {
  font-weight: 600;
  font-size: 1.05em;
  letter-spacing: .01em;
}
#help-guide.ljx-help .ljx-help-brand-tag {
  padding: 1px 10px;
  border-radius: 50rem;
  background: var(--ljx-orange);
  color: #fff;
  font-size: .72em;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* The title: a panel title of the app - light, upper case - with a short orange rule under it. */
#help-guide.ljx-help .title {
  color: var(--ljx-body);
  font-family: var(--ljx-font);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 20px 0;
  padding: 0;
  border: 0;
}
#help-guide.ljx-help .title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--ljx-orange);
}

#help-guide.ljx-help p {
  margin: 0 0 1em 0;
}
#help-guide.ljx-help a {
  color: var(--ljx-orange);
  text-decoration: none;
}
#help-guide.ljx-help a:hover {
  color: var(--ljx-orange-hover);
  text-decoration: underline;
}
#help-guide.ljx-help ul {
  margin: 0 0 1em 1.4em;
}
#help-guide.ljx-help h2 {
  margin: 1.6em 0 .6em 0;
  color: var(--ljx-body);
  font-size: 1.2rem;
  font-weight: 600;
  opacity: .7;
}

/* A note: a subtle card with the brand colour down its edge. */
#help-guide.ljx-help .note {
  margin: 18px 0;
  padding: 12px 16px;
  border: 1px solid var(--ljx-border);
  border-left: 4px solid var(--ljx-orange);
  border-radius: var(--ljx-radius);
  background: var(--ljx-subtle);
  font-size: .95em;
}

/* Reference tables: a card, its heading a section title. */
#help-guide.ljx-help .cmd-table {
  border: 1px solid var(--ljx-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: .5rem;
  box-shadow: none;
  background: #fff;
  margin-bottom: 24px;
}
#help-guide.ljx-help .cmd-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--ljx-border);
  font-size: .92em;
  vertical-align: top;
}
#help-guide.ljx-help .cmd-table tr:last-child td {
  border-bottom: 0;
}
#help-guide.ljx-help .cmd-table td.cmd-table-title {
  padding: 8px 14px;
  background: var(--ljx-subtle);
  color: var(--ljx-muted);
  font-size: .78em;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: .5rem .5rem 0 0;
}
#help-guide.ljx-help .field-label {
  width: 170px;
  background: transparent;
  color: var(--ljx-body);
  font-weight: 600;
}
#help-guide.ljx-help .code-block {
  padding: 1px 6px;
  border-radius: .25rem;
  background: rgba(0, 0, 0, .06);
  color: var(--ljx-body);
  font-family: var(--ljx-mono);
  font-size: .9em;
}

/* "See also" - #29, #35, #39: the home screen's tiles. */
#help-guide.ljx-help .ljx-see-also {
  margin-top: 36px;
}
#help-guide.ljx-help .ljx-see-also-title {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  font-weight: 600;
  opacity: .7;
}
#help-guide.ljx-help .ljx-see-also ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#help-guide.ljx-help .ljx-see-also li {
  margin: 0;
}
#help-guide.ljx-help .ljx-see-also a {
  display: block;
  padding: 10px 16px;
  border: 1px solid var(--ljx-border);
  border-radius: .5rem;
  background: #fff;
  color: var(--ljx-body);
  transition: border-color .15s ease-in-out, transform .15s ease-in-out;
}
#help-guide.ljx-help .ljx-see-also a:hover {
  border-color: var(--ljx-orange);
  color: var(--ljx-body);
  text-decoration: none;
  transform: translateY(-2px);
}

/* Image placeholder - #41. Where a screenshot is still to be made: what it must show, and its file
   name. Replaced by the image itself once the file exists, so none should be left at publishing. */
#help-guide.ljx-help .ljx-image-needed {
  margin: 18px 0;
  padding: 14px 18px;
  border: 2px dashed rgba(var(--ljx-orange-rgb), .6);
  border-radius: .5rem;
  background: rgba(var(--ljx-orange-rgb), .05);
}
#help-guide.ljx-help .ljx-image-needed-label {
  margin: 0 0 4px 0;
  color: var(--ljx-orange-hover);
  font-size: .78em;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#help-guide.ljx-help .ljx-image-needed-file {
  margin-left: 6px;
  color: var(--ljx-body);
  font-family: var(--ljx-mono);
  letter-spacing: 0;
  text-transform: none;
}
#help-guide.ljx-help .ljx-image-needed-text {
  margin: 0;
  color: var(--ljx-body);
  font-size: .92em;
}

/* An icon shot from the interface, standing in for a word - in a table's first column, for example (Andrea,
   2026-09-25: "unify them, both with an icon"). Inline and borderless, at the size the builder gives it, which
   is the icon's own size on a 100% screen. The img carries no class of its own because the builder sizes only
   an img without one, so the class is on a span round it. */
#help-guide.ljx-help .ljx-icon img {
  margin: 0;
  vertical-align: middle;
}

/* Screenshots - docs/help-automation.md. A picture never runs wider than the page. The builder gives each
   automated one its size in CSS pixels - the capture's pixels divided by its render scale - so a 1.5x crop is
   shown at the size the interface has on a 100% screen, and stays sharp on a high-DPI one. The hairline
   border keeps a light-theme panel from dissolving into the white page. */
#help-guide.ljx-help .images img {
  max-width: 100%;
  height: auto;
  margin-bottom: 0;
  /* Centred. The site has "div#help-guide p > img { display: block }" (part 1), which makes the picture a block,
     and then the .images rule's "text-align: center" has nothing to centre: the pictures sat at the left. A block
     centres with auto margins. Found on the live page, 2026-10-12. Icons (.ljx-icon) are not .images. */
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: .35rem;
}

/* A CROP THAT CUT THROUGH AN EDGE fades out along it, so the reader can see the picture goes on - Andrea's
   "fade to white". A mask to transparent rather than a white overlay: it fades the hairline border with the
   picture, and it fades into whatever is behind the page. The builder adds the class from the recipe's
   "fade" (Shoot.cs). The last 100px fade; a picture shorter than that fades over its whole length. */
#help-guide.ljx-help .images img.ljx-fade-bottom {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), transparent);
}
#help-guide.ljx-help .images img.ljx-fade-top {
  -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 100px), transparent);
  mask-image: linear-gradient(to top, #000 calc(100% - 100px), transparent);
}
#help-guide.ljx-help .images img.ljx-fade-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 100px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 100px), transparent);
}
#help-guide.ljx-help .images img.ljx-fade-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 100px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 100px), transparent);
}

/* 2026-10-02 - VARIANTS SIDE BY SIDE - a symbology's versions that look different (EAN 8, an add-on, a composite
   part, bearer bars): two pictures a row, each with its caption under it in the .images style, as the Labeljoy 6
   pages laid them out. On a narrow screen the pictures shrink with their cells (max-width above). */
#help-guide.ljx-help table.ljx-variants {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
}
#help-guide.ljx-help table.ljx-variants td {
  width: 50%;
  padding: 4px 6px 10px;
  vertical-align: top;
  border: 0;
}

/* --- the left menu - #31, #34 - and its search box - #30, #36 ---------------------------------------- */

#ljx-help-menu.ljx-help {
  font-size: 15px;
  line-height: 1.4;
}
#ljx-help-menu.ljx-help .ljx-help-search {
  margin-bottom: 14px;
}
#ljx-help-menu.ljx-help .ljx-help-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 12px;
  border: 1px solid var(--ljx-border);
  border-radius: var(--ljx-radius);
  background: #fff;
  color: var(--ljx-body);
  font-family: var(--ljx-font);
  font-size: 15px;
}
#ljx-help-menu.ljx-help .ljx-help-search input:focus {
  outline: 0;
  border-color: rgba(var(--ljx-orange-rgb), .6);
  box-shadow: 0 0 0 .25rem rgba(var(--ljx-orange-rgb), .25);
}
/* 2026-10-12 - THE CLEAR BUTTON STAYS: whenever there is text it is shown, and clicking it clears the text and the
   results. Chrome and Edge faded their own out unless the pointer was over the field.
   2026-10-28 - and it is OURS now (help.js), in every browser: Firefox draws none on a search field, so the native
   one is hidden where it exists and help.js adds a button that looks the same everywhere (open-issues 77). */
#ljx-help-menu.ljx-help .ljx-help-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
#ljx-help-menu.ljx-help .ljx-help-search-field {
  position: relative;
  display: block;
}
#ljx-help-menu.ljx-help .ljx-help-search-field input {
  padding-right: 34px;
}
#ljx-help-menu.ljx-help .ljx-help-search-clear {
  display: none;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ljx-body);
  opacity: .55;
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
}
#ljx-help-menu.ljx-help .ljx-help-search-field.ljx-has-text .ljx-help-search-clear {
  display: block;
}
#ljx-help-menu.ljx-help .ljx-help-search-clear:hover {
  opacity: 1;
  background: rgba(var(--ljx-orange-rgb), .15);
}

/* The lists: the theme's markers, separators and indents undone, then drawn the app's way. */
#ljx-help-menu.ljx-help ul.menu,
#ljx-help-menu.ljx-help ul.sub-menu,
#ljx-help-menu.ljx-help ul.ljx-help-search-results {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
#ljx-help-menu.ljx-help ul.sub-menu {
  margin: 2px 0 2px 14px;
  padding-left: 8px;
  border-left: 1px solid var(--ljx-border);
}
#ljx-help-menu.ljx-help li.menu-item,
#ljx-help-menu.ljx-help ul.ljx-help-search-results li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
#ljx-help-menu.ljx-help li::before,
#ljx-help-menu.ljx-help li > a::before {
  content: none !important;
  display: none !important;
}
#ljx-help-menu.ljx-help li.menu-item > a,
#ljx-help-menu.ljx-help ul.ljx-help-search-results li > a {
  display: block;
  padding: 6px 10px;
  border-left: 3px solid transparent;
  border-radius: var(--ljx-radius);
  color: var(--ljx-body);
  text-decoration: none;
  background-image: none;
}
#ljx-help-menu.ljx-help li.menu-item > a:hover,
#ljx-help-menu.ljx-help ul.ljx-help-search-results li > a:hover {
  background-color: rgba(0, 0, 0, .06);
}
/* The one !important in this part, and it is answering one: the site's Additional CSS has
   ".sidebar ul.menu li.current-menu-item > a { color: #cc4301 !important; text-decoration: underline
   !important; }", and only another !important can outrank it. The app marks its active tab with the tint
   and the border, and leaves the text alone. */
#ljx-help-menu.ljx-help li.current-menu-item > a {
  border-left-color: rgba(var(--ljx-orange-rgb), .6);
  background-color: rgba(var(--ljx-orange-rgb), .12);
  color: var(--ljx-body) !important;
  text-decoration: none !important;
  font-weight: 600;
}
#ljx-help-menu.ljx-help li.current-menu-ancestor > a {
  font-weight: 600;
}
/* A result is its link, and the kind of page follows the title INSIDE it, in the same flow. (2026-10-12: it was a
   second flex item beside the link, and a long title - "Demo, attivazione e Care+" - wrapped and left the label
   stuck to the right edge of the panel.) The label never breaks inside itself: it goes down as a unit. */
#ljx-help-menu.ljx-help .ljx-help-search-kind {
  color: var(--ljx-muted);
  font-size: .8em;
  white-space: nowrap;
}
#ljx-help-menu.ljx-help .ljx-help-search-results {
  margin-bottom: 12px;
}
#ljx-help-menu.ljx-help .ljx-help-search-none {
  padding: 6px 10px;
  color: var(--ljx-muted);
  font-style: italic;
}

/* 2026-10-12 - THE RESULTS ARE A PANEL OF THEIR OWN. A result used to be a row like a menu entry - same indent, same
   hover - with only the page kind in grey beside it, so what the search found looked like part of the menu.
   While there is something to show, help.js puts ljx-has-results on the list: a tinted box with a heading
   ("Results") and, under it, a small "Menu" label with a rule that says where the menu starts again (help.js
   makes the label from data-label-results and data-label-menu, which the builder writes in each language). */
#ljx-help-menu.ljx-help ul.ljx-help-search-results.ljx-has-results {
  /* 12px above: the box does not touch the field, and clears the field's 4px focus ring with room to spare */
  margin: 12px 0 14px;
  padding: 4px 0 6px;
  border: 1px solid rgba(var(--ljx-orange-rgb), .35);
  border-radius: var(--ljx-radius);
  background: rgba(var(--ljx-orange-rgb), .07);
}
#ljx-help-menu.ljx-help ul.ljx-help-search-results li.ljx-help-search-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 12px 2px;
  color: #8a4a07;
  font-size: .8em;
  letter-spacing: .02em;
}
#ljx-help-menu.ljx-help .ljx-help-search-menulabel {
  display: none;
}
#ljx-help-menu.ljx-help .ljx-help-search-menulabel.ljx-on {
  display: block;
  margin: 0 0 4px;
  padding: 10px 10px 0;
  border-top: 1px solid var(--ljx-border);
  color: var(--ljx-muted);
  font-size: .72em;
  letter-spacing: .06em;
  text-transform: uppercase;
}