:root {
  /* Colors */
  --lexxy-color-ink: oklch(20% 0 0);
  --lexxy-color-ink-medium: oklch(40% 0 0);
  --lexxy-color-ink-light: oklch(60% 0 0);
  --lexxy-color-ink-lighter: oklch(85% 0 0);
  --lexxy-color-ink-lightest: oklch(96% 0 0);
  --lexxy-color-ink-inverted: white;

  --lexxy-color-accent-dark: oklch(57% 0.19 260);
  --lexxy-color-accent-medium: oklch(75% 0.196 258);
  --lexxy-color-accent-light: oklch(88% 0.026 254);
  --lexxy-color-accent-lightest: oklch(92% 0.026 254);

  --lexxy-color-red: oklch(60% 0.15 27);
  --lexxy-color-green: oklch(60% 0.15 145);
  --lexxy-color-blue: oklch(66% 0.196 258);
  --lexxy-color-purple: oklch(60% 0.15 305);

  --lexxy-color-code-token-att: #d73a49;
  --lexxy-color-code-token-comment: #6a737d;
  --lexxy-color-code-token-function: #6f42c1;
  --lexxy-color-code-token-operator: #d73a49;
  --lexxy-color-code-token-property: #005cc5;
  --lexxy-color-code-token-punctuation: #24292e;
  --lexxy-color-code-token-selector: #22863a;
  --lexxy-color-code-token-variable: #e36209;

  --lexxy-color-canvas: var(--lexxy-color-ink-inverted);
  --lexxy-color-text: var(--lexxy-color-ink);
  --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
  --lexxy-color-link: var(--lexxy-color-accent-dark);
  --lexxy-color-selected: var(--lexxy-color-accent-lightest);
  --lexxy-color-selected-hover: var(--lexxy-color-accent-light);
  --lexxy-color-selected-dark: var(--lexxy-color-blue);
  --lexxy-color-selected-50: color-mix(in oklch, var(--lexxy-color-selected-dark) 50%, transparent);
  --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);

  /* Text color highlights */
  --highlight-1: rgb(136, 118, 38);
  --highlight-2: rgb(185, 94, 6);
  --highlight-3: rgb(207, 0, 0);
  --highlight-4: rgb(216, 28, 170);
  --highlight-5: rgb(144, 19, 254);
  --highlight-6: rgb(5, 98, 185);
  --highlight-7: rgb(17, 138, 15);
  --highlight-8: rgb(148, 82, 22);
  --highlight-9: rgb(102, 102, 102);

  --highlight-bg-1: rgba(229, 223, 6, 0.3);
  --highlight-bg-2: rgba(255, 185, 87, 0.3);
  --highlight-bg-3: rgba(255, 118, 118, 0.3); 
  --highlight-bg-4: rgba(248, 137, 216, 0.3);
  --highlight-bg-5: rgba(190, 165, 255, 0.3); 
  --highlight-bg-6: rgba(124, 192, 252, 0.3);
  --highlight-bg-7: rgba(140, 255, 129, 0.3); 
  --highlight-bg-8: rgba(221, 170, 123, 0.3);
  --highlight-bg-9: rgba(200, 200, 200, 0.3);

  /* Tables */
  --lexxy-color-table-header-bg: var(--lexxy-color-ink-lightest);
  --lexxy-color-table-cell-border: var(--lexxy-color-ink-lighter);
  --lexxy-color-table-cell-selected: var(--lexxy-color-selected);
  --lexxy-color-table-cell-selected-border: var(--lexxy-color-selected-dark);
  --lexxy-color-table-cell-selected-bg: var(--lexxy-color-accent-lightest);
  --lexxy-color-table-cell-add: var(--lexxy-color-selected-50);
  --lexxy-color-table-cell-toggle: var(--lexxy-color-accent-lightest);
  --lexxy-color-table-cell-remove: oklch(60% 0.15 27 / 0.1);
  --lexxy-table-cell-add-size: 4px;

  /* Typography */
  --lexxy-font-base: system-ui, sans-serif;
  --lexxy-font-mono: ui-monospace, "Menlo", "Monaco", Consolas, monospace;
  --lexxy-text-small: 0.875rem;
  --lexxy-content-margin: 1rem;

  /* Focus ring */
  --lexxy-focus-ring-color: var(--lexxy-color-accent-dark);
  --lexxy-focus-ring-offset: -2px;
  --lexxy-focus-ring-size: 2px;

  /* Misc */
  --lexxy-toolbar-button-size: 2lh;
  --lexxy-radius: 0.5ch;
  --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --lexxy-z-popup: 1000;
}
@import url(/assets/lexxy-variables-8c25c91ccd68390a9422380c5b0377575a2e742a442c2dd7ba620c57de5f4777.css);

/* Text styles
/* -------------------------------------------------------------------------- */

:where(.lexxy-content) {
  color: var(--lexxy-color-ink);

  h1, h2, h3, h4, h5, h6 {
    display: block;
    font-weight: bold;
    hyphens: auto;
    margin-block: 0 var(--lexxy-content-margin);
    overflow-wrap: break-word;

    @supports (text-wrap: balance) {
      text-wrap: balance;
    }
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1rem; }
  h5 { font-size: 0.875rem; }
  h6 { font-size: 0.75rem; }

  p,
  ul,
  ol,
  dl,
  blockquote,
  figure,
  .attachment,
  .attachment-gallery {
    margin-block: 0 var(--lexxy-content-margin);
    position: relative;

    &:not(lexxy-editor &) {
      overflow-wrap: break-word;

      @supports (text-wrap: pretty) {
        text-wrap: pretty;
      }
    }
  }

  .lexxy-content__italic {
    font-style: italic;
  }

  .lexxy-content__bold {
    font-weight: bold;
  }

  .lexxy-content__strikethrough {
    text-decoration: line-through;
  }

  .lexxy-content__underline {
    text-decoration: underline;
  }

  .lexxy-content__strikethrough.lexxy-content__underline {
    text-decoration: line-through underline;
  }

  mark,
  .lexxy-content__highlight {
    background-color: transparent;
    color: inherit;
  }

  blockquote {
    border-inline-start: 0.25em solid var(--lexxy-color-ink-lighter);
    font-style: italic;
    margin: var(--lexxy-content-margin) 0;
    padding: 0.5lh 2ch;

    p:last-child {
      margin-block-end: 0;
    }
  }

  p:empty {
    display: none;
  }

  a {
    color: var(--lexxy-color-link);
    text-decoration: underline;
  }

  img,
  video,
  embed,
  object {
    inline-size: auto;
    margin-inline: auto;
    max-block-size: 32rem;
    object-fit: contain;

    a:has(&) {
      display: inline-block;
    }
  }

  code, pre {
    background-color: var(--lexxy-color-ink-lightest);
    border-radius: var(--lexxy-radius);
    color: var(--lexxy-color-ink);
    font-family: var(--lexxy-font-mono);
    font-size: 0.9em;
    padding: 0.25ch 0.5ch;

    &:is(pre),
    &[data-language] {
      border-radius: var(--lexxy-radius);
      display: block;
      hyphens: none;
      margin-block: 0 var(--lexxy-content-margin);
      overflow-x: auto;
      overflow-wrap: break-word;
      padding: 1ch;
      tab-size: 2;
      white-space: pre;

      @supports (text-wrap: nowrap) {
        text-wrap: nowrap;
      }
    }
  }

  ol, ul:not(.lexxy-prompt-menu) {
    margin-inline-start: calc(var(--lexxy-content-margin) * 1.5);
    padding: 0;
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  li.lexxy-nested-listitem {
    list-style-type: none;

    ol, ul {
      margin-block-end: 0;
    }
  }

  hr {
    border: 0;
    border-block-end: 1px solid currentColor;
    inline-size: 20%;
    margin: calc(0.5em + var(--lexxy-content-margin)) 0;
  }

  .horizontal-divider {
    margin: 0;
    padding: calc(0.5em + var(--lexxy-content-margin)) 0;

    hr {
      margin: 0;
    }
  }

  *:has(+ .horizontal-divider) {
    margin-block-end: 0;
  }

  > :last-child {
    margin-block-end: 0;
  }

  /* Keywords and attributes */
  .code-token__attr,
  .token.attr-name,
  .token.atrule,
  .token.attr,
  .token.keyword {
    color: var(--lexxy-color-code-token-att);
  }

  /* Constants, booleans, numbers, properties, tags */
  .code-token__property,
  .token.boolean,
  .token.constant,
  .token.number,
  .token.property,
  .token.symbol,
  .token.tag {
    color: var(--lexxy-color-code-token-property);
  }

  /* Strings, selectors, and built-in constructs */
  .code-token__selector,
  .token.attr-value,
  .token.builtin,
  .token.char,
  .token.inserted,
  .token.line,
  .token.selector,
  .token.string {
    color: var(--lexxy-color-code-token-selector);
  }

  /* Comments and meta information */
  .code-token__comment,
  .token.cdata,
  .token.comment,
  .token.doctype,
  .token.prolog {
    color: var(--lexxy-color-code-token-comment);
    font-style: italic;
  }

  /* Operators and symbolic entities */
  .code-token__operator,
  .token.deleted,
  .token.entity,
  .token.operator,
  .token.url,
  code[data-language="diff"] .code-token__operator + .code-token__selector {
    color: var(--lexxy-color-code-token-operator);
  }

  /* Functions and class names */
  .code-token__function,
  .token.class,
  .token.class-name,
  .token.function {
    color: var(--lexxy-color-code-token-function);
  }

  /* Variables, regex, namespaces, important */
  .code-token__variable,
  .token.important,
  .token.namespace,
  .token.regex,
  .token.variable {
    color: var(--lexxy-color-code-token-variable);
  }

  /* Punctuation */
  .code-token__punctuation,
  .token.punctuation {
    color: var(--lexxy-color-code-token-punctuation);
  }

  /* Tables */
  :where(.lexxy-content__table-wrapper) {
    margin: 0;
    margin-block: 1ch;
    overflow-x: auto;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    inline-size: calc(100% - 0.5ch);
    margin: 0.25ch;

    th,
    td {
      border: 1px solid var(--lexxy-color-ink-lighter);
      min-width: 5ch;
      max-width: 50ch;
      padding: 1ch;
      text-align: start;
      word-break: normal;

      *:last-child {
        margin-block-end: 0;
      }

      &.lexxy-content__table-cell--header {
        background-color: var(--lexxy-color-table-header-bg);
        font-weight: bold;
      }

      *:is(code, pre) {
        hyphens: auto;
        white-space: pre-wrap;

        @supports (text-wrap: wrap) {
          text-wrap: wrap;
        }
      }
    }
  }


  /* Attachments
  /* ------------------------------------------------------------------------ */

  p:has(.attachment) {
    text-align: center;
  }

  .attachment {
    --lexxy-attachment-gap: 0.75ch;

    block-size: auto;
    box-sizing: border-box;
    border-radius: var(--lexxy-radius);
    display: block;
    inline-size: fit-content;
    margin-inline: auto;
    max-inline-size: 100%;
    min-inline-size: 10ch;
    padding: var(--lexxy-attachment-gap);
    position: relative;
    text-align: center;
  }

  .attachment__caption {
    color: var(--lexxy-color-text-subtle);
    display: block;
    font-size: var(--lexxy-text-small);
    padding: 1ch;
  }

  .attachment__icon {
    aspect-ratio: 4/5;
    background-color: color-mix(var(--lexxy-attachment-icon-color), transparent 90%);
    block-size: 3lh;
    border: 1px solid var(--lexxy-attachment-icon-color);
    border-block-start-width: 1.5ch;
    border-radius: var(--lexxy-radius);
    box-sizing: border-box;
    color: var(--lexxy-attachment-icon-color);
    display: grid;
    font-size: var(--lexxy-text-small);
    font-weight: bold;
    inline-size: auto;
    overflow: hidden;
    place-content: center;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .attachment--preview {
    img, video {
      border-radius: var(--lexxy-radius);
      block-size: auto;
      display: block;
      margin-inline: auto;
      max-inline-size: 100%;
      -webkit-user-select: none;

      @supports (user-select: none) {
        user-select: none;
      }
    }

    > a {
      display: block;
    }

    .attachment__caption {
      padding-block-end: 0.5ch;
    }
  }

  .attachment--file {
    --lexxy-attachment-icon-color: var(--lexxy-color-text-subtle);

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    inline-size: auto;

    .attachment__caption {
      display: grid;
      flex: 1;
      text-align: start;
    }

    .attachment__name {
      color: var(--lexxy-color-ink);
      font-weight: bold;
    }
  }

  .attachment--psd,
  .attachment--key,
  .attachment--sketch,
  .attachment--ai,
  .attachment--eps,
  .attachment--indd,
  .attachment--svg,
  .attachment--ppt,
  .attachment--pptx {
    --lexxy-attachment-icon-color: var(--lexxy-color-red);
  }

  .attachment--css,
  .attachment--php,
  .attachment--json,
  .attachment--htm,
  .attachment--html,
  .attachment--rb,
  .attachment--erb,
  .attachment--ts,
  .attachment--js {
    --lexxy-attachment-icon-color: var(--lexxy-color-purple);
  }

  .attachment--txt,
  .attachment--pages,
  .attachment--rtf,
  .attachment--md,
  .attachment--doc,
  .attachment--docx {
    --lexxy-attachment-icon-color: var(--lexxy-color-blue);
  }

  .attachment--csv,
  .attachment--numbers,
  .attachment--xls,
  .attachment--xlsx {
    --lexxy-attachment-icon-color: var(--lexxy-color-green);
  }

  .attachment--error {
    padding-block: 2ch;
  }


  /* Image galleries */
  /* ------------------------------------------------------------------------ */

  .attachment-gallery {
    display: block;
    text-align: center;

    .attachment {
      display: inline-flex;
      flex-direction: column;
      gap: 0;
      inline-size: calc(33.333% - 0.8ch);
      vertical-align: top;

      .attachment__caption {
        padding-block-end: 1ch;
      }
    }

    &.attachment-gallery--2,
    &.attachment-gallery--4 {
      .attachment {
        inline-size: calc(50% - 0.8ch);
      }
    }
  }


  /* Custom attachments such as mentions, etc. */
  /* ------------------------------------------------------------------------ */

  action-text-attachment[content-type^="application/vnd.actiontext"] {
    --lexxy-attachment-bg-color: transparent;
    --lexxy-attachment-image-size: 1em;
    --lexxy-attachment-text-color: currentColor;

    align-items: center;
    background: var(--lexxy-attachment-bg-color);
    border-radius: var(--lexxy-radius);
    color: var(--lexxy-attachment-text-color);
    display: inline-flex;
    gap: 0.25ch;
    margin: 0;
    padding: 0;
    position: relative;
    white-space: normal;

    img {
      block-size: var(--lexxy-attachment-image-size);
      border-radius: 50%;
      inline-size: var(--lexxy-attachment-image-size);
    }
  }


  /* Horizontal divider */
  /* ------------------------------------------------------------------------ */

  .horizontal-divider {
    margin: 0;
    margin-block-end: .5em;
    padding: 1.5em 0 .5em;

    hr {
      border: 0;
      border-block-end: 1px solid currentColor;
      inline-size: 20%;
      margin: 0;
    }
  }
}
@import url(/assets/lexxy-variables-8c25c91ccd68390a9422380c5b0377575a2e742a442c2dd7ba620c57de5f4777.css);

:where(lexxy-editor) {
  --lexxy-editor-padding: 1ch;
  --lexxy-editor-rows: 8lh;
  /* eslint-disable-next-line css/no-invalid-properties */
  @supports (min-block-size: attr(rows lh)) {
    --lexxy-editor-rows: attr(rows lh, 8lh);
  }
  --lexxy-toolbar-gap: 2px;
  --lexxy-toolbar-spacing: 0.5ch;

  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
  background-color: var(--lexxy-color-canvas);
  container-type: inline-size;
  display: block;
  overflow: visible;
  position: relative;
  transition: opacity 150ms;

  p.provisional-paragraph {
    display: block;

    &.hidden {
      block-size: 0.5ch;
      margin: 0;
    }
  }

  input,
  button,
  summary {
    &:focus-visible {
      outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
      outline-offset: var(--lexxy-focus-ring-offset);
    }
  }

  summary {
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }
  }

  button,
  summary {
    -webkit-appearance: none;
    appearance: none;
    background: var(--lexxy-color-canvas);
    border: none;
    border-radius: var(--lexxy-radius);
    cursor: pointer;
    line-height: normal;
    font-size: inherit;
    inline-size: auto;
    padding: 0;

    @media(any-hover: hover) {
      &:hover:not([aria-disabled="true"]) {
        background: var(--lexxy-color-ink-lightest);
      }
    }
  }

  .node--selected {
    outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
    outline-offset: var(--lexxy-focus-ring-offset);
  }

  &[data-links-openable] a {
    cursor: pointer;
  }

  /* Tables */
  /* ------------------------------------------------------------------------ */

  table {
    th, td {
      position: relative;
      transition: all 0.1s ease-in-out;

      /* Used for column and row adding visualizations */
      &:after {
        box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent inset;
        content: "";
        display: block;
        inset-block-start: -1px;
        inset-block-end: -1px;
        inset-inline-start: -1px;
        inset-inline-end: -1px;
        pointer-events: none;
        position: absolute;
        transition: box-shadow 0.1s ease-in-out;
        z-index: 2;
      }

      &.lexxy-content__table-cell--selected {
        background-color: var(--lexxy-color-table-cell-selected-bg);
      }

      &.lexxy-content__table-cell--focus {
        &:after {
          box-shadow: 0 0 0 0 transparent, 0 0 0 2px var(--lexxy-color-table-cell-selected-border) inset;
        }
      }

      &.lexxy-content__table-cell--highlight {
        &[data-action="insert"] {
          &[data-child-type="row"] {
            &[data-direction="after"] {
              &:after {
                box-shadow:
                  0 var(--lexxy-table-cell-add-size) 0 0 var(--lexxy-color-table-cell-add),
                  0 calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 var(--lexxy-color-table-cell-add) inset;
              }
            }
            &[data-direction="before"] {
              &:after {
                box-shadow:
                  0 calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 var(--lexxy-color-table-cell-add),
                  0 var(--lexxy-table-cell-add-size) 0 0 var(--lexxy-color-table-cell-add) inset;
              }
            }
          }
          &[data-child-type="column"] {
            &[data-direction="after"] {
              &:after {
                box-shadow:
                  var(--lexxy-table-cell-add-size) 0 0 0 var(--lexxy-color-table-cell-add),
                  calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 0 var(--lexxy-color-table-cell-add) inset;
              }
            }
            &[data-direction="before"] {
              &:after {
                box-shadow:
                  calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 0 var(--lexxy-color-table-cell-add),
                  var(--lexxy-table-cell-add-size) 0 0 0 var(--lexxy-color-table-cell-add) inset;
              }
            }
          }
        }
        &[data-action="delete"] {
          background-color: var(--lexxy-color-table-cell-remove);
          color: var(--lexxy-color-red);

          &:after { box-shadow: 0 0 0 0 transparent; }
        }
        &[data-action="toggle"] {
          background-color: var(--lexxy-color-table-cell-toggle);

          &:after { box-shadow: 0 0 0 0 transparent; }
        }
      }
    }

    tr.lexxy-content__table-cell--highlight[data-action="delete"] {
      th, td {
        background-color: var(--lexxy-color-table-cell-remove);
        color: var(--lexxy-color-red);

        &:after { box-shadow: 0 0 0 0 transparent; }
      }
    }

    &.lexxy-content__table--selection {
      /* eslint-disable-next-line css/use-baseline */
      ::selection {
        background: transparent;
      }
    }
  }

  &:has(.lexxy-content__table-cell--selected) {
    lexxy-table-tools {
      visibility: hidden;
    }
  }

  [data-lexical-linebreak] {
    block-size: 0;
    display: contents;
    inline-size: 0;
  }

  /* Attachments */
  /* ------------------------------------------------------------------------ */

  action-text-attachment {
    cursor: pointer;
  }

  .attachment {
    background-color: var(--lexxy-color-canvas);

    progress {
      max-inline-size: 10ch;
      margin: auto;
    }

    &.attachment--preview {
      progress {
        inset-block-start: 2ch;
        inset-inline-start: 0;
        inset-inline-end: 0;
        position: absolute;
      }

      lexxy-node-delete-button {
        inset-block-start: 1.5ch;
        inset-inline-end: 1.5ch;
        inset-inline-start: unset;
      }
    }

    &.attachment--error {
      background: color-mix(var(--lexxy-color-red) 10%, transparent);
      padding: 2ch;

      &:before {
        align-items: center;
        aspect-ratio: 1;
        background: var(--lexxy-color-red);
        block-size: 1.5lh;
        border-radius: 50%;
        color: white;
        content: "!";
        display: flex;
        justify-content: center;
        margin: auto;
      }

      > div {
        flex: 1;
        font-size: 0.85em;
        padding: 1ch;
        text-align: start;
      }
    }
  }

  .attachment[draggable] {
    cursor: grab;
  }

  .attachment.lexxy-dragging {
    opacity: 0.4;
  }

  [class*="lexxy-drop-target--"] {
    position: relative;
  }

  /* Horizontal line indicator for block and list drops */
  .lexxy-drop-target--block-before::before,
  .lexxy-drop-target--block-after::after,
  .lexxy-drop-target--list-before::before,
  .lexxy-drop-target--list-after::after {
    background-color: var(--lexxy-focus-ring-color);
    block-size: 3px;
    border-radius: 1px;
    content: "";
    inset-inline: 0;
    pointer-events: none;
    position: absolute;
    transform: translate(0, 0.5ch);
  }

  .lexxy-drop-target--block-before::before,
  .lexxy-drop-target--list-before::before {
    transform: translate(0, -0.5ch);
  }

  .lexxy-drop-target--block-before::before,
  .lexxy-drop-target--list-before::before {
    inset-block-start: -2px;
  }

  .lexxy-drop-target--block-after::after,
  .lexxy-drop-target--list-after::after {
    inset-block-end: -2px;
  }

  /* Vertical line indicator for gallery merge and reorder */
  .lexxy-drop-target--gallery-before::before,
  .lexxy-drop-target--gallery-after::after {
    background-color: var(--lexxy-focus-ring-color);
    border-radius: 1px;
    content: "";
    inset-block: 0;
    inline-size: 3px;
    pointer-events: none;
    position: absolute;
  }

  .lexxy-drop-target--gallery-before::before {
    inset-inline-start: -4px;
  }

  .lexxy-drop-target--gallery-after::after {
    inset-inline-end: -4px;
  }

  .attachment:hover:not(.node--selected) {
    outline: var(--lexxy-focus-ring-size) solid color-mix(in oklch, var(--lexxy-focus-ring-color) 30%, transparent);
    outline-offset: var(--lexxy-focus-ring-offset);
  }

  .attachment--file {
    lexxy-node-delete-button {
      inset-block-start: 50%;
      inset-inline-end: 1ch;
      inset-inline-start: unset;
      transform: translate(0, -50%);
    }
  }

  /* Image galleries */
  /* ------------------------------------------------------------------------ */

  .attachment-gallery {
    --lexxy-attachment-gallery-columns: 3;
    --lexxy-attachment-gallery-gap: 0.4ch;
    --lexxy-focus-ring-offset: -6px;

    padding: 0;

    .attachment {
      background: transparent;
      box-sizing: border-box;
      margin: var(--lexxy-attachment-gallery-gap);
      padding: 0;
      padding-block-end: var(--lexxy-attachment-gap);
      vertical-align: top;

      img {
        box-sizing: border-box;
        padding: 1ch;
        padding-block-end: 0;
      }


      &.attachment--error {
        background: color-mix(var(--lexxy-color-red) 10%, transparent);
        padding: 2ch;

        > div {
          text-align: center;
        }
      }
    }
  }

  .attachment__caption {
    textarea {
      background: transparent;
      block-size: fit-content;
      border: 0;
      border-radius: var(--lexxy-radius);
      box-sizing: border-box;
      color: inherit;
      display: block;
      font-size: inherit;
      font-family: inherit;
      inline-size: 100%;
      max-inline-size: 100%;
      padding: 0;
      text-align: center;

      @supports (resize: none) {
        resize: none;
      }

      &:focus {
        background: var(--lexxy-color-canvas);
        outline: 0;
      }

      &:placeholder-shown {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      @supports (field-sizing: content) {
        field-sizing: content;
        inline-size: 100%;
      }
    }
  }
}

/* Placeholder */
:where(.lexxy-editor--empty) {
  .lexxy-editor__content:not(:has(h1, h2, h3, h4, h5, h6, table, ul, ol, figure, .attachment-gallery))::before {
    content: attr(placeholder);
    color: currentColor;
    cursor: text;
    opacity: 0.66;
    pointer-events: none;
    position: absolute;
    white-space: pre-line;
  }
}

:where(.lexxy-editor__content) {
  /* eslint-disable-next-line css/no-invalid-properties */
  min-block-size: var(--lexxy-editor-rows);
  outline: 0;
  padding: var(--lexxy-editor-padding);

  /* Isolate the contenteditable root's layout and style. Lexical's reconciler
     commits mutations inside this element (nodes appended, text inserted,
     class flipped) on every update; containment keeps those mutations from
     invalidating ancestor-dependent selectors and sibling layout elsewhere
     in the editor. */
  contain: layout style;
}

:where(.lexxy-editor--drag-over) {
  background-color: var(--lexxy-color-selected);
  border-radius: var(--lexxy-radius);
  outline: 2px dashed var(--lexxy-color-selected-dark);
}

:where([data-lexical-cursor]) {
  animation: blink 1s infinite;
  block-size: 1lh;
  border-inline-start: 1.5px solid currentColor;
  line-height: inherit;
  margin-block: 0 var(--lexxy-content-margin);
}

@keyframes blink {
  0% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0;}
}

/* --------------------------------------------------------------------------
/* Toolbar */

:where(lexxy-toolbar) {
  --lexxy-toolbar-icon-size: 1.125em;

  border-block-end: 1px solid var(--lexxy-color-ink-lighter);
  color: currentColor;
  display: flex;
  font-size: inherit;
  gap: var(--lexxy-toolbar-gap);
  max-inline-size: 100%;
  padding: 2px;
  position: relative;

  @container (width < 300px) {
    font-size: 0.8em;
  }

  &[data-attachments="false"] button[name="image"],
  &[data-attachments="false"] button[name="file"] {
    display: none;
  }

  &[data-upload="file"] button[name="image"] {
    display: none;
  }

  &[data-upload="image"] button[name="file"] {
    display: none;
  }

  .lexxy-editor__toolbar-button {
    aspect-ratio: 1;
    block-size: var(--lexxy-toolbar-button-size);
    border: 0;
    border-radius: var(--lexxy-radius);
    color: currentColor;
    display: grid;
    line-height: inherit;
    place-items: center;

    &:is(:active):not([aria-disabled="true"]),
    &[aria-pressed="true"] {
      background-color: var(--lexxy-color-selected);

      &:hover {
        background-color: var(--lexxy-color-selected-hover);
      }
    }

    &[aria-disabled="true"] {
      cursor: default;
      opacity: 0.3;
    }

    svg {
      -webkit-touch-callout: none;
      block-size: var(--lexxy-toolbar-icon-size);
      fill: currentColor;
      grid-area: 1/1;
      inline-size: var(--lexxy-toolbar-icon-size);
      -webkit-user-select: none;

      @supports (user-select: none) {
        user-select: none;
      }
    }

    &.lexxy-editor__toolbar-group-end {
      position: relative;
      margin-inline-end: calc(var(--lexxy-toolbar-spacing) + 1px);

      &:after {
        background-color: var(--lexxy-color-ink-lighter);
        block-size: var(--lexxy-toolbar-icon-size);
        content: "";
        display: block;
        inline-size: 1px;
        inset-inline-end: calc(-1 * var(--lexxy-toolbar-spacing));
        inset-block: 0;
        margin: auto;
        pointer-events: none;
        position: absolute;
      }
    }
  }

  .lexxy-editor__toolbar-button--push-right {
    margin-inline-start: auto;
  }
}

/* --------------------------------------------------------------------------
/* Dropdowns */

:where(.lexxy-editor__toolbar-dropdown) {
  -webkit-user-select: none;

  @supports (user-select: none) {
    user-select: none;
  }

  .lexxy-editor__toolbar-button {
    color: currentColor;

    &:hover {
      opacity: 0.8;
    }

    &.lexxy-editor__toolbar-button--chevron {
      aspect-ratio: unset;
      gap: 0.5ch;
      grid-template-columns: 2fr 1fr;
      min-inline-size: calc(var(--lexxy-toolbar-button-size) + 1.2ch);
      padding-inline: 0.75ch;

      &:after {
        block-size: 0.3ch;
        border-block-end: 2px solid currentColor;
        border-inline-end: 2px solid currentColor;
        content: "";
        display: inline-block;
        inline-size: 0.3ch;
        transform: rotate(45deg);
      }
    }
  }

  > .lexxy-editor__toolbar-button[aria-expanded="true"] {
    background-color: var(--lexxy-color-selected-hover);
    border-end-end-radius: 0;
    border-end-start-radius: 0;

    &:hover {
      background-color: var(--lexxy-color-selected-hover);
    }
  }

  [data-dropdown-panel] {
    background-color: var(--lexxy-color-canvas);
    border: 2px solid var(--lexxy-color-selected-hover);
    border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
    box-sizing: border-box;
    box-shadow: var(--lexxy-shadow);
    color: var(--lexxy-color-text);
    display: flex;
    gap: var(--lexxy-toolbar-gap);
    margin: 0;
    padding: var(--lexxy-toolbar-spacing);
    position: absolute;
    z-index: 3;

    &[hidden],
    [overflowing] &[hidden] {
      display: none;
    }
  }

  .lexxy-editor__toolbar-dropdown-list {
    border-start-start-radius: 0;
    flex-direction: column;
    padding: 0.1ch;

    button {
      align-items: center;
      color: var(--lexxy-color-text);
      display: flex;
      flex-direction: row;
      gap: 1ch;
      padding: 1ch;
      position: relative;

      &[aria-pressed="true"] {
        background-color: var(--lexxy-color-selected);

        &:hover {
          background-color: var(--lexxy-color-selected-hover);
        }
      }

      span {
        font-size: var(--lexxy-text-small);
      }

      svg {
        block-size: 1lh;
        fill: currentColor;
        inline-size: 1lh;
      }
    }

    .lexxy-editor__toolbar-separator {
      background: var(--lexxy-color-ink-lighter);
      block-size: 1px;
      inline-size: 100%;
    }

    [overflowing] & {
      display: grid;
      grid-template-columns: repeat(4, 1fr);

      button span { display: none; }

      .lexxy-editor__toolbar-separator {
        grid-column: 1 / -1;
      }
    }
  }


  /* --------------------------------------------------------------------------
  /* Overflow menu */

  &.lexxy-editor__toolbar-overflow {
    display: none;
    justify-self: flex-end;
    z-index: 1;

    [data-dropdown-panel] {
      border-start-end-radius: 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      inset-inline-end: var(--lexxy-toolbar-gap);
    }
  }


  /* --------------------------------------------------------------------------
  /* Link dropdown */

  &.lexxy-editor__toolbar-dropdown--link {
    [data-dropdown-panel] {
      font-size: var(--lexxy-text-small);
      gap: var(--lexxy-toolbar-spacing);
      inset-inline-start: var(--lexxy-toolbar-spacing);
      inset-inline-end: var(--lexxy-toolbar-spacing);

      [overflowing] & {
        flex-wrap: wrap;
      }

      .lexxy-editor__toolbar-dropdown-actions {
        display: flex;
        flex: 1;
        gap: var(--lexxy-toolbar-spacing);
      }

      input[type="url"] {
        background-color: var(--lexxy-color-canvas);
        border: 1px solid var(--lexxy-color-ink-lighter);
        border-radius: var(--lexxy-radius);
        color: var(--lexxy-color-text);
        block-size: var(--lexxy-toolbar-button-size);
        box-sizing: border-box;
        font-size: var(--lexxy-text-small);
        flex: 2;
        inline-size: 100%;
        line-height: inherit;
        padding-block: 0;
        padding-inline: 1ch;

        [overflowing] & {
          min-inline-size: 100%;
        }
      }

      button {
        background-color: var(--lexxy-color-ink-lightest);
        inline-size: 100%;
        padding-inline: 2ch;
      }

      button[value="link"] {
        background-color: var(--lexxy-color-accent-dark);
        color: var(--lexxy-color-ink-inverted);

        &:hover {
          background-color: var(--lexxy-color-accent-medium);
        }
      }
    }
  }

  /* --------------------------------------------------------------------------
  /* Color dropdown */

  &.lexxy-editor__toolbar-dropdown--highlight {
    position: relative;

    [overflowing] & {
      position: static;
    }

    [data-dropdown-panel] {
      --max-inline-size: calc(var(--max-colors) * (var(--lexxy-toolbar-button-size) + var(--lexxy-toolbar-spacing)));
      border-start-start-radius: 0;
      gap: var(--lexxy-toolbar-spacing);
      flex-direction: column;
      font-size: var(--lexxy-text-small);
      inset-inline-start: 0;
      max-inline-size: var(--max-inline-size);

      [overflowing] & {
        border-start-start-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
        inset-inline-end: var(--lexxy-toolbar-spacing);
        inset-inline-start: var(--lexxy-toolbar-spacing);
      }

      button {
        position: relative;
      }

      .lexxy-highlight-colors {
        display: grid;
        gap: var(--lexxy-toolbar-gap);
        grid-template-columns: repeat(auto-fill, minmax(var(--lexxy-toolbar-button-size), 1fr));
        max-inline-size: var(--max-inline-size);

        button {
          block-size: unset;
          inline-size: 100%;

          &:after {
            align-items: center;
            content: "Aa";
            display: flex;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            inset: 0;
            justify-content: center;
            position: absolute;
          }

          &[aria-pressed="true"] {
            background-color: transparent;
            box-shadow: 0 0 0 2px currentColor inset;

            &:after {
              content: "✓";
            }
          }
        }
      }

      .lexxy-editor__toolbar-dropdown-reset {
        background-color: var(--lexxy-color-ink-lightest);

        &:is([disabled]) {
          display: none;
        }
      }
    }
  }
}

/* --------------------------------------------------------------------------
/* Floating controls */
:where(.lexxy-floating-controls) {
  --button-size: 2.3lh;
  --floating-tools-radius: calc(var(--lexxy-radius) * 1.5);

  color: var(--lexxy-color-ink-inverted);
  font-size: var(--lexxy-text-small);
  line-height: 1;
  position: absolute;
  z-index: 2;

  button,
  summary {
    align-items: center;
    background: transparent;
    block-size: var(--button-size);
    color: var(--lexxy-color-ink-inverted);
    display: flex;
    justify-content: center;
    line-height: inherit;
    min-block-size: var(--button-size);
    min-inline-size: var(--button-size);
    -webkit-user-select: none;

    @supports (user-select: none) {
      user-select: none;
    }

    @media(any-hover: hover) {
      &:hover:not([aria-disabled="true"]),
      [open] &:is(summary) {
        background: var(--lexxy-color-ink-medium);

        svg {
          opacity: 1;
        }
      }

      &:focus-visible {
        outline-color: var(--lexxy-focus-ring-color);
      }
    }
  }

  button {
    aspect-ratio: 1 / 1;
    font-weight: bold;

    svg {
      block-size: 1.125em;
      inline-size: 1.125em;
      fill: currentColor;
      opacity: 0.8;
      padding: 1px; /* Fixes weird Safari SVG clipping issue */
    }

    span {
      display: none;
    }
  }

  summary {
    box-shadow: 0 0 0 1px inset rgba(128, 128, 128, 0.3);
    padding: 0 1.25ch;
  }

  .lexxy-floating-controls__group {
    background-color: var(--lexxy-color-ink);
    border-radius: var(--floating-tools-radius);
    padding: 0.25ch;
  }


  /* --------------------------------------------------------------------------
  /* Table Tools */

  &:is(lexxy-table-tools) {
    flex-direction: row;
    gap: 0.25ch;
    inset-inline-start: var(--lexxy-editor-padding);
    transform: translate(-50%, -120%);

    .lexxy-table-control {
      align-items: stretch;
      display: flex;
      flex-direction: row;
      gap: 0.25ch;
      white-space: nowrap;

      .lexxy-table-control__more-menu {
        gap: 0;
        position: relative;

        .lexxy-table-control__more-menu-details {
          background: var(--lexxy-color-ink);
          border-radius: var(--floating-tools-radius);
          display: flex;
          flex-direction: column;
          gap: 0.25ch;
          inset-block-start: 110%;
          inset-inline-start: 50%;
          padding: 0.25ch;
          position: absolute;
          transform: translateX(-50%);

          button {
            aspect-ratio: unset;
            flex-direction: row;
            font-weight: normal;
            gap: 1ch;
            justify-content: flex-start;
            padding: 0.75ch;
            padding-inline-end: 1.5ch;
            white-space: nowrap;

            span {
              display: inline-block;
            }

            svg {
              block-size: 1.3lh;
              inline-size: 1.3lh;
              fill: currentColor;
            }
          }
        }
      }

      .lexxy-table-control__button--delete-table {
        align-items: center;
        block-size: auto;
        font-weight: normal;
        justify-content: center;

        svg {
          block-size: 1.125em;
          inline-size: 1.125em;
          min-block-size: 1.125em;
          min-inline-size: 1.125em;
        }

        span {
          align-items: center;
          background: var(--lexxy-color-ink);
          border-radius: var(--floating-tools-radius);
          color: color-mix(in srgb, var(--lexxy-color-ink-inverted) 80%, transparent);
          display: flex;
          inset-inline-end: calc(var(--button-size) + 1ch);
          inset-block-start: 0;
          inset-block-end: 0;
          inset-inline-start: 0;
          justify-content: center;
          padding: 0.5ch 1ch;
          position: absolute;
          transition: all 0.2s ease-out;
          opacity: 0;
          pointer-events: none;
          white-space: nowrap;
        }

        &:hover {
          background-color: var(--lexxy-color-red);

          svg { color: var(--lexxy-color-ink-inverted); }

          span {
            opacity: 1;
          }
        }
      }
    }
  }


  /* --------------------------------------------------------------------------
  /* Attachment delete button */

  &:is(lexxy-node-delete-button) {
    inset-block-start: 0;
    inset-inline-start: 100%;
    opacity: 0;
    pointer-events: none;

    .node--selected & {
      opacity: 1;
      pointer-events: auto;
    }

    .lexxy-node-delete:hover {
      background-color: var(--lexxy-color-red);
    }
  }


  /* --------------------------------------------------------------------------
  /* Language picker */

  &:is(lexxy-code-language-picker) {
    inset-inline-end: var(--lexxy-editor-padding);

    select {
      -webkit-appearance: none;
      appearance: none;
      background-color: var(--lexxy-color-canvas);
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
      background-position: center right 1ch;
      background-repeat: no-repeat;
      background-size: 1ch;
      block-size: 1.5lh;
      border: 1px solid var(--lexxy-color-ink-lighter);
      border-radius: var(--lexxy-radius);
      color: var(--lexxy-color-ink);
      font-family: var(--lexxy-font-base);
      font-size: var(--lexxy-text-small);
      font-weight: normal;
      margin: 0.5ch 0.5ch 0 -0.5ch;
      padding: 0 2ch 0 1ch;
      text-align: start;

      @media (prefers-color-scheme: dark) {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
      }
    }
  }
}


/* --------------------------------------------------------------------------
/* Prompt */

:where(.lexxy-prompt-menu) {
  --lexxy-prompt-avatar-size: 24px;
  --lexxy-prompt-padding: 0.5ch;

  --lexxy-prompt-offset-x: 0;
  --lexxy-prompt-offset-y: 0;

  background-color: var(--lexxy-color-canvas);
  border-radius: calc(var(--lexxy-prompt-padding) * 2);
  box-shadow: var(--lexxy-shadow);
  color: var(--lexxy-color-ink);
  font-family: var(--lexxy-font-base);
  font-size: var(--lexxy-text-small);
  list-style: none;
  inset-block-start: var(--lexxy-prompt-offset-y);
  inset-inline-start: var(--lexxy-prompt-offset-x);
  margin: 0;
  max-block-size: 200px;
  max-inline-size: min(20ch, calc(100% - var(--lexxy-prompt-offset-x)));
  min-inline-size: 20ch;
  overflow: auto;
  padding: var(--lexxy-prompt-padding);
  position: absolute;
  visibility: hidden;
  z-index: var(--lexxy-z-popup);

  &[data-clipped-at-right] {
    inset-inline-start: unset;
    inset-inline-end: 1ch;
    max-inline-size: calc(100% - 1ch);
  }

  &[data-clipped-at-bottom] {
    inset-block-start: unset;
    inset-block-end: var(--lexxy-prompt-offset-y);
  }
}

:where(.lexxy-prompt-menu--visible) {
  visibility: initial;
}

:where(.lexxy-prompt-menu__item) {
  align-items: center;
  border-radius: var(--lexxy-radius);
  cursor: pointer;
  display: flex;
  gap: var(--lexxy-prompt-padding);
  padding: var(--lexxy-prompt-padding);

  &:hover {
    background-color: var(--lexxy-color-ink-lightest);
  }

  &[aria-selected] {
    background-color: var(--lexxy-color-selected);
  }

  img {
    block-size: var(--lexxy-prompt-avatar-size);
    border-radius: 50%;
    flex-shrink: 0;
    inline-size: var(--lexxy-prompt-avatar-size);
    margin: 0;
  }

  + & {
    margin-top: 2px;
  }
}

:where(.lexxy-prompt-menu__item--empty) {
  color: var(--lexxy-color-ink-medium);
  padding: var(--lexxy-prompt-padding);
}


/* --------------------------------------------------------------------------
/* Custom attachments */
action-text-attachment[content-type^="application/vnd.actiontext"] {
  &.node--selected {
    --lexxy-attachment-bg-color: var(--lexxy-color-accent-dark);
    --lexxy-attachment-text-color: var(--lexxy-color-ink-inverted);

    outline: none;
  }

  lexxy-node-delete-button {
    inset-inline-start: 0;
    line-height: 1lh;

    .lexxy-floating-controls__group {
      --button-size: 1lh;

      background-color: var(--lexxy-color-accent-dark);
      padding: 0;

      button {
        border-radius: 50%;
      }
    }
  }
}
/*!
 * Bootstrap Icons v1.11.3 (https://icons.getbootstrap.com/)
 * Copyright 2019-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
 */@font-face{font-display:block;font-family:bootstrap-icons;src:url(/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6) format("woff2"),url(/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6) format("woff")}.bi::before,[class*=" bi-"]::before,[class^=bi-]::before{display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:400!important;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bi-123::before{content:"\f67f"}.bi-alarm-fill::before{content:"\f101"}.bi-alarm::before{content:"\f102"}.bi-align-bottom::before{content:"\f103"}.bi-align-center::before{content:"\f104"}.bi-align-end::before{content:"\f105"}.bi-align-middle::before{content:"\f106"}.bi-align-start::before{content:"\f107"}.bi-align-top::before{content:"\f108"}.bi-alt::before{content:"\f109"}.bi-app-indicator::before{content:"\f10a"}.bi-app::before{content:"\f10b"}.bi-archive-fill::before{content:"\f10c"}.bi-archive::before{content:"\f10d"}.bi-arrow-90deg-down::before{content:"\f10e"}.bi-arrow-90deg-left::before{content:"\f10f"}.bi-arrow-90deg-right::before{content:"\f110"}.bi-arrow-90deg-up::before{content:"\f111"}.bi-arrow-bar-down::before{content:"\f112"}.bi-arrow-bar-left::before{content:"\f113"}.bi-arrow-bar-right::before{content:"\f114"}.bi-arrow-bar-up::before{content:"\f115"}.bi-arrow-clockwise::before{content:"\f116"}.bi-arrow-counterclockwise::before{content:"\f117"}.bi-arrow-down-circle-fill::before{content:"\f118"}.bi-arrow-down-circle::before{content:"\f119"}.bi-arrow-down-left-circle-fill::before{content:"\f11a"}.bi-arrow-down-left-circle::before{content:"\f11b"}.bi-arrow-down-left-square-fill::before{content:"\f11c"}.bi-arrow-down-left-square::before{content:"\f11d"}.bi-arrow-down-left::before{content:"\f11e"}.bi-arrow-down-right-circle-fill::before{content:"\f11f"}.bi-arrow-down-right-circle::before{content:"\f120"}.bi-arrow-down-right-square-fill::before{content:"\f121"}.bi-arrow-down-right-square::before{content:"\f122"}.bi-arrow-down-right::before{content:"\f123"}.bi-arrow-down-short::before{content:"\f124"}.bi-arrow-down-square-fill::before{content:"\f125"}.bi-arrow-down-square::before{content:"\f126"}.bi-arrow-down-up::before{content:"\f127"}.bi-arrow-down::before{content:"\f128"}.bi-arrow-left-circle-fill::before{content:"\f129"}.bi-arrow-left-circle::before{content:"\f12a"}.bi-arrow-left-right::before{content:"\f12b"}.bi-arrow-left-short::before{content:"\f12c"}.bi-arrow-left-square-fill::before{content:"\f12d"}.bi-arrow-left-square::before{content:"\f12e"}.bi-arrow-left::before{content:"\f12f"}.bi-arrow-repeat::before{content:"\f130"}.bi-arrow-return-left::before{content:"\f131"}.bi-arrow-return-right::before{content:"\f132"}.bi-arrow-right-circle-fill::before{content:"\f133"}.bi-arrow-right-circle::before{content:"\f134"}.bi-arrow-right-short::before{content:"\f135"}.bi-arrow-right-square-fill::before{content:"\f136"}.bi-arrow-right-square::before{content:"\f137"}.bi-arrow-right::before{content:"\f138"}.bi-arrow-up-circle-fill::before{content:"\f139"}.bi-arrow-up-circle::before{content:"\f13a"}.bi-arrow-up-left-circle-fill::before{content:"\f13b"}.bi-arrow-up-left-circle::before{content:"\f13c"}.bi-arrow-up-left-square-fill::before{content:"\f13d"}.bi-arrow-up-left-square::before{content:"\f13e"}.bi-arrow-up-left::before{content:"\f13f"}.bi-arrow-up-right-circle-fill::before{content:"\f140"}.bi-arrow-up-right-circle::before{content:"\f141"}.bi-arrow-up-right-square-fill::before{content:"\f142"}.bi-arrow-up-right-square::before{content:"\f143"}.bi-arrow-up-right::before{content:"\f144"}.bi-arrow-up-short::before{content:"\f145"}.bi-arrow-up-square-fill::before{content:"\f146"}.bi-arrow-up-square::before{content:"\f147"}.bi-arrow-up::before{content:"\f148"}.bi-arrows-angle-contract::before{content:"\f149"}.bi-arrows-angle-expand::before{content:"\f14a"}.bi-arrows-collapse::before{content:"\f14b"}.bi-arrows-expand::before{content:"\f14c"}.bi-arrows-fullscreen::before{content:"\f14d"}.bi-arrows-move::before{content:"\f14e"}.bi-aspect-ratio-fill::before{content:"\f14f"}.bi-aspect-ratio::before{content:"\f150"}.bi-asterisk::before{content:"\f151"}.bi-at::before{content:"\f152"}.bi-award-fill::before{content:"\f153"}.bi-award::before{content:"\f154"}.bi-back::before{content:"\f155"}.bi-backspace-fill::before{content:"\f156"}.bi-backspace-reverse-fill::before{content:"\f157"}.bi-backspace-reverse::before{content:"\f158"}.bi-backspace::before{content:"\f159"}.bi-badge-3d-fill::before{content:"\f15a"}.bi-badge-3d::before{content:"\f15b"}.bi-badge-4k-fill::before{content:"\f15c"}.bi-badge-4k::before{content:"\f15d"}.bi-badge-8k-fill::before{content:"\f15e"}.bi-badge-8k::before{content:"\f15f"}.bi-badge-ad-fill::before{content:"\f160"}.bi-badge-ad::before{content:"\f161"}.bi-badge-ar-fill::before{content:"\f162"}.bi-badge-ar::before{content:"\f163"}.bi-badge-cc-fill::before{content:"\f164"}.bi-badge-cc::before{content:"\f165"}.bi-badge-hd-fill::before{content:"\f166"}.bi-badge-hd::before{content:"\f167"}.bi-badge-tm-fill::before{content:"\f168"}.bi-badge-tm::before{content:"\f169"}.bi-badge-vo-fill::before{content:"\f16a"}.bi-badge-vo::before{content:"\f16b"}.bi-badge-vr-fill::before{content:"\f16c"}.bi-badge-vr::before{content:"\f16d"}.bi-badge-wc-fill::before{content:"\f16e"}.bi-badge-wc::before{content:"\f16f"}.bi-bag-check-fill::before{content:"\f170"}.bi-bag-check::before{content:"\f171"}.bi-bag-dash-fill::before{content:"\f172"}.bi-bag-dash::before{content:"\f173"}.bi-bag-fill::before{content:"\f174"}.bi-bag-plus-fill::before{content:"\f175"}.bi-bag-plus::before{content:"\f176"}.bi-bag-x-fill::before{content:"\f177"}.bi-bag-x::before{content:"\f178"}.bi-bag::before{content:"\f179"}.bi-bar-chart-fill::before{content:"\f17a"}.bi-bar-chart-line-fill::before{content:"\f17b"}.bi-bar-chart-line::before{content:"\f17c"}.bi-bar-chart-steps::before{content:"\f17d"}.bi-bar-chart::before{content:"\f17e"}.bi-basket-fill::before{content:"\f17f"}.bi-basket::before{content:"\f180"}.bi-basket2-fill::before{content:"\f181"}.bi-basket2::before{content:"\f182"}.bi-basket3-fill::before{content:"\f183"}.bi-basket3::before{content:"\f184"}.bi-battery-charging::before{content:"\f185"}.bi-battery-full::before{content:"\f186"}.bi-battery-half::before{content:"\f187"}.bi-battery::before{content:"\f188"}.bi-bell-fill::before{content:"\f189"}.bi-bell::before{content:"\f18a"}.bi-bezier::before{content:"\f18b"}.bi-bezier2::before{content:"\f18c"}.bi-bicycle::before{content:"\f18d"}.bi-binoculars-fill::before{content:"\f18e"}.bi-binoculars::before{content:"\f18f"}.bi-blockquote-left::before{content:"\f190"}.bi-blockquote-right::before{content:"\f191"}.bi-book-fill::before{content:"\f192"}.bi-book-half::before{content:"\f193"}.bi-book::before{content:"\f194"}.bi-bookmark-check-fill::before{content:"\f195"}.bi-bookmark-check::before{content:"\f196"}.bi-bookmark-dash-fill::before{content:"\f197"}.bi-bookmark-dash::before{content:"\f198"}.bi-bookmark-fill::before{content:"\f199"}.bi-bookmark-heart-fill::before{content:"\f19a"}.bi-bookmark-heart::before{content:"\f19b"}.bi-bookmark-plus-fill::before{content:"\f19c"}.bi-bookmark-plus::before{content:"\f19d"}.bi-bookmark-star-fill::before{content:"\f19e"}.bi-bookmark-star::before{content:"\f19f"}.bi-bookmark-x-fill::before{content:"\f1a0"}.bi-bookmark-x::before{content:"\f1a1"}.bi-bookmark::before{content:"\f1a2"}.bi-bookmarks-fill::before{content:"\f1a3"}.bi-bookmarks::before{content:"\f1a4"}.bi-bookshelf::before{content:"\f1a5"}.bi-bootstrap-fill::before{content:"\f1a6"}.bi-bootstrap-reboot::before{content:"\f1a7"}.bi-bootstrap::before{content:"\f1a8"}.bi-border-all::before{content:"\f1a9"}.bi-border-bottom::before{content:"\f1aa"}.bi-border-center::before{content:"\f1ab"}.bi-border-inner::before{content:"\f1ac"}.bi-border-left::before{content:"\f1ad"}.bi-border-middle::before{content:"\f1ae"}.bi-border-outer::before{content:"\f1af"}.bi-border-right::before{content:"\f1b0"}.bi-border-style::before{content:"\f1b1"}.bi-border-top::before{content:"\f1b2"}.bi-border-width::before{content:"\f1b3"}.bi-border::before{content:"\f1b4"}.bi-bounding-box-circles::before{content:"\f1b5"}.bi-bounding-box::before{content:"\f1b6"}.bi-box-arrow-down-left::before{content:"\f1b7"}.bi-box-arrow-down-right::before{content:"\f1b8"}.bi-box-arrow-down::before{content:"\f1b9"}.bi-box-arrow-in-down-left::before{content:"\f1ba"}.bi-box-arrow-in-down-right::before{content:"\f1bb"}.bi-box-arrow-in-down::before{content:"\f1bc"}.bi-box-arrow-in-left::before{content:"\f1bd"}.bi-box-arrow-in-right::before{content:"\f1be"}.bi-box-arrow-in-up-left::before{content:"\f1bf"}.bi-box-arrow-in-up-right::before{content:"\f1c0"}.bi-box-arrow-in-up::before{content:"\f1c1"}.bi-box-arrow-left::before{content:"\f1c2"}.bi-box-arrow-right::before{content:"\f1c3"}.bi-box-arrow-up-left::before{content:"\f1c4"}.bi-box-arrow-up-right::before{content:"\f1c5"}.bi-box-arrow-up::before{content:"\f1c6"}.bi-box-seam::before{content:"\f1c7"}.bi-box::before{content:"\f1c8"}.bi-braces::before{content:"\f1c9"}.bi-bricks::before{content:"\f1ca"}.bi-briefcase-fill::before{content:"\f1cb"}.bi-briefcase::before{content:"\f1cc"}.bi-brightness-alt-high-fill::before{content:"\f1cd"}.bi-brightness-alt-high::before{content:"\f1ce"}.bi-brightness-alt-low-fill::before{content:"\f1cf"}.bi-brightness-alt-low::before{content:"\f1d0"}.bi-brightness-high-fill::before{content:"\f1d1"}.bi-brightness-high::before{content:"\f1d2"}.bi-brightness-low-fill::before{content:"\f1d3"}.bi-brightness-low::before{content:"\f1d4"}.bi-broadcast-pin::before{content:"\f1d5"}.bi-broadcast::before{content:"\f1d6"}.bi-brush-fill::before{content:"\f1d7"}.bi-brush::before{content:"\f1d8"}.bi-bucket-fill::before{content:"\f1d9"}.bi-bucket::before{content:"\f1da"}.bi-bug-fill::before{content:"\f1db"}.bi-bug::before{content:"\f1dc"}.bi-building::before{content:"\f1dd"}.bi-bullseye::before{content:"\f1de"}.bi-calculator-fill::before{content:"\f1df"}.bi-calculator::before{content:"\f1e0"}.bi-calendar-check-fill::before{content:"\f1e1"}.bi-calendar-check::before{content:"\f1e2"}.bi-calendar-date-fill::before{content:"\f1e3"}.bi-calendar-date::before{content:"\f1e4"}.bi-calendar-day-fill::before{content:"\f1e5"}.bi-calendar-day::before{content:"\f1e6"}.bi-calendar-event-fill::before{content:"\f1e7"}.bi-calendar-event::before{content:"\f1e8"}.bi-calendar-fill::before{content:"\f1e9"}.bi-calendar-minus-fill::before{content:"\f1ea"}.bi-calendar-minus::before{content:"\f1eb"}.bi-calendar-month-fill::before{content:"\f1ec"}.bi-calendar-month::before{content:"\f1ed"}.bi-calendar-plus-fill::before{content:"\f1ee"}.bi-calendar-plus::before{content:"\f1ef"}.bi-calendar-range-fill::before{content:"\f1f0"}.bi-calendar-range::before{content:"\f1f1"}.bi-calendar-week-fill::before{content:"\f1f2"}.bi-calendar-week::before{content:"\f1f3"}.bi-calendar-x-fill::before{content:"\f1f4"}.bi-calendar-x::before{content:"\f1f5"}.bi-calendar::before{content:"\f1f6"}.bi-calendar2-check-fill::before{content:"\f1f7"}.bi-calendar2-check::before{content:"\f1f8"}.bi-calendar2-date-fill::before{content:"\f1f9"}.bi-calendar2-date::before{content:"\f1fa"}.bi-calendar2-day-fill::before{content:"\f1fb"}.bi-calendar2-day::before{content:"\f1fc"}.bi-calendar2-event-fill::before{content:"\f1fd"}.bi-calendar2-event::before{content:"\f1fe"}.bi-calendar2-fill::before{content:"\f1ff"}.bi-calendar2-minus-fill::before{content:"\f200"}.bi-calendar2-minus::before{content:"\f201"}.bi-calendar2-month-fill::before{content:"\f202"}.bi-calendar2-month::before{content:"\f203"}.bi-calendar2-plus-fill::before{content:"\f204"}.bi-calendar2-plus::before{content:"\f205"}.bi-calendar2-range-fill::before{content:"\f206"}.bi-calendar2-range::before{content:"\f207"}.bi-calendar2-week-fill::before{content:"\f208"}.bi-calendar2-week::before{content:"\f209"}.bi-calendar2-x-fill::before{content:"\f20a"}.bi-calendar2-x::before{content:"\f20b"}.bi-calendar2::before{content:"\f20c"}.bi-calendar3-event-fill::before{content:"\f20d"}.bi-calendar3-event::before{content:"\f20e"}.bi-calendar3-fill::before{content:"\f20f"}.bi-calendar3-range-fill::before{content:"\f210"}.bi-calendar3-range::before{content:"\f211"}.bi-calendar3-week-fill::before{content:"\f212"}.bi-calendar3-week::before{content:"\f213"}.bi-calendar3::before{content:"\f214"}.bi-calendar4-event::before{content:"\f215"}.bi-calendar4-range::before{content:"\f216"}.bi-calendar4-week::before{content:"\f217"}.bi-calendar4::before{content:"\f218"}.bi-camera-fill::before{content:"\f219"}.bi-camera-reels-fill::before{content:"\f21a"}.bi-camera-reels::before{content:"\f21b"}.bi-camera-video-fill::before{content:"\f21c"}.bi-camera-video-off-fill::before{content:"\f21d"}.bi-camera-video-off::before{content:"\f21e"}.bi-camera-video::before{content:"\f21f"}.bi-camera::before{content:"\f220"}.bi-camera2::before{content:"\f221"}.bi-capslock-fill::before{content:"\f222"}.bi-capslock::before{content:"\f223"}.bi-card-checklist::before{content:"\f224"}.bi-card-heading::before{content:"\f225"}.bi-card-image::before{content:"\f226"}.bi-card-list::before{content:"\f227"}.bi-card-text::before{content:"\f228"}.bi-caret-down-fill::before{content:"\f229"}.bi-caret-down-square-fill::before{content:"\f22a"}.bi-caret-down-square::before{content:"\f22b"}.bi-caret-down::before{content:"\f22c"}.bi-caret-left-fill::before{content:"\f22d"}.bi-caret-left-square-fill::before{content:"\f22e"}.bi-caret-left-square::before{content:"\f22f"}.bi-caret-left::before{content:"\f230"}.bi-caret-right-fill::before{content:"\f231"}.bi-caret-right-square-fill::before{content:"\f232"}.bi-caret-right-square::before{content:"\f233"}.bi-caret-right::before{content:"\f234"}.bi-caret-up-fill::before{content:"\f235"}.bi-caret-up-square-fill::before{content:"\f236"}.bi-caret-up-square::before{content:"\f237"}.bi-caret-up::before{content:"\f238"}.bi-cart-check-fill::before{content:"\f239"}.bi-cart-check::before{content:"\f23a"}.bi-cart-dash-fill::before{content:"\f23b"}.bi-cart-dash::before{content:"\f23c"}.bi-cart-fill::before{content:"\f23d"}.bi-cart-plus-fill::before{content:"\f23e"}.bi-cart-plus::before{content:"\f23f"}.bi-cart-x-fill::before{content:"\f240"}.bi-cart-x::before{content:"\f241"}.bi-cart::before{content:"\f242"}.bi-cart2::before{content:"\f243"}.bi-cart3::before{content:"\f244"}.bi-cart4::before{content:"\f245"}.bi-cash-stack::before{content:"\f246"}.bi-cash::before{content:"\f247"}.bi-cast::before{content:"\f248"}.bi-chat-dots-fill::before{content:"\f249"}.bi-chat-dots::before{content:"\f24a"}.bi-chat-fill::before{content:"\f24b"}.bi-chat-left-dots-fill::before{content:"\f24c"}.bi-chat-left-dots::before{content:"\f24d"}.bi-chat-left-fill::before{content:"\f24e"}.bi-chat-left-quote-fill::before{content:"\f24f"}.bi-chat-left-quote::before{content:"\f250"}.bi-chat-left-text-fill::before{content:"\f251"}.bi-chat-left-text::before{content:"\f252"}.bi-chat-left::before{content:"\f253"}.bi-chat-quote-fill::before{content:"\f254"}.bi-chat-quote::before{content:"\f255"}.bi-chat-right-dots-fill::before{content:"\f256"}.bi-chat-right-dots::before{content:"\f257"}.bi-chat-right-fill::before{content:"\f258"}.bi-chat-right-quote-fill::before{content:"\f259"}.bi-chat-right-quote::before{content:"\f25a"}.bi-chat-right-text-fill::before{content:"\f25b"}.bi-chat-right-text::before{content:"\f25c"}.bi-chat-right::before{content:"\f25d"}.bi-chat-square-dots-fill::before{content:"\f25e"}.bi-chat-square-dots::before{content:"\f25f"}.bi-chat-square-fill::before{content:"\f260"}.bi-chat-square-quote-fill::before{content:"\f261"}.bi-chat-square-quote::before{content:"\f262"}.bi-chat-square-text-fill::before{content:"\f263"}.bi-chat-square-text::before{content:"\f264"}.bi-chat-square::before{content:"\f265"}.bi-chat-text-fill::before{content:"\f266"}.bi-chat-text::before{content:"\f267"}.bi-chat::before{content:"\f268"}.bi-check-all::before{content:"\f269"}.bi-check-circle-fill::before{content:"\f26a"}.bi-check-circle::before{content:"\f26b"}.bi-check-square-fill::before{content:"\f26c"}.bi-check-square::before{content:"\f26d"}.bi-check::before{content:"\f26e"}.bi-check2-all::before{content:"\f26f"}.bi-check2-circle::before{content:"\f270"}.bi-check2-square::before{content:"\f271"}.bi-check2::before{content:"\f272"}.bi-chevron-bar-contract::before{content:"\f273"}.bi-chevron-bar-down::before{content:"\f274"}.bi-chevron-bar-expand::before{content:"\f275"}.bi-chevron-bar-left::before{content:"\f276"}.bi-chevron-bar-right::before{content:"\f277"}.bi-chevron-bar-up::before{content:"\f278"}.bi-chevron-compact-down::before{content:"\f279"}.bi-chevron-compact-left::before{content:"\f27a"}.bi-chevron-compact-right::before{content:"\f27b"}.bi-chevron-compact-up::before{content:"\f27c"}.bi-chevron-contract::before{content:"\f27d"}.bi-chevron-double-down::before{content:"\f27e"}.bi-chevron-double-left::before{content:"\f27f"}.bi-chevron-double-right::before{content:"\f280"}.bi-chevron-double-up::before{content:"\f281"}.bi-chevron-down::before{content:"\f282"}.bi-chevron-expand::before{content:"\f283"}.bi-chevron-left::before{content:"\f284"}.bi-chevron-right::before{content:"\f285"}.bi-chevron-up::before{content:"\f286"}.bi-circle-fill::before{content:"\f287"}.bi-circle-half::before{content:"\f288"}.bi-circle-square::before{content:"\f289"}.bi-circle::before{content:"\f28a"}.bi-clipboard-check::before{content:"\f28b"}.bi-clipboard-data::before{content:"\f28c"}.bi-clipboard-minus::before{content:"\f28d"}.bi-clipboard-plus::before{content:"\f28e"}.bi-clipboard-x::before{content:"\f28f"}.bi-clipboard::before{content:"\f290"}.bi-clock-fill::before{content:"\f291"}.bi-clock-history::before{content:"\f292"}.bi-clock::before{content:"\f293"}.bi-cloud-arrow-down-fill::before{content:"\f294"}.bi-cloud-arrow-down::before{content:"\f295"}.bi-cloud-arrow-up-fill::before{content:"\f296"}.bi-cloud-arrow-up::before{content:"\f297"}.bi-cloud-check-fill::before{content:"\f298"}.bi-cloud-check::before{content:"\f299"}.bi-cloud-download-fill::before{content:"\f29a"}.bi-cloud-download::before{content:"\f29b"}.bi-cloud-drizzle-fill::before{content:"\f29c"}.bi-cloud-drizzle::before{content:"\f29d"}.bi-cloud-fill::before{content:"\f29e"}.bi-cloud-fog-fill::before{content:"\f29f"}.bi-cloud-fog::before{content:"\f2a0"}.bi-cloud-fog2-fill::before{content:"\f2a1"}.bi-cloud-fog2::before{content:"\f2a2"}.bi-cloud-hail-fill::before{content:"\f2a3"}.bi-cloud-hail::before{content:"\f2a4"}.bi-cloud-haze-fill::before{content:"\f2a6"}.bi-cloud-haze::before{content:"\f2a7"}.bi-cloud-haze2-fill::before{content:"\f2a8"}.bi-cloud-lightning-fill::before{content:"\f2a9"}.bi-cloud-lightning-rain-fill::before{content:"\f2aa"}.bi-cloud-lightning-rain::before{content:"\f2ab"}.bi-cloud-lightning::before{content:"\f2ac"}.bi-cloud-minus-fill::before{content:"\f2ad"}.bi-cloud-minus::before{content:"\f2ae"}.bi-cloud-moon-fill::before{content:"\f2af"}.bi-cloud-moon::before{content:"\f2b0"}.bi-cloud-plus-fill::before{content:"\f2b1"}.bi-cloud-plus::before{content:"\f2b2"}.bi-cloud-rain-fill::before{content:"\f2b3"}.bi-cloud-rain-heavy-fill::before{content:"\f2b4"}.bi-cloud-rain-heavy::before{content:"\f2b5"}.bi-cloud-rain::before{content:"\f2b6"}.bi-cloud-slash-fill::before{content:"\f2b7"}.bi-cloud-slash::before{content:"\f2b8"}.bi-cloud-sleet-fill::before{content:"\f2b9"}.bi-cloud-sleet::before{content:"\f2ba"}.bi-cloud-snow-fill::before{content:"\f2bb"}.bi-cloud-snow::before{content:"\f2bc"}.bi-cloud-sun-fill::before{content:"\f2bd"}.bi-cloud-sun::before{content:"\f2be"}.bi-cloud-upload-fill::before{content:"\f2bf"}.bi-cloud-upload::before{content:"\f2c0"}.bi-cloud::before{content:"\f2c1"}.bi-clouds-fill::before{content:"\f2c2"}.bi-clouds::before{content:"\f2c3"}.bi-cloudy-fill::before{content:"\f2c4"}.bi-cloudy::before{content:"\f2c5"}.bi-code-slash::before{content:"\f2c6"}.bi-code-square::before{content:"\f2c7"}.bi-code::before{content:"\f2c8"}.bi-collection-fill::before{content:"\f2c9"}.bi-collection-play-fill::before{content:"\f2ca"}.bi-collection-play::before{content:"\f2cb"}.bi-collection::before{content:"\f2cc"}.bi-columns-gap::before{content:"\f2cd"}.bi-columns::before{content:"\f2ce"}.bi-command::before{content:"\f2cf"}.bi-compass-fill::before{content:"\f2d0"}.bi-compass::before{content:"\f2d1"}.bi-cone-striped::before{content:"\f2d2"}.bi-cone::before{content:"\f2d3"}.bi-controller::before{content:"\f2d4"}.bi-cpu-fill::before{content:"\f2d5"}.bi-cpu::before{content:"\f2d6"}.bi-credit-card-2-back-fill::before{content:"\f2d7"}.bi-credit-card-2-back::before{content:"\f2d8"}.bi-credit-card-2-front-fill::before{content:"\f2d9"}.bi-credit-card-2-front::before{content:"\f2da"}.bi-credit-card-fill::before{content:"\f2db"}.bi-credit-card::before{content:"\f2dc"}.bi-crop::before{content:"\f2dd"}.bi-cup-fill::before{content:"\f2de"}.bi-cup-straw::before{content:"\f2df"}.bi-cup::before{content:"\f2e0"}.bi-cursor-fill::before{content:"\f2e1"}.bi-cursor-text::before{content:"\f2e2"}.bi-cursor::before{content:"\f2e3"}.bi-dash-circle-dotted::before{content:"\f2e4"}.bi-dash-circle-fill::before{content:"\f2e5"}.bi-dash-circle::before{content:"\f2e6"}.bi-dash-square-dotted::before{content:"\f2e7"}.bi-dash-square-fill::before{content:"\f2e8"}.bi-dash-square::before{content:"\f2e9"}.bi-dash::before{content:"\f2ea"}.bi-diagram-2-fill::before{content:"\f2eb"}.bi-diagram-2::before{content:"\f2ec"}.bi-diagram-3-fill::before{content:"\f2ed"}.bi-diagram-3::before{content:"\f2ee"}.bi-diamond-fill::before{content:"\f2ef"}.bi-diamond-half::before{content:"\f2f0"}.bi-diamond::before{content:"\f2f1"}.bi-dice-1-fill::before{content:"\f2f2"}.bi-dice-1::before{content:"\f2f3"}.bi-dice-2-fill::before{content:"\f2f4"}.bi-dice-2::before{content:"\f2f5"}.bi-dice-3-fill::before{content:"\f2f6"}.bi-dice-3::before{content:"\f2f7"}.bi-dice-4-fill::before{content:"\f2f8"}.bi-dice-4::before{content:"\f2f9"}.bi-dice-5-fill::before{content:"\f2fa"}.bi-dice-5::before{content:"\f2fb"}.bi-dice-6-fill::before{content:"\f2fc"}.bi-dice-6::before{content:"\f2fd"}.bi-disc-fill::before{content:"\f2fe"}.bi-disc::before{content:"\f2ff"}.bi-discord::before{content:"\f300"}.bi-display-fill::before{content:"\f301"}.bi-display::before{content:"\f302"}.bi-distribute-horizontal::before{content:"\f303"}.bi-distribute-vertical::before{content:"\f304"}.bi-door-closed-fill::before{content:"\f305"}.bi-door-closed::before{content:"\f306"}.bi-door-open-fill::before{content:"\f307"}.bi-door-open::before{content:"\f308"}.bi-dot::before{content:"\f309"}.bi-download::before{content:"\f30a"}.bi-droplet-fill::before{content:"\f30b"}.bi-droplet-half::before{content:"\f30c"}.bi-droplet::before{content:"\f30d"}.bi-earbuds::before{content:"\f30e"}.bi-easel-fill::before{content:"\f30f"}.bi-easel::before{content:"\f310"}.bi-egg-fill::before{content:"\f311"}.bi-egg-fried::before{content:"\f312"}.bi-egg::before{content:"\f313"}.bi-eject-fill::before{content:"\f314"}.bi-eject::before{content:"\f315"}.bi-emoji-angry-fill::before{content:"\f316"}.bi-emoji-angry::before{content:"\f317"}.bi-emoji-dizzy-fill::before{content:"\f318"}.bi-emoji-dizzy::before{content:"\f319"}.bi-emoji-expressionless-fill::before{content:"\f31a"}.bi-emoji-expressionless::before{content:"\f31b"}.bi-emoji-frown-fill::before{content:"\f31c"}.bi-emoji-frown::before{content:"\f31d"}.bi-emoji-heart-eyes-fill::before{content:"\f31e"}.bi-emoji-heart-eyes::before{content:"\f31f"}.bi-emoji-laughing-fill::before{content:"\f320"}.bi-emoji-laughing::before{content:"\f321"}.bi-emoji-neutral-fill::before{content:"\f322"}.bi-emoji-neutral::before{content:"\f323"}.bi-emoji-smile-fill::before{content:"\f324"}.bi-emoji-smile-upside-down-fill::before{content:"\f325"}.bi-emoji-smile-upside-down::before{content:"\f326"}.bi-emoji-smile::before{content:"\f327"}.bi-emoji-sunglasses-fill::before{content:"\f328"}.bi-emoji-sunglasses::before{content:"\f329"}.bi-emoji-wink-fill::before{content:"\f32a"}.bi-emoji-wink::before{content:"\f32b"}.bi-envelope-fill::before{content:"\f32c"}.bi-envelope-open-fill::before{content:"\f32d"}.bi-envelope-open::before{content:"\f32e"}.bi-envelope::before{content:"\f32f"}.bi-eraser-fill::before{content:"\f330"}.bi-eraser::before{content:"\f331"}.bi-exclamation-circle-fill::before{content:"\f332"}.bi-exclamation-circle::before{content:"\f333"}.bi-exclamation-diamond-fill::before{content:"\f334"}.bi-exclamation-diamond::before{content:"\f335"}.bi-exclamation-octagon-fill::before{content:"\f336"}.bi-exclamation-octagon::before{content:"\f337"}.bi-exclamation-square-fill::before{content:"\f338"}.bi-exclamation-square::before{content:"\f339"}.bi-exclamation-triangle-fill::before{content:"\f33a"}.bi-exclamation-triangle::before{content:"\f33b"}.bi-exclamation::before{content:"\f33c"}.bi-exclude::before{content:"\f33d"}.bi-eye-fill::before{content:"\f33e"}.bi-eye-slash-fill::before{content:"\f33f"}.bi-eye-slash::before{content:"\f340"}.bi-eye::before{content:"\f341"}.bi-eyedropper::before{content:"\f342"}.bi-eyeglasses::before{content:"\f343"}.bi-facebook::before{content:"\f344"}.bi-file-arrow-down-fill::before{content:"\f345"}.bi-file-arrow-down::before{content:"\f346"}.bi-file-arrow-up-fill::before{content:"\f347"}.bi-file-arrow-up::before{content:"\f348"}.bi-file-bar-graph-fill::before{content:"\f349"}.bi-file-bar-graph::before{content:"\f34a"}.bi-file-binary-fill::before{content:"\f34b"}.bi-file-binary::before{content:"\f34c"}.bi-file-break-fill::before{content:"\f34d"}.bi-file-break::before{content:"\f34e"}.bi-file-check-fill::before{content:"\f34f"}.bi-file-check::before{content:"\f350"}.bi-file-code-fill::before{content:"\f351"}.bi-file-code::before{content:"\f352"}.bi-file-diff-fill::before{content:"\f353"}.bi-file-diff::before{content:"\f354"}.bi-file-earmark-arrow-down-fill::before{content:"\f355"}.bi-file-earmark-arrow-down::before{content:"\f356"}.bi-file-earmark-arrow-up-fill::before{content:"\f357"}.bi-file-earmark-arrow-up::before{content:"\f358"}.bi-file-earmark-bar-graph-fill::before{content:"\f359"}.bi-file-earmark-bar-graph::before{content:"\f35a"}.bi-file-earmark-binary-fill::before{content:"\f35b"}.bi-file-earmark-binary::before{content:"\f35c"}.bi-file-earmark-break-fill::before{content:"\f35d"}.bi-file-earmark-break::before{content:"\f35e"}.bi-file-earmark-check-fill::before{content:"\f35f"}.bi-file-earmark-check::before{content:"\f360"}.bi-file-earmark-code-fill::before{content:"\f361"}.bi-file-earmark-code::before{content:"\f362"}.bi-file-earmark-diff-fill::before{content:"\f363"}.bi-file-earmark-diff::before{content:"\f364"}.bi-file-earmark-easel-fill::before{content:"\f365"}.bi-file-earmark-easel::before{content:"\f366"}.bi-file-earmark-excel-fill::before{content:"\f367"}.bi-file-earmark-excel::before{content:"\f368"}.bi-file-earmark-fill::before{content:"\f369"}.bi-file-earmark-font-fill::before{content:"\f36a"}.bi-file-earmark-font::before{content:"\f36b"}.bi-file-earmark-image-fill::before{content:"\f36c"}.bi-file-earmark-image::before{content:"\f36d"}.bi-file-earmark-lock-fill::before{content:"\f36e"}.bi-file-earmark-lock::before{content:"\f36f"}.bi-file-earmark-lock2-fill::before{content:"\f370"}.bi-file-earmark-lock2::before{content:"\f371"}.bi-file-earmark-medical-fill::before{content:"\f372"}.bi-file-earmark-medical::before{content:"\f373"}.bi-file-earmark-minus-fill::before{content:"\f374"}.bi-file-earmark-minus::before{content:"\f375"}.bi-file-earmark-music-fill::before{content:"\f376"}.bi-file-earmark-music::before{content:"\f377"}.bi-file-earmark-person-fill::before{content:"\f378"}.bi-file-earmark-person::before{content:"\f379"}.bi-file-earmark-play-fill::before{content:"\f37a"}.bi-file-earmark-play::before{content:"\f37b"}.bi-file-earmark-plus-fill::before{content:"\f37c"}.bi-file-earmark-plus::before{content:"\f37d"}.bi-file-earmark-post-fill::before{content:"\f37e"}.bi-file-earmark-post::before{content:"\f37f"}.bi-file-earmark-ppt-fill::before{content:"\f380"}.bi-file-earmark-ppt::before{content:"\f381"}.bi-file-earmark-richtext-fill::before{content:"\f382"}.bi-file-earmark-richtext::before{content:"\f383"}.bi-file-earmark-ruled-fill::before{content:"\f384"}.bi-file-earmark-ruled::before{content:"\f385"}.bi-file-earmark-slides-fill::before{content:"\f386"}.bi-file-earmark-slides::before{content:"\f387"}.bi-file-earmark-spreadsheet-fill::before{content:"\f388"}.bi-file-earmark-spreadsheet::before{content:"\f389"}.bi-file-earmark-text-fill::before{content:"\f38a"}.bi-file-earmark-text::before{content:"\f38b"}.bi-file-earmark-word-fill::before{content:"\f38c"}.bi-file-earmark-word::before{content:"\f38d"}.bi-file-earmark-x-fill::before{content:"\f38e"}.bi-file-earmark-x::before{content:"\f38f"}.bi-file-earmark-zip-fill::before{content:"\f390"}.bi-file-earmark-zip::before{content:"\f391"}.bi-file-earmark::before{content:"\f392"}.bi-file-easel-fill::before{content:"\f393"}.bi-file-easel::before{content:"\f394"}.bi-file-excel-fill::before{content:"\f395"}.bi-file-excel::before{content:"\f396"}.bi-file-fill::before{content:"\f397"}.bi-file-font-fill::before{content:"\f398"}.bi-file-font::before{content:"\f399"}.bi-file-image-fill::before{content:"\f39a"}.bi-file-image::before{content:"\f39b"}.bi-file-lock-fill::before{content:"\f39c"}.bi-file-lock::before{content:"\f39d"}.bi-file-lock2-fill::before{content:"\f39e"}.bi-file-lock2::before{content:"\f39f"}.bi-file-medical-fill::before{content:"\f3a0"}.bi-file-medical::before{content:"\f3a1"}.bi-file-minus-fill::before{content:"\f3a2"}.bi-file-minus::before{content:"\f3a3"}.bi-file-music-fill::before{content:"\f3a4"}.bi-file-music::before{content:"\f3a5"}.bi-file-person-fill::before{content:"\f3a6"}.bi-file-person::before{content:"\f3a7"}.bi-file-play-fill::before{content:"\f3a8"}.bi-file-play::before{content:"\f3a9"}.bi-file-plus-fill::before{content:"\f3aa"}.bi-file-plus::before{content:"\f3ab"}.bi-file-post-fill::before{content:"\f3ac"}.bi-file-post::before{content:"\f3ad"}.bi-file-ppt-fill::before{content:"\f3ae"}.bi-file-ppt::before{content:"\f3af"}.bi-file-richtext-fill::before{content:"\f3b0"}.bi-file-richtext::before{content:"\f3b1"}.bi-file-ruled-fill::before{content:"\f3b2"}.bi-file-ruled::before{content:"\f3b3"}.bi-file-slides-fill::before{content:"\f3b4"}.bi-file-slides::before{content:"\f3b5"}.bi-file-spreadsheet-fill::before{content:"\f3b6"}.bi-file-spreadsheet::before{content:"\f3b7"}.bi-file-text-fill::before{content:"\f3b8"}.bi-file-text::before{content:"\f3b9"}.bi-file-word-fill::before{content:"\f3ba"}.bi-file-word::before{content:"\f3bb"}.bi-file-x-fill::before{content:"\f3bc"}.bi-file-x::before{content:"\f3bd"}.bi-file-zip-fill::before{content:"\f3be"}.bi-file-zip::before{content:"\f3bf"}.bi-file::before{content:"\f3c0"}.bi-files-alt::before{content:"\f3c1"}.bi-files::before{content:"\f3c2"}.bi-film::before{content:"\f3c3"}.bi-filter-circle-fill::before{content:"\f3c4"}.bi-filter-circle::before{content:"\f3c5"}.bi-filter-left::before{content:"\f3c6"}.bi-filter-right::before{content:"\f3c7"}.bi-filter-square-fill::before{content:"\f3c8"}.bi-filter-square::before{content:"\f3c9"}.bi-filter::before{content:"\f3ca"}.bi-flag-fill::before{content:"\f3cb"}.bi-flag::before{content:"\f3cc"}.bi-flower1::before{content:"\f3cd"}.bi-flower2::before{content:"\f3ce"}.bi-flower3::before{content:"\f3cf"}.bi-folder-check::before{content:"\f3d0"}.bi-folder-fill::before{content:"\f3d1"}.bi-folder-minus::before{content:"\f3d2"}.bi-folder-plus::before{content:"\f3d3"}.bi-folder-symlink-fill::before{content:"\f3d4"}.bi-folder-symlink::before{content:"\f3d5"}.bi-folder-x::before{content:"\f3d6"}.bi-folder::before{content:"\f3d7"}.bi-folder2-open::before{content:"\f3d8"}.bi-folder2::before{content:"\f3d9"}.bi-fonts::before{content:"\f3da"}.bi-forward-fill::before{content:"\f3db"}.bi-forward::before{content:"\f3dc"}.bi-front::before{content:"\f3dd"}.bi-fullscreen-exit::before{content:"\f3de"}.bi-fullscreen::before{content:"\f3df"}.bi-funnel-fill::before{content:"\f3e0"}.bi-funnel::before{content:"\f3e1"}.bi-gear-fill::before{content:"\f3e2"}.bi-gear-wide-connected::before{content:"\f3e3"}.bi-gear-wide::before{content:"\f3e4"}.bi-gear::before{content:"\f3e5"}.bi-gem::before{content:"\f3e6"}.bi-geo-alt-fill::before{content:"\f3e7"}.bi-geo-alt::before{content:"\f3e8"}.bi-geo-fill::before{content:"\f3e9"}.bi-geo::before{content:"\f3ea"}.bi-gift-fill::before{content:"\f3eb"}.bi-gift::before{content:"\f3ec"}.bi-github::before{content:"\f3ed"}.bi-globe::before{content:"\f3ee"}.bi-globe2::before{content:"\f3ef"}.bi-google::before{content:"\f3f0"}.bi-graph-down::before{content:"\f3f1"}.bi-graph-up::before{content:"\f3f2"}.bi-grid-1x2-fill::before{content:"\f3f3"}.bi-grid-1x2::before{content:"\f3f4"}.bi-grid-3x2-gap-fill::before{content:"\f3f5"}.bi-grid-3x2-gap::before{content:"\f3f6"}.bi-grid-3x2::before{content:"\f3f7"}.bi-grid-3x3-gap-fill::before{content:"\f3f8"}.bi-grid-3x3-gap::before{content:"\f3f9"}.bi-grid-3x3::before{content:"\f3fa"}.bi-grid-fill::before{content:"\f3fb"}.bi-grid::before{content:"\f3fc"}.bi-grip-horizontal::before{content:"\f3fd"}.bi-grip-vertical::before{content:"\f3fe"}.bi-hammer::before{content:"\f3ff"}.bi-hand-index-fill::before{content:"\f400"}.bi-hand-index-thumb-fill::before{content:"\f401"}.bi-hand-index-thumb::before{content:"\f402"}.bi-hand-index::before{content:"\f403"}.bi-hand-thumbs-down-fill::before{content:"\f404"}.bi-hand-thumbs-down::before{content:"\f405"}.bi-hand-thumbs-up-fill::before{content:"\f406"}.bi-hand-thumbs-up::before{content:"\f407"}.bi-handbag-fill::before{content:"\f408"}.bi-handbag::before{content:"\f409"}.bi-hash::before{content:"\f40a"}.bi-hdd-fill::before{content:"\f40b"}.bi-hdd-network-fill::before{content:"\f40c"}.bi-hdd-network::before{content:"\f40d"}.bi-hdd-rack-fill::before{content:"\f40e"}.bi-hdd-rack::before{content:"\f40f"}.bi-hdd-stack-fill::before{content:"\f410"}.bi-hdd-stack::before{content:"\f411"}.bi-hdd::before{content:"\f412"}.bi-headphones::before{content:"\f413"}.bi-headset::before{content:"\f414"}.bi-heart-fill::before{content:"\f415"}.bi-heart-half::before{content:"\f416"}.bi-heart::before{content:"\f417"}.bi-heptagon-fill::before{content:"\f418"}.bi-heptagon-half::before{content:"\f419"}.bi-heptagon::before{content:"\f41a"}.bi-hexagon-fill::before{content:"\f41b"}.bi-hexagon-half::before{content:"\f41c"}.bi-hexagon::before{content:"\f41d"}.bi-hourglass-bottom::before{content:"\f41e"}.bi-hourglass-split::before{content:"\f41f"}.bi-hourglass-top::before{content:"\f420"}.bi-hourglass::before{content:"\f421"}.bi-house-door-fill::before{content:"\f422"}.bi-house-door::before{content:"\f423"}.bi-house-fill::before{content:"\f424"}.bi-house::before{content:"\f425"}.bi-hr::before{content:"\f426"}.bi-hurricane::before{content:"\f427"}.bi-image-alt::before{content:"\f428"}.bi-image-fill::before{content:"\f429"}.bi-image::before{content:"\f42a"}.bi-images::before{content:"\f42b"}.bi-inbox-fill::before{content:"\f42c"}.bi-inbox::before{content:"\f42d"}.bi-inboxes-fill::before{content:"\f42e"}.bi-inboxes::before{content:"\f42f"}.bi-info-circle-fill::before{content:"\f430"}.bi-info-circle::before{content:"\f431"}.bi-info-square-fill::before{content:"\f432"}.bi-info-square::before{content:"\f433"}.bi-info::before{content:"\f434"}.bi-input-cursor-text::before{content:"\f435"}.bi-input-cursor::before{content:"\f436"}.bi-instagram::before{content:"\f437"}.bi-intersect::before{content:"\f438"}.bi-journal-album::before{content:"\f439"}.bi-journal-arrow-down::before{content:"\f43a"}.bi-journal-arrow-up::before{content:"\f43b"}.bi-journal-bookmark-fill::before{content:"\f43c"}.bi-journal-bookmark::before{content:"\f43d"}.bi-journal-check::before{content:"\f43e"}.bi-journal-code::before{content:"\f43f"}.bi-journal-medical::before{content:"\f440"}.bi-journal-minus::before{content:"\f441"}.bi-journal-plus::before{content:"\f442"}.bi-journal-richtext::before{content:"\f443"}.bi-journal-text::before{content:"\f444"}.bi-journal-x::before{content:"\f445"}.bi-journal::before{content:"\f446"}.bi-journals::before{content:"\f447"}.bi-joystick::before{content:"\f448"}.bi-justify-left::before{content:"\f449"}.bi-justify-right::before{content:"\f44a"}.bi-justify::before{content:"\f44b"}.bi-kanban-fill::before{content:"\f44c"}.bi-kanban::before{content:"\f44d"}.bi-key-fill::before{content:"\f44e"}.bi-key::before{content:"\f44f"}.bi-keyboard-fill::before{content:"\f450"}.bi-keyboard::before{content:"\f451"}.bi-ladder::before{content:"\f452"}.bi-lamp-fill::before{content:"\f453"}.bi-lamp::before{content:"\f454"}.bi-laptop-fill::before{content:"\f455"}.bi-laptop::before{content:"\f456"}.bi-layer-backward::before{content:"\f457"}.bi-layer-forward::before{content:"\f458"}.bi-layers-fill::before{content:"\f459"}.bi-layers-half::before{content:"\f45a"}.bi-layers::before{content:"\f45b"}.bi-layout-sidebar-inset-reverse::before{content:"\f45c"}.bi-layout-sidebar-inset::before{content:"\f45d"}.bi-layout-sidebar-reverse::before{content:"\f45e"}.bi-layout-sidebar::before{content:"\f45f"}.bi-layout-split::before{content:"\f460"}.bi-layout-text-sidebar-reverse::before{content:"\f461"}.bi-layout-text-sidebar::before{content:"\f462"}.bi-layout-text-window-reverse::before{content:"\f463"}.bi-layout-text-window::before{content:"\f464"}.bi-layout-three-columns::before{content:"\f465"}.bi-layout-wtf::before{content:"\f466"}.bi-life-preserver::before{content:"\f467"}.bi-lightbulb-fill::before{content:"\f468"}.bi-lightbulb-off-fill::before{content:"\f469"}.bi-lightbulb-off::before{content:"\f46a"}.bi-lightbulb::before{content:"\f46b"}.bi-lightning-charge-fill::before{content:"\f46c"}.bi-lightning-charge::before{content:"\f46d"}.bi-lightning-fill::before{content:"\f46e"}.bi-lightning::before{content:"\f46f"}.bi-link-45deg::before{content:"\f470"}.bi-link::before{content:"\f471"}.bi-linkedin::before{content:"\f472"}.bi-list-check::before{content:"\f473"}.bi-list-nested::before{content:"\f474"}.bi-list-ol::before{content:"\f475"}.bi-list-stars::before{content:"\f476"}.bi-list-task::before{content:"\f477"}.bi-list-ul::before{content:"\f478"}.bi-list::before{content:"\f479"}.bi-lock-fill::before{content:"\f47a"}.bi-lock::before{content:"\f47b"}.bi-mailbox::before{content:"\f47c"}.bi-mailbox2::before{content:"\f47d"}.bi-map-fill::before{content:"\f47e"}.bi-map::before{content:"\f47f"}.bi-markdown-fill::before{content:"\f480"}.bi-markdown::before{content:"\f481"}.bi-mask::before{content:"\f482"}.bi-megaphone-fill::before{content:"\f483"}.bi-megaphone::before{content:"\f484"}.bi-menu-app-fill::before{content:"\f485"}.bi-menu-app::before{content:"\f486"}.bi-menu-button-fill::before{content:"\f487"}.bi-menu-button-wide-fill::before{content:"\f488"}.bi-menu-button-wide::before{content:"\f489"}.bi-menu-button::before{content:"\f48a"}.bi-menu-down::before{content:"\f48b"}.bi-menu-up::before{content:"\f48c"}.bi-mic-fill::before{content:"\f48d"}.bi-mic-mute-fill::before{content:"\f48e"}.bi-mic-mute::before{content:"\f48f"}.bi-mic::before{content:"\f490"}.bi-minecart-loaded::before{content:"\f491"}.bi-minecart::before{content:"\f492"}.bi-moisture::before{content:"\f493"}.bi-moon-fill::before{content:"\f494"}.bi-moon-stars-fill::before{content:"\f495"}.bi-moon-stars::before{content:"\f496"}.bi-moon::before{content:"\f497"}.bi-mouse-fill::before{content:"\f498"}.bi-mouse::before{content:"\f499"}.bi-mouse2-fill::before{content:"\f49a"}.bi-mouse2::before{content:"\f49b"}.bi-mouse3-fill::before{content:"\f49c"}.bi-mouse3::before{content:"\f49d"}.bi-music-note-beamed::before{content:"\f49e"}.bi-music-note-list::before{content:"\f49f"}.bi-music-note::before{content:"\f4a0"}.bi-music-player-fill::before{content:"\f4a1"}.bi-music-player::before{content:"\f4a2"}.bi-newspaper::before{content:"\f4a3"}.bi-node-minus-fill::before{content:"\f4a4"}.bi-node-minus::before{content:"\f4a5"}.bi-node-plus-fill::before{content:"\f4a6"}.bi-node-plus::before{content:"\f4a7"}.bi-nut-fill::before{content:"\f4a8"}.bi-nut::before{content:"\f4a9"}.bi-octagon-fill::before{content:"\f4aa"}.bi-octagon-half::before{content:"\f4ab"}.bi-octagon::before{content:"\f4ac"}.bi-option::before{content:"\f4ad"}.bi-outlet::before{content:"\f4ae"}.bi-paint-bucket::before{content:"\f4af"}.bi-palette-fill::before{content:"\f4b0"}.bi-palette::before{content:"\f4b1"}.bi-palette2::before{content:"\f4b2"}.bi-paperclip::before{content:"\f4b3"}.bi-paragraph::before{content:"\f4b4"}.bi-patch-check-fill::before{content:"\f4b5"}.bi-patch-check::before{content:"\f4b6"}.bi-patch-exclamation-fill::before{content:"\f4b7"}.bi-patch-exclamation::before{content:"\f4b8"}.bi-patch-minus-fill::before{content:"\f4b9"}.bi-patch-minus::before{content:"\f4ba"}.bi-patch-plus-fill::before{content:"\f4bb"}.bi-patch-plus::before{content:"\f4bc"}.bi-patch-question-fill::before{content:"\f4bd"}.bi-patch-question::before{content:"\f4be"}.bi-pause-btn-fill::before{content:"\f4bf"}.bi-pause-btn::before{content:"\f4c0"}.bi-pause-circle-fill::before{content:"\f4c1"}.bi-pause-circle::before{content:"\f4c2"}.bi-pause-fill::before{content:"\f4c3"}.bi-pause::before{content:"\f4c4"}.bi-peace-fill::before{content:"\f4c5"}.bi-peace::before{content:"\f4c6"}.bi-pen-fill::before{content:"\f4c7"}.bi-pen::before{content:"\f4c8"}.bi-pencil-fill::before{content:"\f4c9"}.bi-pencil-square::before{content:"\f4ca"}.bi-pencil::before{content:"\f4cb"}.bi-pentagon-fill::before{content:"\f4cc"}.bi-pentagon-half::before{content:"\f4cd"}.bi-pentagon::before{content:"\f4ce"}.bi-people-fill::before{content:"\f4cf"}.bi-people::before{content:"\f4d0"}.bi-percent::before{content:"\f4d1"}.bi-person-badge-fill::before{content:"\f4d2"}.bi-person-badge::before{content:"\f4d3"}.bi-person-bounding-box::before{content:"\f4d4"}.bi-person-check-fill::before{content:"\f4d5"}.bi-person-check::before{content:"\f4d6"}.bi-person-circle::before{content:"\f4d7"}.bi-person-dash-fill::before{content:"\f4d8"}.bi-person-dash::before{content:"\f4d9"}.bi-person-fill::before{content:"\f4da"}.bi-person-lines-fill::before{content:"\f4db"}.bi-person-plus-fill::before{content:"\f4dc"}.bi-person-plus::before{content:"\f4dd"}.bi-person-square::before{content:"\f4de"}.bi-person-x-fill::before{content:"\f4df"}.bi-person-x::before{content:"\f4e0"}.bi-person::before{content:"\f4e1"}.bi-phone-fill::before{content:"\f4e2"}.bi-phone-landscape-fill::before{content:"\f4e3"}.bi-phone-landscape::before{content:"\f4e4"}.bi-phone-vibrate-fill::before{content:"\f4e5"}.bi-phone-vibrate::before{content:"\f4e6"}.bi-phone::before{content:"\f4e7"}.bi-pie-chart-fill::before{content:"\f4e8"}.bi-pie-chart::before{content:"\f4e9"}.bi-pin-angle-fill::before{content:"\f4ea"}.bi-pin-angle::before{content:"\f4eb"}.bi-pin-fill::before{content:"\f4ec"}.bi-pin::before{content:"\f4ed"}.bi-pip-fill::before{content:"\f4ee"}.bi-pip::before{content:"\f4ef"}.bi-play-btn-fill::before{content:"\f4f0"}.bi-play-btn::before{content:"\f4f1"}.bi-play-circle-fill::before{content:"\f4f2"}.bi-play-circle::before{content:"\f4f3"}.bi-play-fill::before{content:"\f4f4"}.bi-play::before{content:"\f4f5"}.bi-plug-fill::before{content:"\f4f6"}.bi-plug::before{content:"\f4f7"}.bi-plus-circle-dotted::before{content:"\f4f8"}.bi-plus-circle-fill::before{content:"\f4f9"}.bi-plus-circle::before{content:"\f4fa"}.bi-plus-square-dotted::before{content:"\f4fb"}.bi-plus-square-fill::before{content:"\f4fc"}.bi-plus-square::before{content:"\f4fd"}.bi-plus::before{content:"\f4fe"}.bi-power::before{content:"\f4ff"}.bi-printer-fill::before{content:"\f500"}.bi-printer::before{content:"\f501"}.bi-puzzle-fill::before{content:"\f502"}.bi-puzzle::before{content:"\f503"}.bi-question-circle-fill::before{content:"\f504"}.bi-question-circle::before{content:"\f505"}.bi-question-diamond-fill::before{content:"\f506"}.bi-question-diamond::before{content:"\f507"}.bi-question-octagon-fill::before{content:"\f508"}.bi-question-octagon::before{content:"\f509"}.bi-question-square-fill::before{content:"\f50a"}.bi-question-square::before{content:"\f50b"}.bi-question::before{content:"\f50c"}.bi-rainbow::before{content:"\f50d"}.bi-receipt-cutoff::before{content:"\f50e"}.bi-receipt::before{content:"\f50f"}.bi-reception-0::before{content:"\f510"}.bi-reception-1::before{content:"\f511"}.bi-reception-2::before{content:"\f512"}.bi-reception-3::before{content:"\f513"}.bi-reception-4::before{content:"\f514"}.bi-record-btn-fill::before{content:"\f515"}.bi-record-btn::before{content:"\f516"}.bi-record-circle-fill::before{content:"\f517"}.bi-record-circle::before{content:"\f518"}.bi-record-fill::before{content:"\f519"}.bi-record::before{content:"\f51a"}.bi-record2-fill::before{content:"\f51b"}.bi-record2::before{content:"\f51c"}.bi-reply-all-fill::before{content:"\f51d"}.bi-reply-all::before{content:"\f51e"}.bi-reply-fill::before{content:"\f51f"}.bi-reply::before{content:"\f520"}.bi-rss-fill::before{content:"\f521"}.bi-rss::before{content:"\f522"}.bi-rulers::before{content:"\f523"}.bi-save-fill::before{content:"\f524"}.bi-save::before{content:"\f525"}.bi-save2-fill::before{content:"\f526"}.bi-save2::before{content:"\f527"}.bi-scissors::before{content:"\f528"}.bi-screwdriver::before{content:"\f529"}.bi-search::before{content:"\f52a"}.bi-segmented-nav::before{content:"\f52b"}.bi-server::before{content:"\f52c"}.bi-share-fill::before{content:"\f52d"}.bi-share::before{content:"\f52e"}.bi-shield-check::before{content:"\f52f"}.bi-shield-exclamation::before{content:"\f530"}.bi-shield-fill-check::before{content:"\f531"}.bi-shield-fill-exclamation::before{content:"\f532"}.bi-shield-fill-minus::before{content:"\f533"}.bi-shield-fill-plus::before{content:"\f534"}.bi-shield-fill-x::before{content:"\f535"}.bi-shield-fill::before{content:"\f536"}.bi-shield-lock-fill::before{content:"\f537"}.bi-shield-lock::before{content:"\f538"}.bi-shield-minus::before{content:"\f539"}.bi-shield-plus::before{content:"\f53a"}.bi-shield-shaded::before{content:"\f53b"}.bi-shield-slash-fill::before{content:"\f53c"}.bi-shield-slash::before{content:"\f53d"}.bi-shield-x::before{content:"\f53e"}.bi-shield::before{content:"\f53f"}.bi-shift-fill::before{content:"\f540"}.bi-shift::before{content:"\f541"}.bi-shop-window::before{content:"\f542"}.bi-shop::before{content:"\f543"}.bi-shuffle::before{content:"\f544"}.bi-signpost-2-fill::before{content:"\f545"}.bi-signpost-2::before{content:"\f546"}.bi-signpost-fill::before{content:"\f547"}.bi-signpost-split-fill::before{content:"\f548"}.bi-signpost-split::before{content:"\f549"}.bi-signpost::before{content:"\f54a"}.bi-sim-fill::before{content:"\f54b"}.bi-sim::before{content:"\f54c"}.bi-skip-backward-btn-fill::before{content:"\f54d"}.bi-skip-backward-btn::before{content:"\f54e"}.bi-skip-backward-circle-fill::before{content:"\f54f"}.bi-skip-backward-circle::before{content:"\f550"}.bi-skip-backward-fill::before{content:"\f551"}.bi-skip-backward::before{content:"\f552"}.bi-skip-end-btn-fill::before{content:"\f553"}.bi-skip-end-btn::before{content:"\f554"}.bi-skip-end-circle-fill::before{content:"\f555"}.bi-skip-end-circle::before{content:"\f556"}.bi-skip-end-fill::before{content:"\f557"}.bi-skip-end::before{content:"\f558"}.bi-skip-forward-btn-fill::before{content:"\f559"}.bi-skip-forward-btn::before{content:"\f55a"}.bi-skip-forward-circle-fill::before{content:"\f55b"}.bi-skip-forward-circle::before{content:"\f55c"}.bi-skip-forward-fill::before{content:"\f55d"}.bi-skip-forward::before{content:"\f55e"}.bi-skip-start-btn-fill::before{content:"\f55f"}.bi-skip-start-btn::before{content:"\f560"}.bi-skip-start-circle-fill::before{content:"\f561"}.bi-skip-start-circle::before{content:"\f562"}.bi-skip-start-fill::before{content:"\f563"}.bi-skip-start::before{content:"\f564"}.bi-slack::before{content:"\f565"}.bi-slash-circle-fill::before{content:"\f566"}.bi-slash-circle::before{content:"\f567"}.bi-slash-square-fill::before{content:"\f568"}.bi-slash-square::before{content:"\f569"}.bi-slash::before{content:"\f56a"}.bi-sliders::before{content:"\f56b"}.bi-smartwatch::before{content:"\f56c"}.bi-snow::before{content:"\f56d"}.bi-snow2::before{content:"\f56e"}.bi-snow3::before{content:"\f56f"}.bi-sort-alpha-down-alt::before{content:"\f570"}.bi-sort-alpha-down::before{content:"\f571"}.bi-sort-alpha-up-alt::before{content:"\f572"}.bi-sort-alpha-up::before{content:"\f573"}.bi-sort-down-alt::before{content:"\f574"}.bi-sort-down::before{content:"\f575"}.bi-sort-numeric-down-alt::before{content:"\f576"}.bi-sort-numeric-down::before{content:"\f577"}.bi-sort-numeric-up-alt::before{content:"\f578"}.bi-sort-numeric-up::before{content:"\f579"}.bi-sort-up-alt::before{content:"\f57a"}.bi-sort-up::before{content:"\f57b"}.bi-soundwave::before{content:"\f57c"}.bi-speaker-fill::before{content:"\f57d"}.bi-speaker::before{content:"\f57e"}.bi-speedometer::before{content:"\f57f"}.bi-speedometer2::before{content:"\f580"}.bi-spellcheck::before{content:"\f581"}.bi-square-fill::before{content:"\f582"}.bi-square-half::before{content:"\f583"}.bi-square::before{content:"\f584"}.bi-stack::before{content:"\f585"}.bi-star-fill::before{content:"\f586"}.bi-star-half::before{content:"\f587"}.bi-star::before{content:"\f588"}.bi-stars::before{content:"\f589"}.bi-stickies-fill::before{content:"\f58a"}.bi-stickies::before{content:"\f58b"}.bi-sticky-fill::before{content:"\f58c"}.bi-sticky::before{content:"\f58d"}.bi-stop-btn-fill::before{content:"\f58e"}.bi-stop-btn::before{content:"\f58f"}.bi-stop-circle-fill::before{content:"\f590"}.bi-stop-circle::before{content:"\f591"}.bi-stop-fill::before{content:"\f592"}.bi-stop::before{content:"\f593"}.bi-stoplights-fill::before{content:"\f594"}.bi-stoplights::before{content:"\f595"}.bi-stopwatch-fill::before{content:"\f596"}.bi-stopwatch::before{content:"\f597"}.bi-subtract::before{content:"\f598"}.bi-suit-club-fill::before{content:"\f599"}.bi-suit-club::before{content:"\f59a"}.bi-suit-diamond-fill::before{content:"\f59b"}.bi-suit-diamond::before{content:"\f59c"}.bi-suit-heart-fill::before{content:"\f59d"}.bi-suit-heart::before{content:"\f59e"}.bi-suit-spade-fill::before{content:"\f59f"}.bi-suit-spade::before{content:"\f5a0"}.bi-sun-fill::before{content:"\f5a1"}.bi-sun::before{content:"\f5a2"}.bi-sunglasses::before{content:"\f5a3"}.bi-sunrise-fill::before{content:"\f5a4"}.bi-sunrise::before{content:"\f5a5"}.bi-sunset-fill::before{content:"\f5a6"}.bi-sunset::before{content:"\f5a7"}.bi-symmetry-horizontal::before{content:"\f5a8"}.bi-symmetry-vertical::before{content:"\f5a9"}.bi-table::before{content:"\f5aa"}.bi-tablet-fill::before{content:"\f5ab"}.bi-tablet-landscape-fill::before{content:"\f5ac"}.bi-tablet-landscape::before{content:"\f5ad"}.bi-tablet::before{content:"\f5ae"}.bi-tag-fill::before{content:"\f5af"}.bi-tag::before{content:"\f5b0"}.bi-tags-fill::before{content:"\f5b1"}.bi-tags::before{content:"\f5b2"}.bi-telegram::before{content:"\f5b3"}.bi-telephone-fill::before{content:"\f5b4"}.bi-telephone-forward-fill::before{content:"\f5b5"}.bi-telephone-forward::before{content:"\f5b6"}.bi-telephone-inbound-fill::before{content:"\f5b7"}.bi-telephone-inbound::before{content:"\f5b8"}.bi-telephone-minus-fill::before{content:"\f5b9"}.bi-telephone-minus::before{content:"\f5ba"}.bi-telephone-outbound-fill::before{content:"\f5bb"}.bi-telephone-outbound::before{content:"\f5bc"}.bi-telephone-plus-fill::before{content:"\f5bd"}.bi-telephone-plus::before{content:"\f5be"}.bi-telephone-x-fill::before{content:"\f5bf"}.bi-telephone-x::before{content:"\f5c0"}.bi-telephone::before{content:"\f5c1"}.bi-terminal-fill::before{content:"\f5c2"}.bi-terminal::before{content:"\f5c3"}.bi-text-center::before{content:"\f5c4"}.bi-text-indent-left::before{content:"\f5c5"}.bi-text-indent-right::before{content:"\f5c6"}.bi-text-left::before{content:"\f5c7"}.bi-text-paragraph::before{content:"\f5c8"}.bi-text-right::before{content:"\f5c9"}.bi-textarea-resize::before{content:"\f5ca"}.bi-textarea-t::before{content:"\f5cb"}.bi-textarea::before{content:"\f5cc"}.bi-thermometer-half::before{content:"\f5cd"}.bi-thermometer-high::before{content:"\f5ce"}.bi-thermometer-low::before{content:"\f5cf"}.bi-thermometer-snow::before{content:"\f5d0"}.bi-thermometer-sun::before{content:"\f5d1"}.bi-thermometer::before{content:"\f5d2"}.bi-three-dots-vertical::before{content:"\f5d3"}.bi-three-dots::before{content:"\f5d4"}.bi-toggle-off::before{content:"\f5d5"}.bi-toggle-on::before{content:"\f5d6"}.bi-toggle2-off::before{content:"\f5d7"}.bi-toggle2-on::before{content:"\f5d8"}.bi-toggles::before{content:"\f5d9"}.bi-toggles2::before{content:"\f5da"}.bi-tools::before{content:"\f5db"}.bi-tornado::before{content:"\f5dc"}.bi-trash-fill::before{content:"\f5dd"}.bi-trash::before{content:"\f5de"}.bi-trash2-fill::before{content:"\f5df"}.bi-trash2::before{content:"\f5e0"}.bi-tree-fill::before{content:"\f5e1"}.bi-tree::before{content:"\f5e2"}.bi-triangle-fill::before{content:"\f5e3"}.bi-triangle-half::before{content:"\f5e4"}.bi-triangle::before{content:"\f5e5"}.bi-trophy-fill::before{content:"\f5e6"}.bi-trophy::before{content:"\f5e7"}.bi-tropical-storm::before{content:"\f5e8"}.bi-truck-flatbed::before{content:"\f5e9"}.bi-truck::before{content:"\f5ea"}.bi-tsunami::before{content:"\f5eb"}.bi-tv-fill::before{content:"\f5ec"}.bi-tv::before{content:"\f5ed"}.bi-twitch::before{content:"\f5ee"}.bi-twitter::before{content:"\f5ef"}.bi-type-bold::before{content:"\f5f0"}.bi-type-h1::before{content:"\f5f1"}.bi-type-h2::before{content:"\f5f2"}.bi-type-h3::before{content:"\f5f3"}.bi-type-italic::before{content:"\f5f4"}.bi-type-strikethrough::before{content:"\f5f5"}.bi-type-underline::before{content:"\f5f6"}.bi-type::before{content:"\f5f7"}.bi-ui-checks-grid::before{content:"\f5f8"}.bi-ui-checks::before{content:"\f5f9"}.bi-ui-radios-grid::before{content:"\f5fa"}.bi-ui-radios::before{content:"\f5fb"}.bi-umbrella-fill::before{content:"\f5fc"}.bi-umbrella::before{content:"\f5fd"}.bi-union::before{content:"\f5fe"}.bi-unlock-fill::before{content:"\f5ff"}.bi-unlock::before{content:"\f600"}.bi-upc-scan::before{content:"\f601"}.bi-upc::before{content:"\f602"}.bi-upload::before{content:"\f603"}.bi-vector-pen::before{content:"\f604"}.bi-view-list::before{content:"\f605"}.bi-view-stacked::before{content:"\f606"}.bi-vinyl-fill::before{content:"\f607"}.bi-vinyl::before{content:"\f608"}.bi-voicemail::before{content:"\f609"}.bi-volume-down-fill::before{content:"\f60a"}.bi-volume-down::before{content:"\f60b"}.bi-volume-mute-fill::before{content:"\f60c"}.bi-volume-mute::before{content:"\f60d"}.bi-volume-off-fill::before{content:"\f60e"}.bi-volume-off::before{content:"\f60f"}.bi-volume-up-fill::before{content:"\f610"}.bi-volume-up::before{content:"\f611"}.bi-vr::before{content:"\f612"}.bi-wallet-fill::before{content:"\f613"}.bi-wallet::before{content:"\f614"}.bi-wallet2::before{content:"\f615"}.bi-watch::before{content:"\f616"}.bi-water::before{content:"\f617"}.bi-whatsapp::before{content:"\f618"}.bi-wifi-1::before{content:"\f619"}.bi-wifi-2::before{content:"\f61a"}.bi-wifi-off::before{content:"\f61b"}.bi-wifi::before{content:"\f61c"}.bi-wind::before{content:"\f61d"}.bi-window-dock::before{content:"\f61e"}.bi-window-sidebar::before{content:"\f61f"}.bi-window::before{content:"\f620"}.bi-wrench::before{content:"\f621"}.bi-x-circle-fill::before{content:"\f622"}.bi-x-circle::before{content:"\f623"}.bi-x-diamond-fill::before{content:"\f624"}.bi-x-diamond::before{content:"\f625"}.bi-x-octagon-fill::before{content:"\f626"}.bi-x-octagon::before{content:"\f627"}.bi-x-square-fill::before{content:"\f628"}.bi-x-square::before{content:"\f629"}.bi-x::before{content:"\f62a"}.bi-youtube::before{content:"\f62b"}.bi-zoom-in::before{content:"\f62c"}.bi-zoom-out::before{content:"\f62d"}.bi-bank::before{content:"\f62e"}.bi-bank2::before{content:"\f62f"}.bi-bell-slash-fill::before{content:"\f630"}.bi-bell-slash::before{content:"\f631"}.bi-cash-coin::before{content:"\f632"}.bi-check-lg::before{content:"\f633"}.bi-coin::before{content:"\f634"}.bi-currency-bitcoin::before{content:"\f635"}.bi-currency-dollar::before{content:"\f636"}.bi-currency-euro::before{content:"\f637"}.bi-currency-exchange::before{content:"\f638"}.bi-currency-pound::before{content:"\f639"}.bi-currency-yen::before{content:"\f63a"}.bi-dash-lg::before{content:"\f63b"}.bi-exclamation-lg::before{content:"\f63c"}.bi-file-earmark-pdf-fill::before{content:"\f63d"}.bi-file-earmark-pdf::before{content:"\f63e"}.bi-file-pdf-fill::before{content:"\f63f"}.bi-file-pdf::before{content:"\f640"}.bi-gender-ambiguous::before{content:"\f641"}.bi-gender-female::before{content:"\f642"}.bi-gender-male::before{content:"\f643"}.bi-gender-trans::before{content:"\f644"}.bi-headset-vr::before{content:"\f645"}.bi-info-lg::before{content:"\f646"}.bi-mastodon::before{content:"\f647"}.bi-messenger::before{content:"\f648"}.bi-piggy-bank-fill::before{content:"\f649"}.bi-piggy-bank::before{content:"\f64a"}.bi-pin-map-fill::before{content:"\f64b"}.bi-pin-map::before{content:"\f64c"}.bi-plus-lg::before{content:"\f64d"}.bi-question-lg::before{content:"\f64e"}.bi-recycle::before{content:"\f64f"}.bi-reddit::before{content:"\f650"}.bi-safe-fill::before{content:"\f651"}.bi-safe2-fill::before{content:"\f652"}.bi-safe2::before{content:"\f653"}.bi-sd-card-fill::before{content:"\f654"}.bi-sd-card::before{content:"\f655"}.bi-skype::before{content:"\f656"}.bi-slash-lg::before{content:"\f657"}.bi-translate::before{content:"\f658"}.bi-x-lg::before{content:"\f659"}.bi-safe::before{content:"\f65a"}.bi-apple::before{content:"\f65b"}.bi-microsoft::before{content:"\f65d"}.bi-windows::before{content:"\f65e"}.bi-behance::before{content:"\f65c"}.bi-dribbble::before{content:"\f65f"}.bi-line::before{content:"\f660"}.bi-medium::before{content:"\f661"}.bi-paypal::before{content:"\f662"}.bi-pinterest::before{content:"\f663"}.bi-signal::before{content:"\f664"}.bi-snapchat::before{content:"\f665"}.bi-spotify::before{content:"\f666"}.bi-stack-overflow::before{content:"\f667"}.bi-strava::before{content:"\f668"}.bi-wordpress::before{content:"\f669"}.bi-vimeo::before{content:"\f66a"}.bi-activity::before{content:"\f66b"}.bi-easel2-fill::before{content:"\f66c"}.bi-easel2::before{content:"\f66d"}.bi-easel3-fill::before{content:"\f66e"}.bi-easel3::before{content:"\f66f"}.bi-fan::before{content:"\f670"}.bi-fingerprint::before{content:"\f671"}.bi-graph-down-arrow::before{content:"\f672"}.bi-graph-up-arrow::before{content:"\f673"}.bi-hypnotize::before{content:"\f674"}.bi-magic::before{content:"\f675"}.bi-person-rolodex::before{content:"\f676"}.bi-person-video::before{content:"\f677"}.bi-person-video2::before{content:"\f678"}.bi-person-video3::before{content:"\f679"}.bi-person-workspace::before{content:"\f67a"}.bi-radioactive::before{content:"\f67b"}.bi-webcam-fill::before{content:"\f67c"}.bi-webcam::before{content:"\f67d"}.bi-yin-yang::before{content:"\f67e"}.bi-bandaid-fill::before{content:"\f680"}.bi-bandaid::before{content:"\f681"}.bi-bluetooth::before{content:"\f682"}.bi-body-text::before{content:"\f683"}.bi-boombox::before{content:"\f684"}.bi-boxes::before{content:"\f685"}.bi-dpad-fill::before{content:"\f686"}.bi-dpad::before{content:"\f687"}.bi-ear-fill::before{content:"\f688"}.bi-ear::before{content:"\f689"}.bi-envelope-check-fill::before{content:"\f68b"}.bi-envelope-check::before{content:"\f68c"}.bi-envelope-dash-fill::before{content:"\f68e"}.bi-envelope-dash::before{content:"\f68f"}.bi-envelope-exclamation-fill::before{content:"\f691"}.bi-envelope-exclamation::before{content:"\f692"}.bi-envelope-plus-fill::before{content:"\f693"}.bi-envelope-plus::before{content:"\f694"}.bi-envelope-slash-fill::before{content:"\f696"}.bi-envelope-slash::before{content:"\f697"}.bi-envelope-x-fill::before{content:"\f699"}.bi-envelope-x::before{content:"\f69a"}.bi-explicit-fill::before{content:"\f69b"}.bi-explicit::before{content:"\f69c"}.bi-git::before{content:"\f69d"}.bi-infinity::before{content:"\f69e"}.bi-list-columns-reverse::before{content:"\f69f"}.bi-list-columns::before{content:"\f6a0"}.bi-meta::before{content:"\f6a1"}.bi-nintendo-switch::before{content:"\f6a4"}.bi-pc-display-horizontal::before{content:"\f6a5"}.bi-pc-display::before{content:"\f6a6"}.bi-pc-horizontal::before{content:"\f6a7"}.bi-pc::before{content:"\f6a8"}.bi-playstation::before{content:"\f6a9"}.bi-plus-slash-minus::before{content:"\f6aa"}.bi-projector-fill::before{content:"\f6ab"}.bi-projector::before{content:"\f6ac"}.bi-qr-code-scan::before{content:"\f6ad"}.bi-qr-code::before{content:"\f6ae"}.bi-quora::before{content:"\f6af"}.bi-quote::before{content:"\f6b0"}.bi-robot::before{content:"\f6b1"}.bi-send-check-fill::before{content:"\f6b2"}.bi-send-check::before{content:"\f6b3"}.bi-send-dash-fill::before{content:"\f6b4"}.bi-send-dash::before{content:"\f6b5"}.bi-send-exclamation-fill::before{content:"\f6b7"}.bi-send-exclamation::before{content:"\f6b8"}.bi-send-fill::before{content:"\f6b9"}.bi-send-plus-fill::before{content:"\f6ba"}.bi-send-plus::before{content:"\f6bb"}.bi-send-slash-fill::before{content:"\f6bc"}.bi-send-slash::before{content:"\f6bd"}.bi-send-x-fill::before{content:"\f6be"}.bi-send-x::before{content:"\f6bf"}.bi-send::before{content:"\f6c0"}.bi-steam::before{content:"\f6c1"}.bi-terminal-dash::before{content:"\f6c3"}.bi-terminal-plus::before{content:"\f6c4"}.bi-terminal-split::before{content:"\f6c5"}.bi-ticket-detailed-fill::before{content:"\f6c6"}.bi-ticket-detailed::before{content:"\f6c7"}.bi-ticket-fill::before{content:"\f6c8"}.bi-ticket-perforated-fill::before{content:"\f6c9"}.bi-ticket-perforated::before{content:"\f6ca"}.bi-ticket::before{content:"\f6cb"}.bi-tiktok::before{content:"\f6cc"}.bi-window-dash::before{content:"\f6cd"}.bi-window-desktop::before{content:"\f6ce"}.bi-window-fullscreen::before{content:"\f6cf"}.bi-window-plus::before{content:"\f6d0"}.bi-window-split::before{content:"\f6d1"}.bi-window-stack::before{content:"\f6d2"}.bi-window-x::before{content:"\f6d3"}.bi-xbox::before{content:"\f6d4"}.bi-ethernet::before{content:"\f6d5"}.bi-hdmi-fill::before{content:"\f6d6"}.bi-hdmi::before{content:"\f6d7"}.bi-usb-c-fill::before{content:"\f6d8"}.bi-usb-c::before{content:"\f6d9"}.bi-usb-fill::before{content:"\f6da"}.bi-usb-plug-fill::before{content:"\f6db"}.bi-usb-plug::before{content:"\f6dc"}.bi-usb-symbol::before{content:"\f6dd"}.bi-usb::before{content:"\f6de"}.bi-boombox-fill::before{content:"\f6df"}.bi-displayport::before{content:"\f6e1"}.bi-gpu-card::before{content:"\f6e2"}.bi-memory::before{content:"\f6e3"}.bi-modem-fill::before{content:"\f6e4"}.bi-modem::before{content:"\f6e5"}.bi-motherboard-fill::before{content:"\f6e6"}.bi-motherboard::before{content:"\f6e7"}.bi-optical-audio-fill::before{content:"\f6e8"}.bi-optical-audio::before{content:"\f6e9"}.bi-pci-card::before{content:"\f6ea"}.bi-router-fill::before{content:"\f6eb"}.bi-router::before{content:"\f6ec"}.bi-thunderbolt-fill::before{content:"\f6ef"}.bi-thunderbolt::before{content:"\f6f0"}.bi-usb-drive-fill::before{content:"\f6f1"}.bi-usb-drive::before{content:"\f6f2"}.bi-usb-micro-fill::before{content:"\f6f3"}.bi-usb-micro::before{content:"\f6f4"}.bi-usb-mini-fill::before{content:"\f6f5"}.bi-usb-mini::before{content:"\f6f6"}.bi-cloud-haze2::before{content:"\f6f7"}.bi-device-hdd-fill::before{content:"\f6f8"}.bi-device-hdd::before{content:"\f6f9"}.bi-device-ssd-fill::before{content:"\f6fa"}.bi-device-ssd::before{content:"\f6fb"}.bi-displayport-fill::before{content:"\f6fc"}.bi-mortarboard-fill::before{content:"\f6fd"}.bi-mortarboard::before{content:"\f6fe"}.bi-terminal-x::before{content:"\f6ff"}.bi-arrow-through-heart-fill::before{content:"\f700"}.bi-arrow-through-heart::before{content:"\f701"}.bi-badge-sd-fill::before{content:"\f702"}.bi-badge-sd::before{content:"\f703"}.bi-bag-heart-fill::before{content:"\f704"}.bi-bag-heart::before{content:"\f705"}.bi-balloon-fill::before{content:"\f706"}.bi-balloon-heart-fill::before{content:"\f707"}.bi-balloon-heart::before{content:"\f708"}.bi-balloon::before{content:"\f709"}.bi-box2-fill::before{content:"\f70a"}.bi-box2-heart-fill::before{content:"\f70b"}.bi-box2-heart::before{content:"\f70c"}.bi-box2::before{content:"\f70d"}.bi-braces-asterisk::before{content:"\f70e"}.bi-calendar-heart-fill::before{content:"\f70f"}.bi-calendar-heart::before{content:"\f710"}.bi-calendar2-heart-fill::before{content:"\f711"}.bi-calendar2-heart::before{content:"\f712"}.bi-chat-heart-fill::before{content:"\f713"}.bi-chat-heart::before{content:"\f714"}.bi-chat-left-heart-fill::before{content:"\f715"}.bi-chat-left-heart::before{content:"\f716"}.bi-chat-right-heart-fill::before{content:"\f717"}.bi-chat-right-heart::before{content:"\f718"}.bi-chat-square-heart-fill::before{content:"\f719"}.bi-chat-square-heart::before{content:"\f71a"}.bi-clipboard-check-fill::before{content:"\f71b"}.bi-clipboard-data-fill::before{content:"\f71c"}.bi-clipboard-fill::before{content:"\f71d"}.bi-clipboard-heart-fill::before{content:"\f71e"}.bi-clipboard-heart::before{content:"\f71f"}.bi-clipboard-minus-fill::before{content:"\f720"}.bi-clipboard-plus-fill::before{content:"\f721"}.bi-clipboard-pulse::before{content:"\f722"}.bi-clipboard-x-fill::before{content:"\f723"}.bi-clipboard2-check-fill::before{content:"\f724"}.bi-clipboard2-check::before{content:"\f725"}.bi-clipboard2-data-fill::before{content:"\f726"}.bi-clipboard2-data::before{content:"\f727"}.bi-clipboard2-fill::before{content:"\f728"}.bi-clipboard2-heart-fill::before{content:"\f729"}.bi-clipboard2-heart::before{content:"\f72a"}.bi-clipboard2-minus-fill::before{content:"\f72b"}.bi-clipboard2-minus::before{content:"\f72c"}.bi-clipboard2-plus-fill::before{content:"\f72d"}.bi-clipboard2-plus::before{content:"\f72e"}.bi-clipboard2-pulse-fill::before{content:"\f72f"}.bi-clipboard2-pulse::before{content:"\f730"}.bi-clipboard2-x-fill::before{content:"\f731"}.bi-clipboard2-x::before{content:"\f732"}.bi-clipboard2::before{content:"\f733"}.bi-emoji-kiss-fill::before{content:"\f734"}.bi-emoji-kiss::before{content:"\f735"}.bi-envelope-heart-fill::before{content:"\f736"}.bi-envelope-heart::before{content:"\f737"}.bi-envelope-open-heart-fill::before{content:"\f738"}.bi-envelope-open-heart::before{content:"\f739"}.bi-envelope-paper-fill::before{content:"\f73a"}.bi-envelope-paper-heart-fill::before{content:"\f73b"}.bi-envelope-paper-heart::before{content:"\f73c"}.bi-envelope-paper::before{content:"\f73d"}.bi-filetype-aac::before{content:"\f73e"}.bi-filetype-ai::before{content:"\f73f"}.bi-filetype-bmp::before{content:"\f740"}.bi-filetype-cs::before{content:"\f741"}.bi-filetype-css::before{content:"\f742"}.bi-filetype-csv::before{content:"\f743"}.bi-filetype-doc::before{content:"\f744"}.bi-filetype-docx::before{content:"\f745"}.bi-filetype-exe::before{content:"\f746"}.bi-filetype-gif::before{content:"\f747"}.bi-filetype-heic::before{content:"\f748"}.bi-filetype-html::before{content:"\f749"}.bi-filetype-java::before{content:"\f74a"}.bi-filetype-jpg::before{content:"\f74b"}.bi-filetype-js::before{content:"\f74c"}.bi-filetype-jsx::before{content:"\f74d"}.bi-filetype-key::before{content:"\f74e"}.bi-filetype-m4p::before{content:"\f74f"}.bi-filetype-md::before{content:"\f750"}.bi-filetype-mdx::before{content:"\f751"}.bi-filetype-mov::before{content:"\f752"}.bi-filetype-mp3::before{content:"\f753"}.bi-filetype-mp4::before{content:"\f754"}.bi-filetype-otf::before{content:"\f755"}.bi-filetype-pdf::before{content:"\f756"}.bi-filetype-php::before{content:"\f757"}.bi-filetype-png::before{content:"\f758"}.bi-filetype-ppt::before{content:"\f75a"}.bi-filetype-psd::before{content:"\f75b"}.bi-filetype-py::before{content:"\f75c"}.bi-filetype-raw::before{content:"\f75d"}.bi-filetype-rb::before{content:"\f75e"}.bi-filetype-sass::before{content:"\f75f"}.bi-filetype-scss::before{content:"\f760"}.bi-filetype-sh::before{content:"\f761"}.bi-filetype-svg::before{content:"\f762"}.bi-filetype-tiff::before{content:"\f763"}.bi-filetype-tsx::before{content:"\f764"}.bi-filetype-ttf::before{content:"\f765"}.bi-filetype-txt::before{content:"\f766"}.bi-filetype-wav::before{content:"\f767"}.bi-filetype-woff::before{content:"\f768"}.bi-filetype-xls::before{content:"\f76a"}.bi-filetype-xml::before{content:"\f76b"}.bi-filetype-yml::before{content:"\f76c"}.bi-heart-arrow::before{content:"\f76d"}.bi-heart-pulse-fill::before{content:"\f76e"}.bi-heart-pulse::before{content:"\f76f"}.bi-heartbreak-fill::before{content:"\f770"}.bi-heartbreak::before{content:"\f771"}.bi-hearts::before{content:"\f772"}.bi-hospital-fill::before{content:"\f773"}.bi-hospital::before{content:"\f774"}.bi-house-heart-fill::before{content:"\f775"}.bi-house-heart::before{content:"\f776"}.bi-incognito::before{content:"\f777"}.bi-magnet-fill::before{content:"\f778"}.bi-magnet::before{content:"\f779"}.bi-person-heart::before{content:"\f77a"}.bi-person-hearts::before{content:"\f77b"}.bi-phone-flip::before{content:"\f77c"}.bi-plugin::before{content:"\f77d"}.bi-postage-fill::before{content:"\f77e"}.bi-postage-heart-fill::before{content:"\f77f"}.bi-postage-heart::before{content:"\f780"}.bi-postage::before{content:"\f781"}.bi-postcard-fill::before{content:"\f782"}.bi-postcard-heart-fill::before{content:"\f783"}.bi-postcard-heart::before{content:"\f784"}.bi-postcard::before{content:"\f785"}.bi-search-heart-fill::before{content:"\f786"}.bi-search-heart::before{content:"\f787"}.bi-sliders2-vertical::before{content:"\f788"}.bi-sliders2::before{content:"\f789"}.bi-trash3-fill::before{content:"\f78a"}.bi-trash3::before{content:"\f78b"}.bi-valentine::before{content:"\f78c"}.bi-valentine2::before{content:"\f78d"}.bi-wrench-adjustable-circle-fill::before{content:"\f78e"}.bi-wrench-adjustable-circle::before{content:"\f78f"}.bi-wrench-adjustable::before{content:"\f790"}.bi-filetype-json::before{content:"\f791"}.bi-filetype-pptx::before{content:"\f792"}.bi-filetype-xlsx::before{content:"\f793"}.bi-1-circle-fill::before{content:"\f796"}.bi-1-circle::before{content:"\f797"}.bi-1-square-fill::before{content:"\f798"}.bi-1-square::before{content:"\f799"}.bi-2-circle-fill::before{content:"\f79c"}.bi-2-circle::before{content:"\f79d"}.bi-2-square-fill::before{content:"\f79e"}.bi-2-square::before{content:"\f79f"}.bi-3-circle-fill::before{content:"\f7a2"}.bi-3-circle::before{content:"\f7a3"}.bi-3-square-fill::before{content:"\f7a4"}.bi-3-square::before{content:"\f7a5"}.bi-4-circle-fill::before{content:"\f7a8"}.bi-4-circle::before{content:"\f7a9"}.bi-4-square-fill::before{content:"\f7aa"}.bi-4-square::before{content:"\f7ab"}.bi-5-circle-fill::before{content:"\f7ae"}.bi-5-circle::before{content:"\f7af"}.bi-5-square-fill::before{content:"\f7b0"}.bi-5-square::before{content:"\f7b1"}.bi-6-circle-fill::before{content:"\f7b4"}.bi-6-circle::before{content:"\f7b5"}.bi-6-square-fill::before{content:"\f7b6"}.bi-6-square::before{content:"\f7b7"}.bi-7-circle-fill::before{content:"\f7ba"}.bi-7-circle::before{content:"\f7bb"}.bi-7-square-fill::before{content:"\f7bc"}.bi-7-square::before{content:"\f7bd"}.bi-8-circle-fill::before{content:"\f7c0"}.bi-8-circle::before{content:"\f7c1"}.bi-8-square-fill::before{content:"\f7c2"}.bi-8-square::before{content:"\f7c3"}.bi-9-circle-fill::before{content:"\f7c6"}.bi-9-circle::before{content:"\f7c7"}.bi-9-square-fill::before{content:"\f7c8"}.bi-9-square::before{content:"\f7c9"}.bi-airplane-engines-fill::before{content:"\f7ca"}.bi-airplane-engines::before{content:"\f7cb"}.bi-airplane-fill::before{content:"\f7cc"}.bi-airplane::before{content:"\f7cd"}.bi-alexa::before{content:"\f7ce"}.bi-alipay::before{content:"\f7cf"}.bi-android::before{content:"\f7d0"}.bi-android2::before{content:"\f7d1"}.bi-box-fill::before{content:"\f7d2"}.bi-box-seam-fill::before{content:"\f7d3"}.bi-browser-chrome::before{content:"\f7d4"}.bi-browser-edge::before{content:"\f7d5"}.bi-browser-firefox::before{content:"\f7d6"}.bi-browser-safari::before{content:"\f7d7"}.bi-c-circle-fill::before{content:"\f7da"}.bi-c-circle::before{content:"\f7db"}.bi-c-square-fill::before{content:"\f7dc"}.bi-c-square::before{content:"\f7dd"}.bi-capsule-pill::before{content:"\f7de"}.bi-capsule::before{content:"\f7df"}.bi-car-front-fill::before{content:"\f7e0"}.bi-car-front::before{content:"\f7e1"}.bi-cassette-fill::before{content:"\f7e2"}.bi-cassette::before{content:"\f7e3"}.bi-cc-circle-fill::before{content:"\f7e6"}.bi-cc-circle::before{content:"\f7e7"}.bi-cc-square-fill::before{content:"\f7e8"}.bi-cc-square::before{content:"\f7e9"}.bi-cup-hot-fill::before{content:"\f7ea"}.bi-cup-hot::before{content:"\f7eb"}.bi-currency-rupee::before{content:"\f7ec"}.bi-dropbox::before{content:"\f7ed"}.bi-escape::before{content:"\f7ee"}.bi-fast-forward-btn-fill::before{content:"\f7ef"}.bi-fast-forward-btn::before{content:"\f7f0"}.bi-fast-forward-circle-fill::before{content:"\f7f1"}.bi-fast-forward-circle::before{content:"\f7f2"}.bi-fast-forward-fill::before{content:"\f7f3"}.bi-fast-forward::before{content:"\f7f4"}.bi-filetype-sql::before{content:"\f7f5"}.bi-fire::before{content:"\f7f6"}.bi-google-play::before{content:"\f7f7"}.bi-h-circle-fill::before{content:"\f7fa"}.bi-h-circle::before{content:"\f7fb"}.bi-h-square-fill::before{content:"\f7fc"}.bi-h-square::before{content:"\f7fd"}.bi-indent::before{content:"\f7fe"}.bi-lungs-fill::before{content:"\f7ff"}.bi-lungs::before{content:"\f800"}.bi-microsoft-teams::before{content:"\f801"}.bi-p-circle-fill::before{content:"\f804"}.bi-p-circle::before{content:"\f805"}.bi-p-square-fill::before{content:"\f806"}.bi-p-square::before{content:"\f807"}.bi-pass-fill::before{content:"\f808"}.bi-pass::before{content:"\f809"}.bi-prescription::before{content:"\f80a"}.bi-prescription2::before{content:"\f80b"}.bi-r-circle-fill::before{content:"\f80e"}.bi-r-circle::before{content:"\f80f"}.bi-r-square-fill::before{content:"\f810"}.bi-r-square::before{content:"\f811"}.bi-repeat-1::before{content:"\f812"}.bi-repeat::before{content:"\f813"}.bi-rewind-btn-fill::before{content:"\f814"}.bi-rewind-btn::before{content:"\f815"}.bi-rewind-circle-fill::before{content:"\f816"}.bi-rewind-circle::before{content:"\f817"}.bi-rewind-fill::before{content:"\f818"}.bi-rewind::before{content:"\f819"}.bi-train-freight-front-fill::before{content:"\f81a"}.bi-train-freight-front::before{content:"\f81b"}.bi-train-front-fill::before{content:"\f81c"}.bi-train-front::before{content:"\f81d"}.bi-train-lightrail-front-fill::before{content:"\f81e"}.bi-train-lightrail-front::before{content:"\f81f"}.bi-truck-front-fill::before{content:"\f820"}.bi-truck-front::before{content:"\f821"}.bi-ubuntu::before{content:"\f822"}.bi-unindent::before{content:"\f823"}.bi-unity::before{content:"\f824"}.bi-universal-access-circle::before{content:"\f825"}.bi-universal-access::before{content:"\f826"}.bi-virus::before{content:"\f827"}.bi-virus2::before{content:"\f828"}.bi-wechat::before{content:"\f829"}.bi-yelp::before{content:"\f82a"}.bi-sign-stop-fill::before{content:"\f82b"}.bi-sign-stop-lights-fill::before{content:"\f82c"}.bi-sign-stop-lights::before{content:"\f82d"}.bi-sign-stop::before{content:"\f82e"}.bi-sign-turn-left-fill::before{content:"\f82f"}.bi-sign-turn-left::before{content:"\f830"}.bi-sign-turn-right-fill::before{content:"\f831"}.bi-sign-turn-right::before{content:"\f832"}.bi-sign-turn-slight-left-fill::before{content:"\f833"}.bi-sign-turn-slight-left::before{content:"\f834"}.bi-sign-turn-slight-right-fill::before{content:"\f835"}.bi-sign-turn-slight-right::before{content:"\f836"}.bi-sign-yield-fill::before{content:"\f837"}.bi-sign-yield::before{content:"\f838"}.bi-ev-station-fill::before{content:"\f839"}.bi-ev-station::before{content:"\f83a"}.bi-fuel-pump-diesel-fill::before{content:"\f83b"}.bi-fuel-pump-diesel::before{content:"\f83c"}.bi-fuel-pump-fill::before{content:"\f83d"}.bi-fuel-pump::before{content:"\f83e"}.bi-0-circle-fill::before{content:"\f83f"}.bi-0-circle::before{content:"\f840"}.bi-0-square-fill::before{content:"\f841"}.bi-0-square::before{content:"\f842"}.bi-rocket-fill::before{content:"\f843"}.bi-rocket-takeoff-fill::before{content:"\f844"}.bi-rocket-takeoff::before{content:"\f845"}.bi-rocket::before{content:"\f846"}.bi-stripe::before{content:"\f847"}.bi-subscript::before{content:"\f848"}.bi-superscript::before{content:"\f849"}.bi-trello::before{content:"\f84a"}.bi-envelope-at-fill::before{content:"\f84b"}.bi-envelope-at::before{content:"\f84c"}.bi-regex::before{content:"\f84d"}.bi-text-wrap::before{content:"\f84e"}.bi-sign-dead-end-fill::before{content:"\f84f"}.bi-sign-dead-end::before{content:"\f850"}.bi-sign-do-not-enter-fill::before{content:"\f851"}.bi-sign-do-not-enter::before{content:"\f852"}.bi-sign-intersection-fill::before{content:"\f853"}.bi-sign-intersection-side-fill::before{content:"\f854"}.bi-sign-intersection-side::before{content:"\f855"}.bi-sign-intersection-t-fill::before{content:"\f856"}.bi-sign-intersection-t::before{content:"\f857"}.bi-sign-intersection-y-fill::before{content:"\f858"}.bi-sign-intersection-y::before{content:"\f859"}.bi-sign-intersection::before{content:"\f85a"}.bi-sign-merge-left-fill::before{content:"\f85b"}.bi-sign-merge-left::before{content:"\f85c"}.bi-sign-merge-right-fill::before{content:"\f85d"}.bi-sign-merge-right::before{content:"\f85e"}.bi-sign-no-left-turn-fill::before{content:"\f85f"}.bi-sign-no-left-turn::before{content:"\f860"}.bi-sign-no-parking-fill::before{content:"\f861"}.bi-sign-no-parking::before{content:"\f862"}.bi-sign-no-right-turn-fill::before{content:"\f863"}.bi-sign-no-right-turn::before{content:"\f864"}.bi-sign-railroad-fill::before{content:"\f865"}.bi-sign-railroad::before{content:"\f866"}.bi-building-add::before{content:"\f867"}.bi-building-check::before{content:"\f868"}.bi-building-dash::before{content:"\f869"}.bi-building-down::before{content:"\f86a"}.bi-building-exclamation::before{content:"\f86b"}.bi-building-fill-add::before{content:"\f86c"}.bi-building-fill-check::before{content:"\f86d"}.bi-building-fill-dash::before{content:"\f86e"}.bi-building-fill-down::before{content:"\f86f"}.bi-building-fill-exclamation::before{content:"\f870"}.bi-building-fill-gear::before{content:"\f871"}.bi-building-fill-lock::before{content:"\f872"}.bi-building-fill-slash::before{content:"\f873"}.bi-building-fill-up::before{content:"\f874"}.bi-building-fill-x::before{content:"\f875"}.bi-building-fill::before{content:"\f876"}.bi-building-gear::before{content:"\f877"}.bi-building-lock::before{content:"\f878"}.bi-building-slash::before{content:"\f879"}.bi-building-up::before{content:"\f87a"}.bi-building-x::before{content:"\f87b"}.bi-buildings-fill::before{content:"\f87c"}.bi-buildings::before{content:"\f87d"}.bi-bus-front-fill::before{content:"\f87e"}.bi-bus-front::before{content:"\f87f"}.bi-ev-front-fill::before{content:"\f880"}.bi-ev-front::before{content:"\f881"}.bi-globe-americas::before{content:"\f882"}.bi-globe-asia-australia::before{content:"\f883"}.bi-globe-central-south-asia::before{content:"\f884"}.bi-globe-europe-africa::before{content:"\f885"}.bi-house-add-fill::before{content:"\f886"}.bi-house-add::before{content:"\f887"}.bi-house-check-fill::before{content:"\f888"}.bi-house-check::before{content:"\f889"}.bi-house-dash-fill::before{content:"\f88a"}.bi-house-dash::before{content:"\f88b"}.bi-house-down-fill::before{content:"\f88c"}.bi-house-down::before{content:"\f88d"}.bi-house-exclamation-fill::before{content:"\f88e"}.bi-house-exclamation::before{content:"\f88f"}.bi-house-gear-fill::before{content:"\f890"}.bi-house-gear::before{content:"\f891"}.bi-house-lock-fill::before{content:"\f892"}.bi-house-lock::before{content:"\f893"}.bi-house-slash-fill::before{content:"\f894"}.bi-house-slash::before{content:"\f895"}.bi-house-up-fill::before{content:"\f896"}.bi-house-up::before{content:"\f897"}.bi-house-x-fill::before{content:"\f898"}.bi-house-x::before{content:"\f899"}.bi-person-add::before{content:"\f89a"}.bi-person-down::before{content:"\f89b"}.bi-person-exclamation::before{content:"\f89c"}.bi-person-fill-add::before{content:"\f89d"}.bi-person-fill-check::before{content:"\f89e"}.bi-person-fill-dash::before{content:"\f89f"}.bi-person-fill-down::before{content:"\f8a0"}.bi-person-fill-exclamation::before{content:"\f8a1"}.bi-person-fill-gear::before{content:"\f8a2"}.bi-person-fill-lock::before{content:"\f8a3"}.bi-person-fill-slash::before{content:"\f8a4"}.bi-person-fill-up::before{content:"\f8a5"}.bi-person-fill-x::before{content:"\f8a6"}.bi-person-gear::before{content:"\f8a7"}.bi-person-lock::before{content:"\f8a8"}.bi-person-slash::before{content:"\f8a9"}.bi-person-up::before{content:"\f8aa"}.bi-scooter::before{content:"\f8ab"}.bi-taxi-front-fill::before{content:"\f8ac"}.bi-taxi-front::before{content:"\f8ad"}.bi-amd::before{content:"\f8ae"}.bi-database-add::before{content:"\f8af"}.bi-database-check::before{content:"\f8b0"}.bi-database-dash::before{content:"\f8b1"}.bi-database-down::before{content:"\f8b2"}.bi-database-exclamation::before{content:"\f8b3"}.bi-database-fill-add::before{content:"\f8b4"}.bi-database-fill-check::before{content:"\f8b5"}.bi-database-fill-dash::before{content:"\f8b6"}.bi-database-fill-down::before{content:"\f8b7"}.bi-database-fill-exclamation::before{content:"\f8b8"}.bi-database-fill-gear::before{content:"\f8b9"}.bi-database-fill-lock::before{content:"\f8ba"}.bi-database-fill-slash::before{content:"\f8bb"}.bi-database-fill-up::before{content:"\f8bc"}.bi-database-fill-x::before{content:"\f8bd"}.bi-database-fill::before{content:"\f8be"}.bi-database-gear::before{content:"\f8bf"}.bi-database-lock::before{content:"\f8c0"}.bi-database-slash::before{content:"\f8c1"}.bi-database-up::before{content:"\f8c2"}.bi-database-x::before{content:"\f8c3"}.bi-database::before{content:"\f8c4"}.bi-houses-fill::before{content:"\f8c5"}.bi-houses::before{content:"\f8c6"}.bi-nvidia::before{content:"\f8c7"}.bi-person-vcard-fill::before{content:"\f8c8"}.bi-person-vcard::before{content:"\f8c9"}.bi-sina-weibo::before{content:"\f8ca"}.bi-tencent-qq::before{content:"\f8cb"}.bi-wikipedia::before{content:"\f8cc"}.bi-alphabet-uppercase::before{content:"\f2a5"}.bi-alphabet::before{content:"\f68a"}.bi-amazon::before{content:"\f68d"}.bi-arrows-collapse-vertical::before{content:"\f690"}.bi-arrows-expand-vertical::before{content:"\f695"}.bi-arrows-vertical::before{content:"\f698"}.bi-arrows::before{content:"\f6a2"}.bi-ban-fill::before{content:"\f6a3"}.bi-ban::before{content:"\f6b6"}.bi-bing::before{content:"\f6c2"}.bi-cake::before{content:"\f6e0"}.bi-cake2::before{content:"\f6ed"}.bi-cookie::before{content:"\f6ee"}.bi-copy::before{content:"\f759"}.bi-crosshair::before{content:"\f769"}.bi-crosshair2::before{content:"\f794"}.bi-emoji-astonished-fill::before{content:"\f795"}.bi-emoji-astonished::before{content:"\f79a"}.bi-emoji-grimace-fill::before{content:"\f79b"}.bi-emoji-grimace::before{content:"\f7a0"}.bi-emoji-grin-fill::before{content:"\f7a1"}.bi-emoji-grin::before{content:"\f7a6"}.bi-emoji-surprise-fill::before{content:"\f7a7"}.bi-emoji-surprise::before{content:"\f7ac"}.bi-emoji-tear-fill::before{content:"\f7ad"}.bi-emoji-tear::before{content:"\f7b2"}.bi-envelope-arrow-down-fill::before{content:"\f7b3"}.bi-envelope-arrow-down::before{content:"\f7b8"}.bi-envelope-arrow-up-fill::before{content:"\f7b9"}.bi-envelope-arrow-up::before{content:"\f7be"}.bi-feather::before{content:"\f7bf"}.bi-feather2::before{content:"\f7c4"}.bi-floppy-fill::before{content:"\f7c5"}.bi-floppy::before{content:"\f7d8"}.bi-floppy2-fill::before{content:"\f7d9"}.bi-floppy2::before{content:"\f7e4"}.bi-gitlab::before{content:"\f7e5"}.bi-highlighter::before{content:"\f7f8"}.bi-marker-tip::before{content:"\f802"}.bi-nvme-fill::before{content:"\f803"}.bi-nvme::before{content:"\f80c"}.bi-opencollective::before{content:"\f80d"}.bi-pci-card-network::before{content:"\f8cd"}.bi-pci-card-sound::before{content:"\f8ce"}.bi-radar::before{content:"\f8cf"}.bi-send-arrow-down-fill::before{content:"\f8d0"}.bi-send-arrow-down::before{content:"\f8d1"}.bi-send-arrow-up-fill::before{content:"\f8d2"}.bi-send-arrow-up::before{content:"\f8d3"}.bi-sim-slash-fill::before{content:"\f8d4"}.bi-sim-slash::before{content:"\f8d5"}.bi-sourceforge::before{content:"\f8d6"}.bi-substack::before{content:"\f8d7"}.bi-threads-fill::before{content:"\f8d8"}.bi-threads::before{content:"\f8d9"}.bi-transparency::before{content:"\f8da"}.bi-twitter-x::before{content:"\f8db"}.bi-type-h4::before{content:"\f8dc"}.bi-type-h5::before{content:"\f8dd"}.bi-type-h6::before{content:"\f8de"}.bi-backpack-fill::before{content:"\f8df"}.bi-backpack::before{content:"\f8e0"}.bi-backpack2-fill::before{content:"\f8e1"}.bi-backpack2::before{content:"\f8e2"}.bi-backpack3-fill::before{content:"\f8e3"}.bi-backpack3::before{content:"\f8e4"}.bi-backpack4-fill::before{content:"\f8e5"}.bi-backpack4::before{content:"\f8e6"}.bi-brilliance::before{content:"\f8e7"}.bi-cake-fill::before{content:"\f8e8"}.bi-cake2-fill::before{content:"\f8e9"}.bi-duffle-fill::before{content:"\f8ea"}.bi-duffle::before{content:"\f8eb"}.bi-exposure::before{content:"\f8ec"}.bi-gender-neuter::before{content:"\f8ed"}.bi-highlights::before{content:"\f8ee"}.bi-luggage-fill::before{content:"\f8ef"}.bi-luggage::before{content:"\f8f0"}.bi-mailbox-flag::before{content:"\f8f1"}.bi-mailbox2-flag::before{content:"\f8f2"}.bi-noise-reduction::before{content:"\f8f3"}.bi-passport-fill::before{content:"\f8f4"}.bi-passport::before{content:"\f8f5"}.bi-person-arms-up::before{content:"\f8f6"}.bi-person-raised-hand::before{content:"\f8f7"}.bi-person-standing-dress::before{content:"\f8f8"}.bi-person-standing::before{content:"\f8f9"}.bi-person-walking::before{content:"\f8fa"}.bi-person-wheelchair::before{content:"\f8fb"}.bi-shadows::before{content:"\f8fc"}.bi-suitcase-fill::before{content:"\f8fd"}.bi-suitcase-lg-fill::before{content:"\f8fe"}.bi-suitcase-lg::before{content:"\f8ff"}.bi-suitcase::before{content:"\f900"}.bi-suitcase2-fill::before{content:"\f901"}.bi-suitcase2::before{content:"\f902"}.bi-vignette::before{content:"\f903"}
/* app/assets/stylesheets/layout.css
 *
 * Global column layout system of the app (loads on all pages via application.css):
 * - .layout grid: .two-column (list/content/panel, Tickets + Knowledge) and .kanban-layout;
 *   panel lane width via the CSS variable --panel-width
 * - Tickets-table behavior of the list column (compact/full mode, table-layout: fixed,
 *   column widths, uniform row heights)
 * - Kanban board including Dark-Mode rules, drag states and slide-over panel
 *
 * The old three-column layout (categories/SmartFolder sidebar, --cat-width/--list-width) was
 * removed in 06/2026 with the Knowledge-Filter rebuild (M5/M6) — every .layout is two-column.
 *
 * ATTENTION: rules apply globally without namespacing (incl. * box-sizing and html/body base).
 * History: was called labor.css until 06/2026 (inventory: doc/frontend_inventur_phase1_css.md). */
:root {
    --panel-raw:  300px; --panel-width:  var(--panel-raw);

    /* Page widths, named once (section "Page widths" below). A view names the
       class, never a number: spec/architecture/page_width_guard_spec.rb. */
    --width-capped: 620px;
    --width-capped-wide: 820px;
    --width-text: 70ch;
  }

  /* Focus, app-wide (designer, 08.09.2026): the blue ring is replaced, never
     switched off. Every operable element loses the ring for mouse and touch
     (:focus) and keeps an ink ring, set off by 2 px, for the keyboard
     (:focus-visible). The blue was never the browser's: the Tailwind forms
     plugin paints form controls with --tw-ring-color #2563eb and a blue
     border on focus, and its stylesheet loads AFTER this one, so the rules for
     those controls carry the html prefix to outrank it (0,2,1 over 0,2,0).
     For everything else :where() keeps the specificity at zero, so a
     component's own focus style still wins. A box gets ink as its fill and
     accent, because the plugin gives it a blue one of its own. */
  html :where(a, button, summary, [tabindex], [role="button"]):focus {
    outline: none;
  }
  html :where(a, button, summary, [tabindex], [role="button"]):focus-visible {
    outline: 2px solid rgb(var(--ink));
    outline-offset: 2px;
  }
  html [type='text']:focus, html [type='email']:focus, html [type='url']:focus, html [type='password']:focus,
  html [type='number']:focus, html [type='date']:focus, html [type='datetime-local']:focus, html [type='month']:focus,
  html [type='search']:focus, html [type='tel']:focus, html [type='time']:focus, html [type='week']:focus,
  html [type='checkbox']:focus, html [type='radio']:focus,
  html [multiple]:focus, html textarea:focus, html select:focus {
    outline: none;
    box-shadow: none;
    border-color: rgb(var(--cream-500));
  }
  html [type='text']:focus-visible, html [type='email']:focus-visible, html [type='url']:focus-visible, html [type='password']:focus-visible,
  html [type='number']:focus-visible, html [type='date']:focus-visible, html [type='datetime-local']:focus-visible, html [type='month']:focus-visible,
  html [type='search']:focus-visible, html [type='tel']:focus-visible, html [type='time']:focus-visible, html [type='week']:focus-visible,
  html [type='checkbox']:focus-visible, html [type='radio']:focus-visible,
  html [multiple]:focus-visible, html textarea:focus-visible, html select:focus-visible {
    outline: 2px solid rgb(var(--ink));
    outline-offset: 2px;
  }
  html [type='checkbox'],
  html [type='radio'] {
    color: rgb(var(--ink));
    accent-color: rgb(var(--ink));
  }

  @keyframes fadeSlideInRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes subtleHighlight {
    0%   { background-color: #ecfccb; }
    100% { background-color: transparent; }
  }

  * { box-sizing: border-box; }
  html, body { 
    margin: 0; 
    padding: 0; 
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #f5f5f5; 
    height: 100vh; /* Important for flexbox layout */
  }
  
  /* Note: .labor-layout-view still exists as a marker class in the markup
     (turbo_cache_controller.js, layout_toggle_controller.js), but carries no styles. */

  /* The empty modal mount frame sits as first child of the main content flex column.
     Without display:contents it is a zero-height flex item that still produces a gap,
     pushing every page header down. Modal content itself is a fixed overlay, so it
     renders identically without the frame generating a box. */
  main > div > turbo-frame#modal {
    display: contents;
  }

  /* Grid column definitions provide the .two-column/.kanban-layout variants
     (every .layout markup carries one of them) — here only the shared foundation. */
  .layout {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    column-gap: 24px;
    transition: --panel-width 0.4s ease;
  }

  /* ⚠️ The surface of a list-and-lane page belongs to the CONTENT AREA, and
     that area is <main> - not the grid inside it, and not the table inside
     that. It has been decided three times, and each answer was right about the
     question it was asked:

     (1) It sat on `.layout`, so the 24px column-gap would not let the page
         ground show through.
     (2) S1 removed it, correctly: back then `.column` padded the list 16px in,
         so the surface began ~32px right of the page title and WAS the box
         with the second left edge that "eine Kante pro Seite" exists to
         prevent.
     (3) It is here now because neither place covered the whole area. A surface
         on the grid still leaves main's 24px page inset showing the shell, so
         the reader saw three tones across one content area: inset cream-100,
         list cream-50, lane white - and the same seam again in the column gap
         (user, 07.09.2026, two screenshots).

     On <main> the page inset stops being a strip of shell and becomes an inset
     INSIDE the surface, which is what it always meant. Nothing moves: the page
     edge stays where the title, the tabs and the first row text already are,
     and the channel keeps separating the columns by distance rather than by a
     colour of its own.

     The board too, since it opens its ticket in the same lane (D1 of
     doc/kanban_ticket_als_bahn_plan.md, 09.09.2026): both views of the same
     page share the ground and the channel, the lane is the same white
     workbench in both, and the board's well keeps its own dark glaze on top.
     It used to be excluded ("its columns are cards ON the page ground"), a
     reason written for a page without a lane. */
  main:has(.layout) {
    background: rgb(var(--cream-50));
  }


  .column {
    padding: 1rem;
    /* ⚠️ The horizontal half of this is removed again for .column.list below.
       It is kept here for .content and .panel, which are surfaces of their own
       and need to hold their content off their edges. */
    position: relative;
    overflow: auto; /* Back to normal behavior */
    /* Smooth transitions for opacity */
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  /* Content column: same system as the other columns.
     Inherits the default behavior of .column: padding: 1rem; overflow: auto.

     The LEFT edge, and only the left one. The lane is told apart from the list
     by its tone, white against cream-50 - and that is about 2% of brightness.
     On a bright screen, with sun in the room or on a monitor nobody calibrated,
     that step is gone, and with it the only boundary between the list and the
     ticket: the ticket's text would then stand beside the table with nothing
     saying they are two things. So the boundary gets a fallback that does not
     depend on the surface at all.
     ⚠️ One line, not a frame: no top, right or bottom, no radius. A closed
     outline would make the lane a card on a workbench again, which is the
     thing the whole rebuild took away. --cream-200 is the divider token, so it
     follows every theme (dark: 46 40 32, a quiet dark line on a dark surface).
     The test: turn the screen's brightness up until the tone step is invisible.
     If the boundary is still there, it is built right.
     Hidden with the lane - .layout.hide-content .content is display:none. */
  .column.content {
    border-left: 1px solid rgb(var(--cream-200));
  }

  /* More breathing room at the top in the white area — both in the table header (list) and
     above the detail card (content). 2.5rem instead of 1rem. */
  .column.list,
  .column.content {
    padding-top: 2.5rem;
  }

  /* The rebuilt list-and-lane layout (the ticket list since 07.09.2026, where
     the page title lives INSIDE the list column). One decision, so one
     modifier - a page either is built this way or it is not.

     (1) The grid starts at the very top of the content area. Two things give
     way for that: the layout's own top padding (main: py-4), cancelled by a
     negative margin - without it a strip of page ground stands above the
     detail lane, and the lane is a column of the page, not a box placed on
     it; and the columns' generous padding-top (1.75rem list / 2.5rem
     content), which was breathing room ABOVE content that began with a table
     header or a detail card. Here the column begins with the page title, and
     a title sits 1rem below the top edge on every other page in the app.

     (2) ONE inset, and the lane carries it. 24px from the lane's own left
     edge to the identifier, the title, the attribute row and the running
     text - the same 24px main:lg:px-6 gives the list column, whose left edge
     IS the page's. The channel between the two columns stays on top of that:
     it is distance BETWEEN surfaces, not inside one.

     Scoped to the modifier: tickets, knowledge and meetings all keep their
     page head inside the list column and carry this modifier. */
  .layout--lane {
    margin-top: -1rem;
  }

  /* ⚠️ !important, and the `.column-spacing-sm` twin in the selector, because
     that class sets `padding-top: 2.5rem !important` on BOTH columns and
     !important does not lose to specificity. Without them this rule was quietly
     dead on the lane: it read 1rem and the lane went on standing 40px down. */
  .layout--lane .column.list,
  .layout--lane .column.list.column-spacing-sm {
    padding-top: 1rem !important;
  }

  /* ONE inset for the lane, the same on every side (user, 07.09.2026). The
     lane is a surface, so it holds its content off ITS edges evenly - top like
     left like right - and 24px is the value the list already gets from main's
     page inset.
     ⚠️ That puts the object's identifier 8px lower than the page title beside
     it, where the two stood level before. Deliberate: an even inset is a rule
     one can see everywhere on the surface, the shared baseline was a rule one
     could only see at one spot. */
  .layout--lane .column.content,
  .layout--lane .column.content.column-spacing-sm {
    padding: 1.5rem !important;
  }

  /* One page edge: the list's first text starts where the page title does, not
     16px in. The detail and panel keep their padding - they are raised
     surfaces, this one is not.

     ⚠️ And NO surface of its own: it lies on the content area's (see
     `main:has(.layout...)` above). A tone here would cover the column and stop
     at its edges, leaving main's page inset and the column gap showing the
     shell - and two rules carrying one tone drift apart. */
  .column.list {
    padding-left: 0;
    padding-right: 0;
  }

  /* Layout column spacing - for consistent padding values */
  .column-spacing-sm { padding-top: 2.5rem !important; } /* breathing room at the top in the white area */

  /* List: table header labels should sit visually flush with the top edge of the detail box.
     The detail-box border starts at 2.5rem, the table header has its own padding (~0.4rem) +
     half the text height (~7px) before the visual label line comes. Hence the list has less padding. */
  .column.list.column-spacing-sm { padding-top: 1.75rem !important; }
  
  /* Header compact class - removed for consistent width with posts */

  /* List columns: hide scrollbars (duplicated until 06/2026 as <style> blocks
     in the index views). #documents-list lives on the
     documents/new full page (_document_list frame). */
  .column.list::-webkit-scrollbar,
  #tickets-list::-webkit-scrollbar,
  #documents-list::-webkit-scrollbar,
  #knowledge-list::-webkit-scrollbar,
  #meetings-list::-webkit-scrollbar,
  .column.list *::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbars for Firefox */
  .column.list,
  #tickets-list,
  #documents-list,
  #knowledge-list,
  #meetings-list,
  .column.list * {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* Hover arrows for columns */
  .hover-arrow {
    position: fixed;
    font-size: 16px;
    color: #9ca3af; /* gray-400 */
    font-weight: normal;
    z-index: 70; /* popover */
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
    padding: 5px 10px;
  }

  .hover-arrow:hover {
    color: #4b5563; /* gray-600 */
  }

  /* Ticket Action Button Styles */
  .ticket-card:hover .ticket-action-button {
    opacity: 1;
  }

  .ticket-header-section:hover .ticket-action-button {
    opacity: 1;
  }

  /* The toggle-active/-inactive pair (strikethrough switch buttons) is gone:
     the timeline visibility switches are aria-pressed chips since T3 of the
     ticket detail redesign, and no other surface used the classes. */

  /* Post Card Styles */
  .post-card:hover .post-tool,
  .post-card:focus-within .post-tool,
  .post-tool.dropdown--open {
    opacity: 1;
  }

  .post-head { min-height: 24px; }
  .post-meta { flex: 0 1 auto; overflow: hidden; white-space: nowrap; }
  .post-meta > * { overflow: hidden; text-overflow: ellipsis; }
  .post-reactions { display: flex; align-items: center; flex: 1 0 auto; min-width: 0; gap: 8px; }
  .post-reaction-chips { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .post-reaction-chips:empty { display: none; }
  .post-reaction-chip {
    display: inline-flex; height: 24px; flex-shrink: 0; align-items: center; gap: 4px;
    padding: 0 8px; border: 1px solid transparent; border-radius: 999px;
    font-size: 13px; line-height: 1; white-space: nowrap;
    background: var(--post-reaction-fill, #EDE9DD); color: rgb(var(--cream-700));
    touch-action: manipulation; -webkit-touch-callout: none; user-select: none;
  }
  .dark .post-reactions { --post-reaction-fill: rgb(var(--cream-200)); }
  .post-reaction-chip--selected {
    background: rgb(var(--selected-row)); border-color: rgb(var(--cream-600));
  }
  .post-reaction-chip:focus-visible { outline: 2px solid rgb(var(--cream-600)); outline-offset: -2px; }
  .post-reaction-picker { margin-left: auto; flex-shrink: 0; }
  .post-tool { opacity: 0; }
  .post-edit-button { margin-left: auto; }
  .post-reactions + .post-edit-button { margin-left: 0; }
  .post-reaction-trigger {
    display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center;
    border: 0; border-radius: 6px; background: transparent; color: rgb(var(--cream-600));
  }
  .post-reaction-trigger:hover, .post-reaction-trigger:focus-visible,
  .post-reaction-trigger[aria-expanded="true"] { background: rgb(var(--selected-row)); }
  .post-reaction-trigger:focus-visible { outline: 1px solid rgb(var(--cream-600)); }
  .post-reaction-menu[popover] { position: fixed; margin: 0; width: max-content; }
  .post-reaction-option {
    display: inline-flex; height: 36px; width: 36px; align-items: center; justify-content: center;
    border-radius: 6px; font-size: 20px;
  }
  .post-reaction-option:hover, .post-reaction-option:focus-visible,
  .post-reaction-option--selected { background: rgb(var(--selected-row)); }
  .post-reaction-option:focus-visible { outline: 1px solid rgb(var(--cream-600)); }
  .post-reaction-tooltip {
    position: fixed; inset: auto; margin: 0; max-width: min(320px, calc(100vw - 16px));
    padding: 6px 10px; border: 1px solid rgb(var(--cream-400)); border-radius: 6px;
    background: rgb(var(--white)); color: rgb(var(--cream-800)); font-size: 12px;
    pointer-events: none; z-index: 100;
  }
  @media (max-width: 639px) {
    /* Keep the tools and existing reactions present when names/edited markers
       are long. More than two chips scroll within the same header, never wrap. */
    .post-reaction-chips { max-width: 100px; }
    .post-tool { opacity: 1; }
  }
  @media (hover: none), (pointer: coarse) {
    .post-tool { opacity: 1; }
    .post-reaction-trigger { width: 36px; position: relative; }
    .post-reaction-trigger::after { content: ''; position: absolute; inset: -10px -4px; }
    .post-reaction-option { height: 44px; width: 44px; }
  }

  /* (The hover-reveal of the note and document pencils went with the lane
     head, S3 of doc/wissen_als_bahn_plan.md: the pencil stands in the
     chrome row at one rank with the ✕, always visible, never faded.) */

  /* The list is the REGISTER and lies on the page ground; the detail is the
     WORKBENCH one works an object on, and carries the raised surface - the
     same distinction the times list's filter stripe draws. */
  .content {
    background: rgb(var(--white));
    padding-top: 2.5rem; /* More breathing room at the top above the detail card */
    position: relative;
  }
  /* Scoped to .layout (second-review finding on the rename): "panel" is about
     the most generic class name there is, and this file loads on every page.
     The lane always sits inside a .layout grid, so this changes nothing for
     the lane -- it only stops a future unrelated class="panel" from inheriting
     a light-blue background app-wide. */
  .layout .panel {
    background: #f0f8ff; /* Light blue as background */
    position: relative;
  }

  .icon-button {
    font-size: 20px; background: none; border: none;
    cursor: pointer; padding: 4px;
    /* Make sure buttons sit above the content if needed */
    z-index: 10;
  }

  /* --- Button visibility & positioning --- */

  /* Panel close button (third lane of the two-column grids); scoped to
     .layout for the same reason as .panel above. */
  .layout .panel .panel-close {
    position: absolute;
    top: 8px;
    display: none; /* Hidden by default */
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.2s;
  }

  /* Content close bar: hidden, replaced by the inline close button */
  .content .content-close-bar {
    display: none !important;
  }
  .content .content-close-text-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 10px;
    font-size: 10px;
    font-weight: 500;
    color: #555;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .content .content-close-text-btn:hover {
    background: #e8e8e8;
    color: #000;
    border-color: #bbb;
  }
  .content .content-close-text-btn i {
    font-size: 11px;
  }
  .layout .panel .panel-close { right: 8px; }

  .layout:not(.hide-panel) .panel .panel-close {
    display: block;
  }

  /* --- Hide logic for columns ---
     Grid column changes define the .two-column variants further below;
     here only the visibility mechanics of the column contents. */

  /* Hide list (full-screen detail via hover-arrow/toggleList) */
  .layout.hide-list .list {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
    padding: 0;
  }

  .layout.hide-panel .panel {
    display: none;
  }

  .layout.hide-content .content {
    display: none; /* Hide completely, since the list expands */
  }

  /* Entrance slide for the detail column. Fill-mode is deliberately OMITTED.
     With `both`/`forwards` the column would keep the end keyframe's
     `transform: translateX(0)` after the animation. Any non-none transform
     turns .content into the containing block for position:fixed descendants
     AND opens a new stacking context — which traps the inline move-ticket
     modal (rendered inside #ticket-header in this very column) inside the
     scrollable pane instead of the viewport, so its backdrop/card get clipped
     and become unclickable. Without a forwards fill the transform clears after
     0.3s (base transform: none), so fixed descendants anchor to the viewport.
     Guarded by spec/views/content_column_fixed_trap_guard_spec.rb. */
  .layout:not(.hide-content) .content {
    animation: fadeSlideInRight 0.3s ease;
  }


  /* ---- The meta line under the title (designer, 07.09.2026, § 4) ----
     The values of the columns the width could not carry. An item shows exactly
     when its CELL has gone, so the same value is never in a row twice - which
     is the rule the old version was missing, and why it made rows three and
     four lines high before it was removed this morning.
     ⚠️ Two rules per fit value, because CSS cannot compare "rank" with "fit".
     Enumerating them is the price of keeping the values server-rendered: the
     alternative was building this line in JavaScript, which would make the
     content of a row two truths instead of one.
     The separator is a `::before` on every item that HAS a visible predecessor
     (the `~` combinator), so the first visible one never carries a leading
     middot - not even when the items before it were left out for having no
     value.
     Two ways out, two signs (29.09.2026): `hidden` = the column is not pinned,
     decided with the row; `:empty` = the pinned column has no value. The
     second changes without the row - a sub-ticket's write updates only the
     item's text on its parent (TicketListColumns#ticket_list_parent_streams),
     and a text update cannot set or clear an attribute. */
  .ticket-meta {
    line-height: 1.35;
  }

  .ticket-meta__item {
    display: none;
  }

  .ticket-meta__item::before {
    margin: 0 0.35em;
    color: rgb(var(--cream-400));
  }

  .list table[data-fit="0"] .ticket-meta__item:nth-child(n+1):not([hidden]):not(:empty) {
    display: inline;
  }

  .list table[data-fit="0"] .ticket-meta__item:nth-child(n+1):not([hidden]):not(:empty) ~ .ticket-meta__item:not([hidden]):not(:empty)::before {
    content: "·";
  }

  .list table[data-fit="1"] .ticket-meta__item:nth-child(n+2):not([hidden]):not(:empty) {
    display: inline;
  }

  .list table[data-fit="1"] .ticket-meta__item:nth-child(n+2):not([hidden]):not(:empty) ~ .ticket-meta__item:not([hidden]):not(:empty)::before {
    content: "·";
  }

  .list table[data-fit="2"] .ticket-meta__item:nth-child(n+3):not([hidden]):not(:empty) {
    display: inline;
  }

  .list table[data-fit="2"] .ticket-meta__item:nth-child(n+3):not([hidden]):not(:empty) ~ .ticket-meta__item:not([hidden]):not(:empty)::before {
    content: "·";
  }

  .list table[data-fit="3"] .ticket-meta__item:nth-child(n+4):not([hidden]):not(:empty) {
    display: inline;
  }

  .list table[data-fit="3"] .ticket-meta__item:nth-child(n+4):not([hidden]):not(:empty) ~ .ticket-meta__item:not([hidden]):not(:empty)::before {
    content: "·";
  }

  .list table[data-fit="4"] .ticket-meta__item:nth-child(n+5):not([hidden]):not(:empty) {
    display: inline;
  }

  .list table[data-fit="4"] .ticket-meta__item:nth-child(n+5):not([hidden]):not(:empty) ~ .ticket-meta__item:not([hidden]):not(:empty)::before {
    content: "·";
  }

  .list table[data-fit="5"] .ticket-meta__item:nth-child(n+6):not([hidden]):not(:empty) {
    display: inline;
  }

  .list table[data-fit="5"] .ticket-meta__item:nth-child(n+6):not([hidden]):not(:empty) ~ .ticket-meta__item:not([hidden]):not(:empty)::before {
    content: "·";
  }

  .list table[data-fit="6"] .ticket-meta__item:nth-child(n+7):not([hidden]):not(:empty) {
    display: inline;
  }

  .list table[data-fit="6"] .ticket-meta__item:nth-child(n+7):not([hidden]):not(:empty) ~ .ticket-meta__item:not([hidden]):not(:empty)::before {
    content: "·";
  }

  .list table[data-fit="7"] .ticket-meta__item:nth-child(n+8):not([hidden]):not(:empty) {
    display: inline;
  }

  .list table[data-fit="7"] .ticket-meta__item:nth-child(n+8):not([hidden]):not(:empty) ~ .ticket-meta__item:not([hidden]):not(:empty)::before {
    content: "·";
  }

  .list table[data-fit="8"] .ticket-meta__item:nth-child(n+9):not([hidden]):not(:empty) {
    display: inline;
  }

  .list table[data-fit="8"] .ticket-meta__item:nth-child(n+9):not([hidden]):not(:empty) ~ .ticket-meta__item:not([hidden]):not(:empty)::before {
    content: "·";
  }

  .list table[data-fit="9"] .ticket-meta__item:nth-child(n+10):not([hidden]):not(:empty) {
    display: inline;
  }

  .list table[data-fit="9"] .ticket-meta__item:nth-child(n+10):not([hidden]):not(:empty) ~ .ticket-meta__item:not([hidden]):not(:empty)::before {
    content: "·";
  }

  .list table[data-fit="10"] .ticket-meta__item:nth-child(n+11):not([hidden]):not(:empty) {
    display: inline;
  }

  .list table[data-fit="10"] .ticket-meta__item:nth-child(n+11):not([hidden]):not(:empty) ~ .ticket-meta__item:not([hidden]):not(:empty)::before {
    content: "·";
  }

  .list table[data-fit="11"] .ticket-meta__item:nth-child(n+12):not([hidden]):not(:empty) {
    display: inline;
  }

  .list table[data-fit="11"] .ticket-meta__item:nth-child(n+12):not([hidden]):not(:empty) ~ .ticket-meta__item:not([hidden]):not(:empty)::before {
    content: "·";
  }

  .list table[data-fit="12"] .ticket-meta__item:nth-child(n+13):not([hidden]):not(:empty) {
    display: inline;
  }

  .list table[data-fit="12"] .ticket-meta__item:nth-child(n+13):not([hidden]):not(:empty) ~ .ticket-meta__item:not([hidden]):not(:empty)::before {
    content: "·";
  }


  /* ---- Column fit (doc/spaltenwahl_plan.md, S1) ----
     One ordered column list per view. How many of its ranked columns fit into
     the header row is measured by lib/column_picker/fit.js and written on the
     table as data-fit; the server writes the first value (all ranked columns
     with the detail closed, one with it open) so nothing flashes before the
     script has measured. A cell shows while its rank is within the fit and is
     DROPPED beyond it - a row stays one line. Until 07.09.2026 every ranked
     field was in the row twice, the second copy stacking under the title once
     its column had gone, which turned every row into three or four lines the
     moment the detail opened. Hidden cells keep width 0 instead of
     display:none: table-layout:fixed counts display:none cells as column
     slots anyway and hands them "auto" width. The rules stop at rank 12;
     more chosen columns than that is not a list anyone reads. */
  /* A ranked column leaves and comes back by width, not by a jump (user,
     07.09.2026): the width and the padding ease to and from zero, the content
     fades, and visibility (for the reader of a screen reader) flips only when
     the column has closed. The hidden state below carries the delayed
     visibility; this base state flips it back at once when a column returns. */
  .list table th[data-rank],
  .list table td[data-rank] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease, visibility 0s;
  }

  /* The column a panel row points at (column_picker_controller#highlight): its
     header cell, its cells, or its items below the title, tinted while the
     pointer or the focus rests on the row. Beats the row hover's inherit. */
  .list table th[data-column],
  .list table td[data-column] {
    transition: background-color 0.15s ease;
  }

  .list table th.column-highlight,
  .list table td.column-highlight,
  .ticket-row:hover td.column-highlight {
    background-color: rgb(var(--cream-200));
  }

  @media (prefers-reduced-motion: reduce) {
    .list table th[data-rank],
    .list table td[data-rank] {
      transition: none;
    }
  }

  /* Compact date format for the narrow view */
  .date-compact {
    display: none;
  }

  /* Show the compact date format when the content is visible */
  .layout:not(.hide-content) .date-compact {
    display: inline;
  }

  /* Hide the full date format when the content is visible */
  .layout:not(.hide-content) .date-full {
    display: none;
  }

  /* Hide type labels (note/document) in the compact list view */
  .layout:not(.hide-content) .type-label {
    display: none;
  }

  /* A list cell shows a DATE, never a clock (user, 07.09.2026). It used to
     depend on the mode and on a 1400px media query, so the same column said
     "25.06.2026 18:12" on one screen and "25.06.2026" on the next.
     This works only because display_time_split puts the clock in its own span;
     the reader's date format (user preferences, per area) is untouched. */
  .list table .date-time-part {
    display: none;
  }

  /* Compact mode: table-layout: fixed so that column widths are predictable */
  .layout:not(.hide-content) .list table {
    table-layout: fixed;
  }

  /* Reset: neutralize all Tailwind min-width/width utilities in compact mode,
     so that table-layout:fixed fully controls the column widths */
  .layout:not(.hide-content) .list table th,
  .layout:not(.hide-content) .list table td {
    min-width: 0 !important;
    max-width: none;
  }

  /* No compact width for the number column any more: it is 48px in both modes
     (see ".list table .number-header" further down). The content is the same
     in both, so a second value here was a rule to keep in step for nothing. */

  /* Title fills the remaining space (width:auto overrides 35% from full mode) */
  .layout:not(.hide-content) .list table .title-header,
  .layout:not(.hide-content) .list table .title-column {
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Compact mode: a ranked column is as wide as its minimum (--col-min from
     ViewConfiguration::COLUMN_MIN_WIDTH_PX, set inline on th and td), the
     same number the fit rule counted with. */
  /* No !important here: the hide rules below (width 0 for a rank beyond the
     fit) are less specific and must win; with both important, this one won
     and the hidden columns kept their width next to an open detail. */
  .layout:not(.hide-content) .list table th[data-rank],
  .layout:not(.hide-content) .list table td[data-rank] {
    width: var(--col-min, 100px);
  }

  /* Full mode (the lane shut): a ranked column is its share of the table
     (--col-share, set by column_min_width_style next to the minimum); the
     title, width auto, takes the rest. The status column's share is 14%, not
     10%: "In Bearbeitung" was cut at a tenth of the table while the title had
     room, and a value is not cut while a neighbour has room, the title is cut
     last (designer, 09.09.2026). Fixed table layout reads WIDTH alone: a
     min-width on the cell is dead there (the min-w classes that stood beside
     the shares never did anything), and Blink treats max()/calc() with a
     percentage on a cell as auto, which made every column equal. So the share
     is the whole width here; --col-min counts in compact mode and in the fit. */
  .layout.hide-content .list table th[data-rank] {
    width: var(--col-share, 10%);
  }

  .list table[data-fit="0"] th[data-rank="1"],
  .list table[data-fit="0"] td[data-rank="1"],
  .list table[data-fit="0"] th[data-rank="2"],
  .list table[data-fit="0"] td[data-rank="2"],
  .list table[data-fit="0"] th[data-rank="3"],
  .list table[data-fit="0"] td[data-rank="3"],
  .list table[data-fit="0"] th[data-rank="4"],
  .list table[data-fit="0"] td[data-rank="4"],
  .list table[data-fit="0"] th[data-rank="5"],
  .list table[data-fit="0"] td[data-rank="5"],
  .list table[data-fit="0"] th[data-rank="6"],
  .list table[data-fit="0"] td[data-rank="6"],
  .list table[data-fit="0"] th[data-rank="7"],
  .list table[data-fit="0"] td[data-rank="7"],
  .list table[data-fit="0"] th[data-rank="8"],
  .list table[data-fit="0"] td[data-rank="8"],
  .list table[data-fit="0"] th[data-rank="9"],
  .list table[data-fit="0"] td[data-rank="9"],
  .list table[data-fit="0"] th[data-rank="10"],
  .list table[data-fit="0"] td[data-rank="10"],
  .list table[data-fit="0"] th[data-rank="11"],
  .list table[data-fit="0"] td[data-rank="11"],
  .list table[data-fit="0"] th[data-rank="12"],
  .list table[data-fit="0"] td[data-rank="12"] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }
  .list table[data-fit="1"] th[data-rank="2"],
  .list table[data-fit="1"] td[data-rank="2"],
  .list table[data-fit="1"] th[data-rank="3"],
  .list table[data-fit="1"] td[data-rank="3"],
  .list table[data-fit="1"] th[data-rank="4"],
  .list table[data-fit="1"] td[data-rank="4"],
  .list table[data-fit="1"] th[data-rank="5"],
  .list table[data-fit="1"] td[data-rank="5"],
  .list table[data-fit="1"] th[data-rank="6"],
  .list table[data-fit="1"] td[data-rank="6"],
  .list table[data-fit="1"] th[data-rank="7"],
  .list table[data-fit="1"] td[data-rank="7"],
  .list table[data-fit="1"] th[data-rank="8"],
  .list table[data-fit="1"] td[data-rank="8"],
  .list table[data-fit="1"] th[data-rank="9"],
  .list table[data-fit="1"] td[data-rank="9"],
  .list table[data-fit="1"] th[data-rank="10"],
  .list table[data-fit="1"] td[data-rank="10"],
  .list table[data-fit="1"] th[data-rank="11"],
  .list table[data-fit="1"] td[data-rank="11"],
  .list table[data-fit="1"] th[data-rank="12"],
  .list table[data-fit="1"] td[data-rank="12"] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }
  .list table[data-fit="2"] th[data-rank="3"],
  .list table[data-fit="2"] td[data-rank="3"],
  .list table[data-fit="2"] th[data-rank="4"],
  .list table[data-fit="2"] td[data-rank="4"],
  .list table[data-fit="2"] th[data-rank="5"],
  .list table[data-fit="2"] td[data-rank="5"],
  .list table[data-fit="2"] th[data-rank="6"],
  .list table[data-fit="2"] td[data-rank="6"],
  .list table[data-fit="2"] th[data-rank="7"],
  .list table[data-fit="2"] td[data-rank="7"],
  .list table[data-fit="2"] th[data-rank="8"],
  .list table[data-fit="2"] td[data-rank="8"],
  .list table[data-fit="2"] th[data-rank="9"],
  .list table[data-fit="2"] td[data-rank="9"],
  .list table[data-fit="2"] th[data-rank="10"],
  .list table[data-fit="2"] td[data-rank="10"],
  .list table[data-fit="2"] th[data-rank="11"],
  .list table[data-fit="2"] td[data-rank="11"],
  .list table[data-fit="2"] th[data-rank="12"],
  .list table[data-fit="2"] td[data-rank="12"] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }
  .list table[data-fit="3"] th[data-rank="4"],
  .list table[data-fit="3"] td[data-rank="4"],
  .list table[data-fit="3"] th[data-rank="5"],
  .list table[data-fit="3"] td[data-rank="5"],
  .list table[data-fit="3"] th[data-rank="6"],
  .list table[data-fit="3"] td[data-rank="6"],
  .list table[data-fit="3"] th[data-rank="7"],
  .list table[data-fit="3"] td[data-rank="7"],
  .list table[data-fit="3"] th[data-rank="8"],
  .list table[data-fit="3"] td[data-rank="8"],
  .list table[data-fit="3"] th[data-rank="9"],
  .list table[data-fit="3"] td[data-rank="9"],
  .list table[data-fit="3"] th[data-rank="10"],
  .list table[data-fit="3"] td[data-rank="10"],
  .list table[data-fit="3"] th[data-rank="11"],
  .list table[data-fit="3"] td[data-rank="11"],
  .list table[data-fit="3"] th[data-rank="12"],
  .list table[data-fit="3"] td[data-rank="12"] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }
  .list table[data-fit="4"] th[data-rank="5"],
  .list table[data-fit="4"] td[data-rank="5"],
  .list table[data-fit="4"] th[data-rank="6"],
  .list table[data-fit="4"] td[data-rank="6"],
  .list table[data-fit="4"] th[data-rank="7"],
  .list table[data-fit="4"] td[data-rank="7"],
  .list table[data-fit="4"] th[data-rank="8"],
  .list table[data-fit="4"] td[data-rank="8"],
  .list table[data-fit="4"] th[data-rank="9"],
  .list table[data-fit="4"] td[data-rank="9"],
  .list table[data-fit="4"] th[data-rank="10"],
  .list table[data-fit="4"] td[data-rank="10"],
  .list table[data-fit="4"] th[data-rank="11"],
  .list table[data-fit="4"] td[data-rank="11"],
  .list table[data-fit="4"] th[data-rank="12"],
  .list table[data-fit="4"] td[data-rank="12"] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }
  .list table[data-fit="5"] th[data-rank="6"],
  .list table[data-fit="5"] td[data-rank="6"],
  .list table[data-fit="5"] th[data-rank="7"],
  .list table[data-fit="5"] td[data-rank="7"],
  .list table[data-fit="5"] th[data-rank="8"],
  .list table[data-fit="5"] td[data-rank="8"],
  .list table[data-fit="5"] th[data-rank="9"],
  .list table[data-fit="5"] td[data-rank="9"],
  .list table[data-fit="5"] th[data-rank="10"],
  .list table[data-fit="5"] td[data-rank="10"],
  .list table[data-fit="5"] th[data-rank="11"],
  .list table[data-fit="5"] td[data-rank="11"],
  .list table[data-fit="5"] th[data-rank="12"],
  .list table[data-fit="5"] td[data-rank="12"] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }
  .list table[data-fit="6"] th[data-rank="7"],
  .list table[data-fit="6"] td[data-rank="7"],
  .list table[data-fit="6"] th[data-rank="8"],
  .list table[data-fit="6"] td[data-rank="8"],
  .list table[data-fit="6"] th[data-rank="9"],
  .list table[data-fit="6"] td[data-rank="9"],
  .list table[data-fit="6"] th[data-rank="10"],
  .list table[data-fit="6"] td[data-rank="10"],
  .list table[data-fit="6"] th[data-rank="11"],
  .list table[data-fit="6"] td[data-rank="11"],
  .list table[data-fit="6"] th[data-rank="12"],
  .list table[data-fit="6"] td[data-rank="12"] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }
  .list table[data-fit="7"] th[data-rank="8"],
  .list table[data-fit="7"] td[data-rank="8"],
  .list table[data-fit="7"] th[data-rank="9"],
  .list table[data-fit="7"] td[data-rank="9"],
  .list table[data-fit="7"] th[data-rank="10"],
  .list table[data-fit="7"] td[data-rank="10"],
  .list table[data-fit="7"] th[data-rank="11"],
  .list table[data-fit="7"] td[data-rank="11"],
  .list table[data-fit="7"] th[data-rank="12"],
  .list table[data-fit="7"] td[data-rank="12"] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }
  .list table[data-fit="8"] th[data-rank="9"],
  .list table[data-fit="8"] td[data-rank="9"],
  .list table[data-fit="8"] th[data-rank="10"],
  .list table[data-fit="8"] td[data-rank="10"],
  .list table[data-fit="8"] th[data-rank="11"],
  .list table[data-fit="8"] td[data-rank="11"],
  .list table[data-fit="8"] th[data-rank="12"],
  .list table[data-fit="8"] td[data-rank="12"] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }
  .list table[data-fit="9"] th[data-rank="10"],
  .list table[data-fit="9"] td[data-rank="10"],
  .list table[data-fit="9"] th[data-rank="11"],
  .list table[data-fit="9"] td[data-rank="11"],
  .list table[data-fit="9"] th[data-rank="12"],
  .list table[data-fit="9"] td[data-rank="12"] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }
  .list table[data-fit="10"] th[data-rank="11"],
  .list table[data-fit="10"] td[data-rank="11"],
  .list table[data-fit="10"] th[data-rank="12"],
  .list table[data-fit="10"] td[data-rank="12"] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }
  .list table[data-fit="11"] th[data-rank="12"],
  .list table[data-fit="11"] td[data-rank="12"] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }

  /* The number column, in BOTH modes. It holds "#20", at most "#1234" - four or
     five characters of mono that never grow with the window, so it gets a
     length and not a share: 8% of a wide table reserved well over 100px for
     them, and needed a second rule (60px) to be sensible again once the lane
     opened.
     48px is the number and its unread dot, nothing else: the GAP to the title
     is the title cell's own left padding, once (6px), instead of a slack
     column plus two paddings on top of each other (user, 07.09.2026 - the
     title is meant to sit right beside its number, at every width).
     ⚠️ What sets the floor is not the digits but the unread dot behind them:
     "#9999" plus the 8px dot is 47px, with NO space between them (the row
     partial writes them without one). The cell clips, and it clips the dot
     first. At 38px every three-digit ticket lost its dot entirely, because a
     line break in the markup put a space in front of it (found 29.09.2026).
     Guard: spec/system/ticket_list_unread_dot_spec.rb measures it.
     ⚠️ ViewConfiguration::COLUMN_MIN_WIDTH_PX['number'] repeats this value.
     ⚠️ min-width too, or Tailwind's min-w-[80px] on the header cell puts the
     old width back from the markup side. */
  .list table .number-header,
  .list table .number-column {
    width: 48px;
    min-width: 48px;
  }

  /* Title in full mode: it takes what the other columns leave. It was 35%
     until 08.09.2026, and in a fixed-layout table the leftover then flowed
     into the PIXEL columns: with two ranked columns shown the number column
     measured 315px for a two-digit number, and the selection box column
     (doc/ticket_bulk_edit_plan.md, slice 1) inflated the same way. Percent
     and --col-min columns kept their widths; only the title can take the rest. */
  .list table .title-header,
  .list table .title-column {
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal; /* Title column may be multi-line (title + compact metadata) */
  }

  /* Table — no top border (the header carries the visual separation); the bottom line closes off the table */
  /* ⚠️ NO surface of its own. It painted cream-50 on the shell's cream-100, so
     the list read as a lighter card inside a darker frame - and the card was
     table-shaped, which is why its head rule ended at a card width instead of
     at the column's. The tone belongs to the content area (see
     `main:has(.layout...)` at the top of this file); the rows lie on it, hover
     (cream-100) and selection (cream-200) still a step up from it. */
  .list table {
    border: none !important;
    border-bottom: 1px solid #000000 !important;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0;
    overflow: hidden;
  }

  /* The row divider. rgba(0,0,0,0.08) was so faint that on a bright screen the
     rows ran into one another; cream-300 is the app's own edge token, a touch
     stronger and warm like everything around it (designer, 07.09.2026). */
  .list table td {
    border-bottom: 1px solid rgb(var(--cream-300)) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
  }

  .list table th {
    border-bottom: 1px solid black !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
  }

  .list table tr:last-child td {
    border-bottom: none !important;
  }
  
  /* Adjustments for the header area */
  .title-header {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Table head — Mono + medium weight. cream-600, not a slate: slate is a COOL
     grey, and it was the one cool thing left on a warm surface (designer,
     07.09.2026). The token also keeps the head readable in the dark theme,
     where a fixed #334155 would be a dark grey on a dark ground. */
  .list table th {
    font-weight: 500;
    color: rgb(var(--cream-600));
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }
  
  /* Set the table to full width */
  .list table {
    width: 100%;
    table-layout: fixed;
  }

  /* Exception: time-tracking tables (time_session_groups) need auto layout,
     so that columns orient themselves to the content — overrides the fixed of the .list tables.
     (Lived until 06/2026 as a counter-override in application.css.) */
  .time-session-table {
    table-layout: auto !important;
  }
  
  /*
   * IMPORTANT: Uniform row height for the ticket table.
   * white-space/overflow prevent long cell content (e.g. assignees, status badges)
   * from making the row taller than 3.5rem. CSS height on <td> only acts as min-height —
   * without nowrap + overflow: hidden, rows would wrap on long text and bloat.
   * Exception: .title-column has white-space: normal (title + compact metadata = 2 rows).
   */
  .list table tr td {
    height: 3.5rem !important;
    max-height: 3.5rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: middle !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Make sure the row height stays uniform even when switching between content modes */
  .list table tr {
    box-sizing: border-box;
    height: 3.5rem !important;
    min-height: 3.5rem !important;
  }
  
  /* Hover effect for ticket rows */
  .ticket-row {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .ticket-row:hover {
    transform: translateX(2px);
    background-color: rgb(var(--cream-100)); /* warm (cream-100) instead of cool #fafafa */
  }

  .ticket-row:hover td {
    background-color: inherit;
  }

  /* The open row, on every list page with a lane (tickets, knowledge): ONE
     class, .selected-row, written by the server row and by
     list_row_controller alike (S2 of doc/wissen_als_bahn_plan.md). The token
     flips with the theme (WS-3). It used to be .ticket-row.selected-ticket,
     and the knowledge row marked itself with six Tailwind classes of its own. */
  .selected-row {
    background-color: rgb(var(--selected-row));
  }

  .selected-row:hover {
    background-color: rgb(var(--selected-row-hover));
  }


/* ========================
   Page widths
   ======================== */

/* Three classes, one question: does the reader compare columns downwards, or
   read rows across? Comparing needs width: a table, the board and every
   list-and-lane page carry no cap. Reading needs a limit: a page where each
   row holds ONE thing with ONE value is capped, at 620 px, or at 820 px when
   its rows carry a glyph or a time column. Running text stays at 70ch in
   every class.

   The cap ENDS a block earlier, it never starts it elsewhere. No margin auto:
   the block stays on the page edge that title, tabs and tools share
   (one_page_edge_guard_spec), and the white space on its right is the
   pattern, not a gap to fill. The cap sits on the content block, never on
   the shell: on <main> it would squeeze the split views as well. The page
   head (title, tabs, title action) stays full width, because one tab bar
   serves capped and full pages of the same area. */
.width-capped {
  max-width: var(--width-capped);
}
.width-capped--wide {
  max-width: var(--width-capped-wide);
}
.width-text {
  max-width: var(--width-text);
}

/* The split replaces the limit. A capped list in a lane layout whose lane is
   open takes the track the split gives it; capped, it would leave a gap
   between itself and the lane whenever the split is dragged wider than the
   cap. The activity feed is the case: capped while its lane is shut. */
.layout--lane:not(.hide-content) :is(.width-capped, .width-capped--wide) {
  max-width: none;
}

/* ========================
   Two-Column Layout (no categories sidebar)
   Used by Tickets index with unified filter bar
   ======================== */

/* Master-detail pages (Tickets table / Knowledge / Meetings) are an app shell: the
   .layout grid fills the viewport (its height is set live by layout_toggle_controller).
   The generic page wrapper still carries Tailwind's mb-6 which, stacked under a
   viewport-tall grid, would push a ~16px scrollbar past the fold. Drop it so the gap
   below the grid equals the left gutter (main lg:px-6 = 1.5rem). The board is
   on the same grid since it opens its ticket in the lane (D1), viewport-filled
   like the table, and drops the margin too. */
main:has(.layout) > div {
  margin-bottom: 0;
}

.layout.two-column {
  grid-template-columns: minmax(380px, 2fr) 3fr var(--panel-width, var(--panel-raw));
}
.layout.two-column.hide-panel {
  grid-template-columns: minmax(380px, 2fr) 3fr;
}

/* A lane layout's split is DRAGGED, so the list track is one number instead of
   a ratio: --list-split, written by lane_split_controller and read here and by
   the handle alike. The fallback keeps roughly the old 2fr:3fr for the moment
   before the controller connects and for a browser that never runs it.

   ⚠️ The LANE is the sized track and the list takes 1fr, although it is the
   list's width that is being set. That is what makes the opening animate: a
   grid can interpolate two track lists only when they have the same shape, so
   both states are "1fr, then a length" - open a real width, shut zero. Written
   the obvious way round (`var(--list-split) 1fr` against `1fr`) the two lists
   have different lengths AND swap unit kinds, and the lane appeared all at
   once. The list still ends up exactly --list-split wide: 100% minus the lane
   minus the channel is the same number. */
.layout--lane.two-column.hide-panel:not(.hide-content):not(.hide-list) {
  grid-template-columns: 1fr calc(100% - var(--list-split, 40%) - 24px);
}

/* Shut: the same two tracks, the lane at zero. It stays in the layout instead
   of display:none, because there is nothing to grow out of a box that is not
   laid out - and this is the whole point: selecting a row pushes the lane in
   from the right while the list gives way at the same pace.
   Its padding and its edge go to zero with it, or the 0px track would still
   show a 49px sliver: a border-box cannot shrink below its own padding.
   And the CHANNEL goes to zero with it (user, 09.09.2026): the 24px gap
   belongs to the open lane, and next to a 0px track it was 24px of nothing
   between the list and the page's own 24px inset, 48px to the browser edge
   where the left side has 24. The gap is in the transition list below, so
   the channel grows with the lane. */
.layout--lane.two-column.hide-panel.hide-content:not(.hide-list) {
  grid-template-columns: 1fr 0px;
  column-gap: 0;
}

/* ⚠️ THREE tracks while the column picker is docked, and the middle one is the
   shut lane. The picker docks into a track of the grid, and it used to be the
   SECOND one - which worked only because a shut lane was display:none and took
   no track at all. Keeping the lane in the layout (so it can slide) handed that
   track to the lane: the picker fell through into an implicit row at the bottom
   left, and the lane opened 268px wide showing its "pick a ticket" placeholder.
   One change, two symptoms, one cause (user, 07.09.2026).
   The entering state animates the third track from zero, like the two-track
   case above. */
.layout--lane.two-column.hide-panel.hide-content:not(.hide-list).column-picker-open {
  grid-template-columns: 1fr 0px 268px;
  /* The channel is back while the picker is docked: it stands beside the
     list the way the lane does. */
  column-gap: 24px;
}

.layout--lane.two-column.hide-panel.hide-content:not(.hide-list).column-picker-open.column-picker-entering {
  grid-template-columns: 1fr 0px 0px;
  column-gap: 24px;
}

.layout--lane .column.content {
  transition: padding 0.25s ease;
}

.layout--lane.hide-content .column.content {
  display: block;
  padding: 0 !important;
  border-left-width: 0;
  overflow: hidden;
}

/* The handle. Over the 24px channel and the lane's hairline at its far edge,
   so what one grabs is the line one sees. Absolutely placed rather than a grid
   track: a track would take width from the two columns, and every other
   grid-template-columns in this file would have to know about it. */
.lane-split {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--list-split, 40%);
  width: 25px;
  cursor: col-resize;
  z-index: 1;
  /* Travels with the boundary it holds: shut, it waits at the right edge and
     rides in with the lane. Jumping straight to its final place would put the
     handle where the line is going to be a quarter second before the line
     gets there. */
  transition: left 0.25s ease, opacity 0.2s ease;
  /* No surface of its own. What it makes visible is the line already there:
     the lane's border-left sits under this element's right edge. */
  background: transparent;
  touch-action: none;
}

/* The line, drawn by the handle on top of the lane's own, so hover and drag
   can darken it without the lane knowing anything about the resizer. */
.lane-split::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: transparent;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.lane-split:hover::after,
.lane-split:focus-visible::after,
.layout--resizing .lane-split::after {
  background: rgb(var(--cream-400));
  box-shadow: 0 0 0 1px rgb(var(--cream-400) / 0.35);
}

.lane-split:focus-visible {
  outline: none;
}

/* Shut, the handle waits at the right edge with the lane it belongs to - not
   display:none, or it could not travel in with it. */
.layout.hide-content .lane-split {
  left: calc(100% - 25px);
  opacity: 0;
  pointer-events: none;
}

/* No list, no split to drag. */
.layout.hide-list .lane-split {
  display: none;
}

/* A drag must not run through an easing meant for the opening: 250ms of
   catching up behind the pointer is a rubber band. */
.layout--resizing .lane-split {
  transition: none;
}

/* While dragging, the grid must follow the pointer and not a quarter-second
   behind it: .layout.two-column animates grid-template-columns for the column
   picker's slide-in, and that easing turns a drag into a rubber band. */
.layout--resizing {
  transition: none !important;
}
.layout.two-column.hide-list {
  grid-template-columns: 0px 1fr var(--panel-width, var(--panel-raw));
}
.layout.two-column.hide-list.hide-panel {
  grid-template-columns: 0px 1fr;
  column-gap: 0;
}
.layout.two-column.hide-content {
  grid-template-columns: 1fr var(--panel-width, var(--panel-raw));
}
.layout.two-column.hide-content.hide-panel {
  grid-template-columns: 1fr;
}

/* The column picker (doc/spaltenwahl_plan.md S2, components/column_picker.css):
   a grid track of its own next to the list while no detail is open, so the
   list gets narrower and the boundary line in the panel is measured against
   the width the list really has; over the detail while one is open, so the
   list keeps its width (the list is what is being set, the detail is not).
   The picker is a plain <div> child of the grid, never the .panel lane: with a
   detail open that lane collapses the list, the opposite of what is needed. */
.layout.two-column {
  position: relative;
}

.layout.two-column.hide-content.column-picker-open {
  grid-template-columns: 1fr 268px;
}

/* The panel slides in (user, 07.09.2026): docked, its track grows from 0 to
   268 px while the panel moves in from the right, and the list gives way at
   the same pace; closing runs the same way back. The controller sets
   `column-picker-entering` for one frame on open and for the whole way out on
   close (column_picker_controller#openPanel/#close). Browsers that cannot
   animate grid tracks still get the panel's own slide. */
.layout.two-column {
  transition: --panel-width 0.4s ease, grid-template-columns 0.25s ease, column-gap 0.25s ease;
}

.layout.two-column.hide-content.column-picker-open.column-picker-entering {
  grid-template-columns: 1fr 0px;
}

/* Floating, next to the list: the panel is about the list, so it sits where the
   list ends and floats over the left part of the detail, not at the far edge of
   the window. Docked (no detail open) it is a grid track and none of this
   applies.
   ⚠️ Keyed on the PANEL's own marker, which column_picker_controller#placePanel
   sets, and not on a combination of classes on the grid. It used to read
   `.layout.two-column:not(.hide-content).column-picker-open > .column-picker` -
   four conditions on an ancestor, and the moment one of them was not what it
   used to be the panel fell back into the grid's flow and landed in an implicit
   row at the bottom left, still visible, still usable, just in the wrong place.
   One owner decides whether it floats; the stylesheet only paints it. */
.column-picker[data-floating] {
  /* FIXED, not absolute. The panel is a child of the grid, and the grid is
     position: relative WITH overflow: hidden - so an absolutely placed panel
     depends on that chain staying exactly as it is, and any ancestor that
     starts positioning or clipping moves it somewhere nobody asked for. Fixed
     answers to the viewport and to nothing else; placePanel measures the list
     with getBoundingClientRect, which is in the same coordinates. */
  position: fixed;
  z-index: 30;
  border: 1px solid rgb(var(--cream-400));
  border-radius: 0.5rem;
  box-shadow: 0 20px 44px -18px rgb(var(--ink) / 0.5);
}

/* Panel focus mode: when BOTH a detail (content) and the panel lane are open,
   the list collapses and the lane gains real reading width — the default 300px
   lane squeezed all three columns. Panel open WITHOUT a selected item keeps the
   list visible, otherwise the empty lane would strand the user with no way to
   pick one; closing either one restores the default columns. Only the meetings
   page renders a lane here (the tickets lane went with S4-T1, the knowledge chat
   placeholder on 10.09.2026); the other pages always carry .hide-panel, so this
   rule never fires there.
   The board is not excluded any more: since it opens its ticket in the lane
   (D4 of doc/kanban_ticket_als_bahn_plan.md) its grid has a list track like
   the table's, and it yields the same way. */
.layout.two-column:not(.hide-content):not(.hide-panel) {
  --panel-width: clamp(380px, 36vw, 560px);
  grid-template-columns: 0px 1fr var(--panel-width);
}
.layout.two-column:not(.hide-content):not(.hide-panel) .list {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
  padding: 0;
}

/* Companion-panel focus mode (assistant plan L12, S3a T4): the MIRROR of the
   rule above, for the assistant panel docked to the left of the page instead of
   a lane inside it. Same trade, same conditions: with the panel open and a
   detail visible, the list yields its "pick something" job to the conversation.
   Without a selected detail (.hide-content) the list stays -- otherwise there
   would be nothing left to pick from. The board yields like the table (D4):
   assistant open, ticket open, the board is at 0px and there is no handle;
   close the assistant, both are back.

   The state lives on <body> because the panel is a body-level element and the
   grid is inside <main>; there is no shared ancestor further down. The rule
   itself belongs HERE, next to the lane variants it modifies, rather than
   travelling with the panel markup. body.assistant-panel-open is written by
   assistant_panel_controller (and rendered server-side from the cookie).

   Wrapped in the lg media query for the same reason as the content offset in
   components/assistant_panel.css: the panel is `hidden lg:block`, so below that
   width there is no companion lane and nothing for the list to yield to. The
   body class says "open", the media query says "and visible". */
@media (min-width: 1024px) {
  body.assistant-panel-open .layout.two-column:not(.hide-content) {
    /* The lane width above is viewport-relative (36vw) because it was written for
       a grid that spans the window. With the assistant open, <main> is 636px
       narrower than the window, and 36vw of the WINDOW ate the content column:
       518px lane, 175px content. Percent resolves against the grid, so the lane
       now shrinks with the space it actually sits in. Which lane yields is
       unchanged (L12: the LIST does); this only stops the remaining two from
       being measured against the wrong ruler. */
    --panel-width: clamp(320px, 34%, 480px);
    grid-template-columns: 0px 1fr var(--panel-width);
  }
  body.assistant-panel-open .layout.two-column:not(.hide-content).hide-panel {
    grid-template-columns: 0px 1fr;
    column-gap: 0;
  }
  body.assistant-panel-open .layout.two-column:not(.hide-content) .list {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
    padding: 0;
  }
  /* While the list track is 0 the handle is out of the picture: not visible,
     not a 25px drag surface inside the detail, not in the tab order (S6 of
     doc/kanban_ticket_als_bahn_plan.md). */
  body.assistant-panel-open .layout.two-column:not(.hide-content) .lane-split {
    display: none;
  }
}

/* Two-column responsive overrides */
@media (max-width: 900px) {
  .layout.two-column:not(.hide-content) {
    grid-template-columns: 0px 1fr var(--panel-width, var(--panel-raw));
  }
  .layout.two-column:not(.hide-content).hide-panel {
    grid-template-columns: 0px 1fr;
  }
  .layout.two-column:not(.hide-content) .list {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
    padding: 0;
  }
  .layout.two-column.hide-content {
    grid-template-columns: 1fr;
  }

  /* The lane variant (S6 of doc/kanban_ticket_als_bahn_plan.md). The lane's
     open rule (.layout--lane.two-column.hide-panel:not(.hide-content):not(.hide-list),
     0,5,0) beat the 0,4,0 rules of this block whatever the order, so below
     900px the list column was invisible AND kept its track, and the lane never
     got the width. A list bug since #730; the board inherits the repair. Same
     specificity, later in the file: this one wins. And while the list track is
     0 the handle is out of the picture: not visible, not a 25px drag surface
     inside the detail, not in the tab order. */
  .layout--lane.two-column.hide-panel:not(.hide-content):not(.hide-list) {
    grid-template-columns: 0px 1fr;
    column-gap: 0;
  }
  .layout--lane.two-column:not(.hide-content) .lane-split {
    display: none;
  }
}

/* Filter bar styling */
.filter-bar {
  backdrop-filter: blur(4px);
}

/* ========================
   Kanban Board Layout
   ======================== */
/* (No rule for .layout.kanban-layout itself any more: the board is on the
   same lane grid as the table, sized by layout_toggle_controller like it.
   The class stays as a marker for the two rules that are the board's own,
   the view switch and the column picker.) */

/* The board lives inside a tickets_list_frame so the filter bar can reload it
   (search / ad-hoc filters). display:contents keeps the frame out of the layout
   box tree, so the board's height/scroll behaviour is exactly as if unwrapped. */
.kanban-frame {
  display: contents;
}

/* Kanban Navigation */
.kanban-nav {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 6px;
  padding-right: 4px;
}
.kanban-nav.hidden { display: none; }
/* Soft-flat (2026-09-04): quiet cream border, rounded-md, hover = surface shift.
   No offset shadow, no lift (matches the button system, design doc B1-B3).
   Tokens only -> Dark mode comes from the inverted ramps, no .dark overrides. */
.kanban-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgb(var(--cream-300));
  border-radius: 6px;
  background: rgb(var(--white));
  color: rgb(var(--cream-700));
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.15s, opacity 0.15s;
}
.kanban-nav-btn:hover:not(:disabled) {
  background: rgb(var(--cream-100));
}
.kanban-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Kanban Board Container -- columns sit directly on the cream page ground,
   no column boxes since the soft-flat pass (2026-09-04). */
/* The board is a quietly recessed surface: a theme-agnostic dark wash (plain
   black alpha, NOT a token -- --stroke flips light in Dark and would raise
   instead of recess) so the white cards read as the lifted layer (figure-ground,
   mock 2026-09-04). */
.kanban-board {
  /* The column widths, wide. Narrowed by .layout.show-content below (rule 4
     of doc/kanban_ticket_als_bahn_plan.md): columns get narrower, not fewer.
     ONE owner of both sets. kanban_board_controller reads the gap for its
     nav step (COLUMN_GAP_PX); change both together. */
  --kanban-column-basis: 300px;
  --kanban-column-min: 300px;
  --kanban-column-max: 360px;
  /* The colour of the column a carried card is over (doc/kanban_keyboard_plan.md,
     D3): amber, the colour of "open" and "not yet saved", a state in
     progress. Amber has no token of its own; the value stands here so the
     dark theme below is a number and not a rule. Light: amber-500. */
  --kanban-target: 245 158 11;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 14px 16px 8px;
  min-height: 0;
  background: rgba(0, 0, 0, 0.045);
  border-radius: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--cream-300)) transparent;
}
/* Webkit (Chrome, Safari, Edge) */
.kanban-board::-webkit-scrollbar {
  height: 8px;
}
.kanban-board::-webkit-scrollbar-track {
  background: transparent;
}
.kanban-board::-webkit-scrollbar-thumb {
  background: rgb(var(--cream-300));
  border-radius: 4px;
}
.kanban-board::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--cream-400));
}

/* Columns narrower, not fewer (rule 4): with the lane open the board keeps
   every column and the rest scrolls sideways; the column cut off at the right
   edge says "it goes on". Starting values from the sketch's ratio (0.85 of
   300 is 255, taken down to a round 240). The card's content decides: if an
   element breaks at this width, the width is wrong, not the card. To be
   tuned in the browser. */
.dark .kanban-board {
  --kanban-target: 240 205 138; /* the dark theme's warning text (--wash-warning-text) */
}

.layout.show-content .kanban-board {
  --kanban-column-basis: 240px;
  --kanban-column-min: 240px;
  --kanban-column-max: 280px;
}

.kanban-column {
  /* Grows into leftover board width so wide screens don't leave a dead gray
     field right of the last column. The widths are the board's variables. */
  flex: 1 1 var(--kanban-column-basis);
  min-width: var(--kanban-column-min);
  max-width: var(--kanban-column-max);
  display: flex;
  flex-direction: column;
  max-height: 100%;
  /* As tall as its content, no taller than the board (the scroller inside
     scrolls beyond that): the target frame below hugs the column, head to
     "+ Ticket", and does not run on into the empty well under a short column
     (user, 10.09.2026, against the reference draft). The radius is the
     frame's; without the frame it is invisible. */
  align-self: flex-start;
  border-radius: 12px;
}

/* Header row: status dot + label, count flushed right, thin rule below. */
.kanban-column-header {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 8px at the sides, the same 8px the scroller keeps to the cards, so the
     head's text stands on the cards' left edge (it was 4px until the scroller
     grew for the focus ring). */
  padding: 2px 8px 10px;
  /* Translucent stroke, not cream-300: the Pop theme remaps the cream ramp to
     hard grays (82/82/82), which turns a "quiet" line loud. Alpha on --stroke
     stays soft in every theme (same trick as the card hairline below). */
  border-bottom: 1px solid rgb(var(--stroke) / 0.15);
  font-size: 0.875rem;
  font-weight: 700;
  color: rgb(var(--ink));
  flex-shrink: 0;
}

.kanban-column-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: rgb(var(--cream-400)); /* fallback when the status has no color */
  flex-shrink: 0;
}

.kanban-count {
  margin-left: auto;
  font-weight: 400;
  font-size: 0.8125rem;
  color: rgb(var(--cream-600));
}

/* Scroll wrapper: fills the column and scrolls when a column overflows, so the
   header stays put. Holds the card list AND the "+ Ticket" link, so the link
   follows the cards directly (Trello-style) instead of being pinned to the
   viewport bottom of a stretched column. */
.kanban-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* 8px at the sides, not 4: the focus ring stands 5px outside a card (2px
     at 3px offset, below) and the scroller clips what overflows it. With 4px
     the ring lost a pixel left and right (doc/kanban_keyboard_plan.md, S1). */
  padding: 14px 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kanban-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 40px;
}

/* The target column, under the mouse and under the keyboard, ONE form
   (doc/kanban_keyboard_plan.md, D2 and D3): 2px inside the COLUMN and 6% of
   fill in amber, a state in progress; not green, not blue. The whole column,
   head and "+ Ticket" included: on the card list the ring lay under the
   cards, which fill the list's width, and showed only in the gaps between
   them, a row of dashes at each side (user, 10.09.2026). On the column the
   cards stand 8px inside the ring (the scroller's padding) and the ring is
   whole. Under the mouse it is the column that holds Sortable's drop marker
   (kanban-ghost), under the keyboard the column the controller marks
   (kanban-target), because the keyboard's placeholder stays at the ORIGIN
   and cannot mark the target. */
.kanban-column:has(.kanban-ghost),
.kanban-column.kanban-target {
  box-shadow: inset 0 0 0 2px rgb(var(--kanban-target));
  background: rgb(var(--kanban-target) / 0.06);
}

/* Empty-column affordance: rendered always (writers only); CSS keeps it visible
   only while the list truly has no card, so it reappears live when the last
   card is dragged out. */
.kanban-empty-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
  border: 1.5px dashed rgb(var(--stroke) / 0.18);
  border-radius: 8px;
  font-size: 0.75rem;
  color: rgb(var(--cream-500));
  user-select: none;
}
.kanban-card-list:has(.kanban-card) .kanban-empty-hint { display: none; }

/* Soft-flat card: white on cream, hairline stroke, soft diffuse shadow
   (precedent: .dashboard-edit-slot). Hover lifts gently -- the card IS clickable,
   so the lift is a correct affordance (B1). */
.kanban-card {
  border: 1px solid rgb(var(--stroke) / 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgb(var(--white));
  cursor: grab;
  box-shadow: 0 1px 3px rgb(var(--stroke) / 0.06), 0 3px 10px rgb(var(--stroke) / 0.06);
  transition: box-shadow 0.15s, transform 0.15s;
}

.kanban-card:hover {
  box-shadow: 0 2px 4px rgb(var(--stroke) / 0.07), 0 6px 16px rgb(var(--stroke) / 0.09);
  transform: translateY(-1px);
}

/* The chosen card (rule 2 of doc/kanban_ticket_als_bahn_plan.md): the row's
   selection tint (--selected-row) plus a visible edge, the same "here you
   are" the table row has (.selected-row above). Hover keeps the
   tint, as the row does. No bar, no arrow, nothing outside the card.
   Server-side from `selected:`, client-side from the card's own ticket-row
   controller, which marks itself from the address on connect, so every
   replacement of a card or of the board re-marks by itself. */
.kanban-card.selected-row {
  background: rgb(var(--selected-row));
  border-color: rgb(var(--cream-600)); /* muted: the open card's edge (37a) */
}

.kanban-card.selected-row:hover {
  background: rgb(var(--selected-row-hover));
}

/* Focus is a ring, not a colour (designer, 10.09.2026,
   doc/kanban_keyboard_plan.md S1): the app's ink ring, 3px outside the stop
   instead of the app-wide 2px, so it clears the card's hairline and shadow.
   An outline moves no content and sits outside the card, so it combines with
   the open card's fill, which stays the one meaning of the fill ("open in
   the lane"). The same two lines for the column head and "+ Ticket": one
   sign for every stop, the sign every button has. :focus-visible only: a
   mouse click leaves no ring that would read as a selection. The resting
   shadow of .kanban-card stays; the ring that used to sit in it is gone. */
.kanban-card:focus-visible,
.kanban-column-header:focus-visible,
.kanban-add-ticket:focus-visible {
  outline: 2px solid rgb(var(--ink));
  outline-offset: 3px;
}

/* Unread-notification dot on Kanban Card -- presence only, no count */
/* Carried, by mouse or by keyboard, ONE language (doc/kanban_keyboard_plan.md,
   D2): lifted, with a hard offset shadow and no blur, the "raised" the
   primary action speaks; soft shadows stay with popovers and modals.
   Sortable's chosenClass is this class; the keyboard sets it itself
   (kanban_board_controller#pickUp). The shadow's dark alpha is the brief's;
   in the dark theme the lift and the placeholder carry the state. */
.kanban-card.kanban-carried {
  cursor: grabbing;
  transform: translate(-2px, -3px);
  box-shadow: 4px 6px 0 -1px rgba(35, 34, 30, 0.16);
}

/* What stays where the card was: the card itself at 55% with the plain
   edge, so one sees WHAT is missing, not an empty box. kanban-ghost is
   Sortable's marker under the mouse, kanban-placeholder the keyboard's copy
   at the origin. */
.kanban-card.kanban-ghost,
.kanban-card.kanban-placeholder {
  opacity: 0.55;
  border-color: rgb(var(--cream-300));
  box-shadow: none;
  transform: none;
}

/* Quiet per-column create ("+ Ticket"): ghost button, brightens on hover. */
.kanban-add-ticket {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.8125rem;
  color: rgb(var(--cream-600));
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.kanban-add-ticket:hover {
  background: rgb(var(--white) / 0.7);
  color: rgb(var(--ink));
}
/* Its focus ring stands with the card's, above. */

/* Reduced motion: the state stays, the transition goes (37a, section 6).
   The reveal passes "auto" itself (kanban_board_controller#reveal). */
@media (prefers-reduced-motion: reduce) {
  .kanban-card,
  .kanban-card:hover,
  .kanban-card.kanban-carried {
    transition: none;
    transform: none;
  }
}

/* --- Dashboard inline edit mode (dashboard_inline_edit_controller) ----------------
   Chrome + drag states for the WYSIWYG editor. The generic .sortable-* classes are
   scoped to the editor root so they don't collide with other SortableJS surfaces
   (ticket attributes / view config). Elevation is carried by BORDER + raised surface,
   never shadow, so it survives Dark (where global [class*="shadow-["] is stripped,
   §19.7). Tokens only (rgb(var(--…))) — no hardcoded hex, no Action-Lime. --- */

/* 44px touch targets for handles / menu / row buttons (§19.5). */
.dashboard-edit-touch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.dashboard-edit-slot {
  /* A quiet raised card so each widget reads as distinct from the recessed (cream) row, instead of
     white-on-white nested boxes. Draggability is signalled by the grip handle, not the border. */
  border: 1px solid rgb(var(--stroke) / 0.15);
  box-shadow: 0 1px 2px rgb(var(--stroke) / 0.06);
}

.dashboard-edit-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-radius: 0.25rem;
  color: rgb(var(--ink) / 0.6);
  cursor: grab;
}
.dashboard-edit-handle:hover {
  color: rgb(var(--ink));
  background-color: rgb(var(--cream-50));
}

.dashboard-edit-menu-btn,
.dashboard-edit-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.4rem;
  border-radius: 0.25rem;
  color: rgb(var(--ink) / 0.7);
}
.dashboard-edit-menu-btn:hover,
.dashboard-edit-row-btn:hover {
  color: rgb(var(--ink));
  background-color: rgb(var(--cream-50));
}

/* Themed focus ring (§19.7: --ink, not a fixed ring-blue/gray). */
.dashboard-edit-handle:focus-visible,
.dashboard-edit-menu-btn:focus-visible,
.dashboard-edit-row-btn:focus-visible,
.dashboard-edit-menu-item:focus-visible,
.dashboard-edit-pick:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--ink));
}

.dashboard-edit-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  color: rgb(var(--ink) / 0.6);
  background-color: rgb(var(--cream-50));
}

/* Inline-expand action panel — elevation via border + raised surface (NOT a S3 float),
   so it reads as "raised" in Dark too (§19.4/§19.7). */
.dashboard-edit-menu {
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 2px solid rgb(var(--stroke));
  border-radius: 0.5rem;
  background-color: rgb(var(--white));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dashboard-edit-menu-heading {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(var(--ink) / 0.5);
  margin-bottom: 0.25rem;
}
.dashboard-edit-menu-item,
.dashboard-edit-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  color: rgb(var(--ink));
  text-align: left;
}
.dashboard-edit-menu-item {
  padding: 0.4rem 0.6rem;
  min-height: 2.75rem;
}
.dashboard-edit-menu-item:hover,
.dashboard-edit-pick:hover {
  background-color: rgb(var(--cream-50));
}
.dashboard-edit-menu-danger {
  color: rgb(220 38 38); /* red-600 — semantic delete, identical across themes */
}

/* Settings panel sections separated by quiet dividers: Einstellungen │ Anordnen │ Widget entfernen.
   A section divider only appears between two sections (not above the first); the destructive remove
   action always gets its own divider above. */
/* Scoped to the menu's remove button (.dashboard-edit-menu-item.dashboard-edit-menu-danger), NOT the
   bare .dashboard-edit-menu-danger — the row header's trash button reuses that class only for its red
   colour and must not inherit the divider's padding/border (which dropped its icon). */
.dashboard-edit-menu-section + .dashboard-edit-menu-section,
.dashboard-edit-menu-item.dashboard-edit-menu-danger {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgb(var(--stroke) / 0.12);
}

/* Anordnen: light, clearly-clickable chips (subtle border), grouped — not heavy buttons. */
.dashboard-edit-arrange {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.dashboard-edit-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgb(var(--stroke) / 0.25);
  border-radius: 0.5rem;
  font-size: 0.8rem;
  color: rgb(var(--ink) / 0.85);
  background-color: transparent;
}
.dashboard-edit-chip:hover {
  background-color: rgb(var(--cream-50));
  border-color: rgb(var(--stroke) / 0.45);
  color: rgb(var(--ink));
}
.dashboard-edit-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--ink));
}
.dashboard-edit-chip:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.dashboard-edit-chip:disabled:hover {
  background-color: transparent;
  border-color: rgb(var(--stroke) / 0.25);
  color: rgb(var(--ink) / 0.85);
}

.dashboard-edit-pick {
  display: block;
  width: 100%;
  padding: 0.4rem 0.6rem;
}

/* Drag states — token-driven, scoped to the editor (§19.7): chosen = raised surface +
   emphasised stroke + a small transform lift (NO Action-Lime, NO #000); ghost = dashed
   stroke at reduced opacity. */
[data-controller~="dashboard-inline-edit"] .sortable-ghost {
  opacity: 0.4;
  background-color: rgb(var(--cream-50));
  border: 1px dashed rgb(var(--stroke)) !important;
}
[data-controller~="dashboard-inline-edit"] .sortable-chosen {
  background-color: rgb(var(--white));
  border-color: rgb(var(--stroke));
  transform: translate(-1px, -1px);
}
[data-controller~="dashboard-inline-edit"] .sortable-drag {
  cursor: grabbing;
}

/* ── Width controls (auto-columns): drag handle + "+ widget" column; row-height segment ─── */

/* Width drag handle: sits in the GREY CHANNEL between two boxes (the lg:gap-5 the row provides),
   centered, NOT on a box edge where it blurred into the box border. The slot is position:relative,
   so right:-1.25rem places the handle's full hit area across the 1.25rem gap to its right. The
   controller hides it (.is-hidden) for single-widget rows and the rightmost widget (nothing to its
   right). Pointer-only; the ⋯-menu breiter/schmaler is the keyboard path. */
.dashboard-edit-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Sits centred in the ~1.25rem gap between two widgets. */
  right: -1.25rem;
  width: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  touch-action: none; /* the pointer drag owns the gesture */
  z-index: 5;
}
/* A floating grip KNOB (not a faint line): a rounded handle with a real border + soft shadow + grip
   dots, so it reads as physically grabbable in the channel — the standard column-splitter pattern.
   On hover/focus it lifts into the accent colour (with col-resize cursor) so the drag target is
   unmistakable. */
.dashboard-edit-resize-grip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 38px;
  flex-shrink: 0; /* keep the full knob width; the flex handle is narrower than the knob */
  border-radius: 8px;
  background-color: rgb(var(--white));
  border: 1px solid rgb(var(--stroke) / 0.5);
  box-shadow: 0 1px 3px rgb(var(--stroke) / 0.2);
  color: rgb(var(--ink) / 0.75);
  font-size: 1.05rem; /* big enough that the direction caret/arrow is clearly legible */
  line-height: 1;
  transition: border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.dashboard-edit-resize:hover .dashboard-edit-resize-grip,
.dashboard-edit-resize:focus-visible .dashboard-edit-resize-grip {
  border-color: rgb(var(--info));
  color: rgb(var(--info));
  box-shadow: 0 2px 6px rgb(var(--info) / 0.35);
}

/* "+ widget" column at the end of a row's flex track: a full-width add bar on mobile, a narrow
   stretched column on desktop. position:relative so the picker can open as a popover anchored to it.
   The controller hides the whole column (.is-hidden) when the row is full. */
.dashboard-edit-add-col {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  width: 100%;
}
@media (min-width: 1024px) {
  .dashboard-edit-add-col { width: 2.5rem; align-self: stretch; }
}
/* Row is full (no widget minimum still fits): the "+" stays VISIBLE but muted — it is not removed,
   so the affordance never silently vanishes. A click still fires (button is not `disabled`) and
   shows the "row full" hint instead of the picker. */
.dashboard-edit-add-col.is-full .dashboard-edit-add-widget-col {
  opacity: 0.4;
  cursor: not-allowed;
}
.dashboard-edit-add-col.is-full .dashboard-edit-add-widget-col:hover {
  border-color: rgb(var(--stroke) / 0.5);
  color: rgb(var(--ink) / 0.5);
  background-color: transparent;
}
/* The "row full" hint is itself the dismiss target (no close button) — signal that it is clickable. */
.dashboard-edit-row-full {
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.dashboard-edit-row-full:hover {
  background-color: rgb(var(--cream-50));
}
.dashboard-edit-add-widget-col {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.5rem;
  border: 2px dashed rgb(var(--stroke) / 0.5);
  border-radius: 0.5rem;
  color: rgb(var(--ink) / 0.5);
  background-color: transparent;
}
.dashboard-edit-add-widget-col:hover {
  border-color: rgb(var(--stroke));
  color: rgb(var(--ink));
  background-color: rgb(var(--cream-50));
}

/* "Add row" zone: a full-width dashed bar mirroring the per-row "+" add-widget zones, so adding a
   row and adding a widget share the same affordance. */
.dashboard-edit-add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3rem;
  margin-bottom: 1.5rem;
  border: 2px dashed rgb(var(--stroke) / 0.5);
  border-radius: 0.5rem;
  color: rgb(var(--ink) / 0.6);
  background-color: transparent;
  font-weight: 600;
}
.dashboard-edit-add-row:hover {
  border-color: rgb(var(--stroke));
  color: rgb(var(--ink));
  background-color: rgb(var(--cream-50));
}

/* The widget picker opens as a popover anchored to the "+" column (right-aligned, from its top), so
   the choice appears where the new widget will land — not as a panel below the row. */
.dashboard-edit-add-picker {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 30;
  width: 16rem;
  max-width: 85vw;
}

/* JS-toggled visibility for the resize handle (kept off the HTML [hidden] attr because the author
   display rules above would otherwise win over it). */
.dashboard-edit-resize.is-hidden {
  display: none;
}

/* ── Flip card: ⋯ flips a widget slot to its settings/actions back, in place of the widget ── */
/* Perspective is scoped to a wrapper around ONLY the flip card — NOT the whole slot. The resize
   handle is an absolutely-positioned sibling of the flip; putting perspective on the slot dragged
   the handle into the slot's 3D space and rendered its direction glyph edge-on (a triangle looked
   like a thin vertical bar). Scoping perspective to the flip alone keeps the 3D flip and leaves the
   handle in flat 2D. */
.dashboard-edit-flip-perspective {
  perspective: 1400px;
}
.dashboard-edit-flip {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.3s ease;
}
.dashboard-edit-slot.is-flipped .dashboard-edit-flip {
  transform: rotateY(180deg);
}
.dashboard-edit-flip-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  min-width: 0;
}
/* Front is in flow and defines the card height; the back overlays it at the same size and scrolls
   if its form is taller, so flipping never grows the row or leaves empty space. */
.dashboard-edit-flip-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  overflow: auto;
  border-radius: 0.5rem;
  /* Opaque raised surface (--white, theme-aware) with a faint info-blue wash, so flipping a card to
     its edit form is also signalled by a subtle background-colour shift. --info is blue in all three
     themes (Hell/Dark/Pop), so the hint reads consistently and stays quiet. */
  background-color: rgb(var(--white));
  background-image: linear-gradient(rgb(var(--info) / 0.09), rgb(var(--info) / 0.09));
}
/* While flipped, the front's edge drag handle must not float over the settings back. */
.dashboard-edit-slot.is-flipped .dashboard-edit-resize {
  display: none;
}

/* The front is a non-interactive PREVIEW, not a live widget — dim it so its buttons don't look
   clickable, and make the whole front a pointer (clicking it opens the settings). Hovering brightens
   the preview to its real dashboard look. Only the preview content is dimmed; the chrome (grip /
   gear / label) stays full so it remains usable. */
.dashboard-edit-flip-front {
  cursor: pointer;
}
.dashboard-edit-flip-front [data-preview] {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.dashboard-edit-slot:hover .dashboard-edit-flip-front [data-preview] {
  opacity: 1;
}

/* Compact edit mode: crop each preview so rows stay short and a far-away target row is reachable
   when dragging. Only the preview content is capped; the header chrome (grip / label / gear) stays.
   `is-cropped` is set in JS ONLY when the content is actually taller than the cap, so short widgets
   (e.g. a couple of stat cards) are not faded for no reason. */
.dashboard-edit-compact [data-preview] {
  max-height: 150px;
  overflow: hidden;
}
.dashboard-edit-compact [data-preview].is-cropped {
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-edit-flip {
    transition: none;
  }
}
/* During a drag, Sortable's transform flattens the flip's 3D context, so the rotateY(180) back leaks
   through as a mirrored overlay on the card. A dragged item is never flipped, so hide the back
   outright while it carries any Sortable drag class (covers both the slot and row drags). */
.sortable-chosen .dashboard-edit-flip-back,
.sortable-ghost .dashboard-edit-flip-back,
.sortable-drag .dashboard-edit-flip-back {
  visibility: hidden;
}

/* ==========================================================================
   Sidebar theme switcher — collapsed trigger + popover
   ==========================================================================
   The trigger renders all three theme icons but reveals only the active one.
   Which one is decided purely by the <html> theme class, which the <head>
   script sets before the first paint — so the correct icon is shown with no
   flash and no JS touching the trigger. Mapping: light = <html> without
   .dark/.theme-pop, dark = .dark, pop = .theme-pop. */
[data-theme-trigger-icon] {
  display: none;
}
:root:not(.dark):not(.theme-pop) [data-theme-trigger-icon="light"],
.dark [data-theme-trigger-icon="dark"],
.theme-pop [data-theme-trigger-icon="pop"] {
  display: inline-block;
}

/* Popover option check mark: shown only for the active theme. The active
   option's button carries aria-pressed="true" (set by the same <head> script
   that marks the segmented switcher), so no extra JS is needed here. */
.theme-option .theme-check {
  visibility: hidden;
}
.theme-option[aria-pressed="true"] .theme-check {
  visibility: visible;
}


/* First-use empty state in master-detail lists (style guide "Leerzustände"):
   while the detail pane is open (.show-content — e.g. the "create first
   meeting" form loaded into the detail frame), the CTA card would prompt for
   the very action already in progress → hide it and let the explainer use the
   full (narrow) list column. Purely declarative: closing the detail pane
   removes .show-content and the card returns. */
.labor-layout-view.show-content .first-use-empty-card {
  display: none;
}
.labor-layout-view.show-content .first-use-empty-grid {
  grid-template-columns: 1fr;
}

/* "Liste | Kanban" lives in the PAGE head and stands in both views at every
   state, with a ticket open too (user, 09.09.2026). It used to step aside
   while the lane was open on the table, because the board had no lane and a
   switch there threw the ticket away. Since doc/kanban_ticket_als_bahn_plan.md
   both views open the ticket in the same lane, and update_view_mode redirects
   back to the live address, which carries the ticket_id: the switch keeps the
   ticket in both directions and only swaps what one picks from (rule 7). */
[data-page-view-switch] {
  display: flex;
}
/* app/assets/stylesheets/views.css
 *
 * Page-specific rules that lived until 06/2026 as <style> blocks in the views.
 * CONVENTION: No <style> blocks in app/views/* — the guard spec
 * spec/views/style_block_guard_spec.rb fails otherwise (exception: mailer layouts).
 * Place new rules here (or layout.css / components/*),
 * thematically grouped and scoped to the page when class names are generic. */

/* --- Staging badge (all layouts; markup renders only when Rails.env.staging?) --- */
.staging-indicator {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 40; /* sidebar */
}

.staging-toggle {
  display: none;
}

.staging-badge {
  background: #eab308;
  color: black;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s;
}

.staging-badge:hover {
  background: #facc15;
}

.staging-info {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  background: #eab308;
  color: black;
  padding: 12px;
  font-size: 12px;
  border: 1px solid #ca8a04;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  display: none;
}

.staging-toggle:checked + .staging-badge + .staging-info {
  display: block;
}

/* --- Drag states column configuration (SortableJS in the view-configuration form).
       Scoped because ticket_attribute_definitions styles the same SortableJS classes
       with different values. --- */
#view_configuration_form .sortable-ghost {
  opacity: 0.4;
  background-color: #f3f4f6;
}
#view_configuration_form .sortable-drag {
  opacity: 1 !important;
  z-index: 70 !important;
  cursor: move !important;
}
#view_configuration_form .sortable-chosen {
  background-color: #fef3c7;
  cursor: move !important;
}
#view_configuration_form [data-controller="sortable"] {
  position: relative;
  min-height: 50px; /* Ensure drop area is visible */
}
#view_configuration_form [data-controller="sortable"] > * {
  position: relative;
}
#view_configuration_form .sortable-fallback {
  opacity: 0.8 !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
}

/* --- Drag states ticket attributes (project settings, warm-editorial) --- */
.attr-defs-sortable .sortable-ghost {
  opacity: 0.4;
  background-color: #f5f1ea;
}
.attr-defs-sortable .sortable-chosen {
  box-shadow: 2px 2px 0 0 #14110c;
}

/* --- Inbox ticket pane: hide the column close button in the embedded ticket --- */
#ticket_pane [data-action*="layout-toggle#closeContent"] {
  display: none !important;
}

/* --- Wiki note version history (Lane B / Brick 4) --- */
#note-version-history .wiki-version-list {
  display: flex;
  flex-direction: column;
}

#note-version-history .wiki-version-list__link {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid rgb(var(--cream-300));
}

#note-version-history .wiki-version-list__link:hover {
  background: rgb(var(--cream-100));
}

#note-version-history .wiki-version-list__time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: rgb(var(--ink));
}

#note-version-history .wiki-version-list__author {
  font-size: 0.85rem;
  color: rgb(var(--cream-600));
}

/* --- Wiki note version diff (unified) --- */
#note-version-diff .wiki-diff {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  border: 1px solid rgb(var(--cream-300));
  border-radius: 0.375rem;
  overflow-x: auto;
}

#note-version-diff .wiki-diff__line {
  padding: 0.1rem 0.75rem 0.1rem 1.75rem;
  white-space: pre-wrap;
  text-indent: -1rem;
}

/* Marker prefixes so the diff reads correctly without relying on colour alone. */
#note-version-diff .wiki-diff__line--added::before { content: "+ "; }
#note-version-diff .wiki-diff__line--removed::before { content: "− "; }
#note-version-diff .wiki-diff__line--unchanged::before { content: "\00a0\00a0"; }

#note-version-diff .wiki-diff__line--added {
  background: #e6f4ea;
  color: #1b5e20;
}

#note-version-diff .wiki-diff__line--removed {
  background: #fbe9e7;
  color: #b71c1c;
}

#note-version-diff .wiki-diff__line--unchanged {
  color: rgb(var(--cream-600));
}

/* Dark: pastel diff washes would be glaring; reuse the central status wash
   tokens (defined in .dark scope only — light/pop keep the pastel values). */
.dark #note-version-diff .wiki-diff__line--added {
  background: var(--wash-success-bg);
  color: var(--wash-success-text);
}

.dark #note-version-diff .wiki-diff__line--removed {
  background: var(--wash-danger-bg);
  color: var(--wash-danger-text);
}

/* Documentation area: typography for synced markdown pages (scoped to the page
   anchor so it never leaks into other views). Content is sanitized at sync.
   Colors come from the theme token layer so all three themes stay readable.
   DELIBERATE DUPLICATION: the .help-prose block (below) is a near-identical copy
   with a different scope anchor. The third copy, .meeting-prose, is GONE — it
   became .md-preview in components/markdown_preview.css when the ticket summary
   would have made it a fourth. These two are what is left of the trigger: they
   typeset FULL documentation pages (larger headings, tables, images) and several
   system specs address them by name, which is why they did not move along. The
   next touch here folds them into .md-preview and adds back only what differs. */
#documentation-page .doc-prose {
  color: rgb(var(--cream-800));
  line-height: 1.65;
}
#documentation-page .doc-prose h1,
#documentation-page .doc-prose h2,
#documentation-page .doc-prose h3,
#documentation-page .doc-prose h4 {
  font-weight: 700;
  line-height: 1.25;
  color: rgb(var(--cream-900));
  margin: 1.6em 0 0.5em;
}
#documentation-page .doc-prose h1 { font-size: 1.7rem; margin-top: 0; }
#documentation-page .doc-prose h2 { font-size: 1.35rem; }
#documentation-page .doc-prose h3 { font-size: 1.15rem; }
#documentation-page .doc-prose p { margin: 0.75em 0; }
#documentation-page .doc-prose ul,
#documentation-page .doc-prose ol { margin: 0.75em 0; padding-left: 1.5em; }
#documentation-page .doc-prose ul { list-style: disc; }
#documentation-page .doc-prose ol { list-style: decimal; }
#documentation-page .doc-prose li { margin: 0.25em 0; }
#documentation-page .doc-prose a { color: rgb(var(--info)); text-decoration: underline; }
#documentation-page .doc-prose code {
  background: rgb(var(--cream-200));
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}
/* Code blocks stay fixed dark-on-light in every theme; the token border keeps
   them visible as a container on the dark surface (bg is ~= dark --cream-50). */
#documentation-page .doc-prose pre {
  background: #1a1712;
  color: #f3efe6;
  border: 1px solid rgb(var(--cream-300));
  border-radius: 8px;
  padding: 1em;
  overflow-x: auto;
  margin: 1em 0;
}
#documentation-page .doc-prose pre code { background: transparent; padding: 0; color: inherit; }
#documentation-page .doc-prose blockquote {
  border-left: 3px solid rgb(var(--cream-300));
  padding-left: 1em;
  color: rgb(var(--cream-600));
  margin: 1em 0;
}
#documentation-page .doc-prose table {
  border-collapse: collapse;
  margin: 1em 0;
  width: 100%;
}
#documentation-page .doc-prose th,
#documentation-page .doc-prose td {
  border: 1px solid rgb(var(--cream-300));
  padding: 0.4em 0.7em;
  text-align: left;
}
#documentation-page .doc-prose img { max-width: 100%; height: auto; border-radius: 6px; }
#documentation-page .doc-prose hr { border: 0; border-top: 1px solid rgb(var(--cream-300)); margin: 1.5em 0; }

/* Live search highlight, applied client-side by frame-search#highlightContent via
   the CSS Custom Highlight API (a text-range highlight, NOT a wrapping element — so
   ::highlight only accepts a few properties, no border-radius/padding). Fixed
   dark-on-yellow so it stays legible on both the light and the dark reading surface.
   Shared by both documentation surfaces (project docs + the in-app help). */
::highlight(doc-search) {
  background-color: #fde68a;
  color: #1a1712;
}

/* The sidebar doc/help search has its own X button (frame-search#clear); hide the
   browser's native type=search cancel affordance so there is exactly one clear
   control, consistent across browsers (WebKit shows one, Firefox none). */
.doc-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Keyboard-selected live-search result (help + project docs). The aria-selected state
   set by frame_search_controller IS the styling hook — same fill as the hover look
   (bg-selected == --cream-200), so mouse hover and keyboard selection read identically
   and adapt to every theme via the token. Scoped to the search-result target so it can
   never leak onto other role="option" lists. Two attribute selectors outrank the inline
   bg-surface-raised utility, so the fill wins without !important. */
[data-frame-search-target="result"][aria-selected="true"] {
  background-color: rgb(var(--cream-200));
}

/* =========================================================================
   In-app help (/hilfe): prose for docs-engine markdown, modeled on the
   documentation area above (doc-prose). The content classes in the markdown
   (docs-callout-*, docs-codeblock) are the SHARED CONTRACT with the public
   docs — the STYLING is deliberately different per surface: the documentation keeps
   its isolated public look and stays untouched, this block renders the same
   markup in the app look (doc/in_app_hilfe_plan.md, D4). Theme tokens keep
   all three themes readable.
   Scope is the CLASS .help-scope (not the #help-page id): the contextual-help
   drawer grafts the help content into a body-level panel WITHOUT the #help-page
   wrapper, and an id would collide when drawer and /hilfe page coexist
   (doc/kontexthilfe_drawer_plan.md §8). #help-page carries .help-scope too.
   ========================================================================= */
.help-scope .help-prose {
  color: rgb(var(--cream-800));
  line-height: 1.65;
}
.help-scope .help-prose h1,
.help-scope .help-prose h2,
.help-scope .help-prose h3,
.help-scope .help-prose h4 {
  font-weight: 700;
  line-height: 1.25;
  color: rgb(var(--cream-900));
  margin: 1.6em 0 0.5em;
  /* Anchored headings (drawer scrollIntoView + native :target) keep breathing
     room instead of sitting flush against the scrollport edge. */
  scroll-margin-top: 0.75rem;
}
.help-scope .help-prose h1 { font-size: 1.7rem; margin-top: 0; }
.help-scope .help-prose h2 { font-size: 1.35rem; }
.help-scope .help-prose h3 { font-size: 1.15rem; }
.help-scope .help-prose p { margin: 0.75em 0; }
.help-scope .help-prose ul,
.help-scope .help-prose ol { margin: 0.75em 0; padding-left: 1.5em; }
.help-scope .help-prose ul { list-style: disc; }
.help-scope .help-prose ol { list-style: decimal; }
.help-scope .help-prose li { margin: 0.25em 0; }
.help-scope .help-prose a { color: rgb(var(--info)); text-decoration: underline; }
.help-scope .help-prose code {
  background: rgb(var(--cream-200));
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}
.help-scope .help-prose blockquote {
  border-left: 3px solid rgb(var(--cream-300));
  padding-left: 1em;
  color: rgb(var(--cream-600));
  margin: 1em 0;
}
.help-scope .help-prose table {
  border-collapse: collapse;
  margin: 1em 0;
  width: 100%;
}
.help-scope .help-prose th,
.help-scope .help-prose td {
  border: 1px solid rgb(var(--cream-300));
  padding: 0.4em 0.7em;
  text-align: left;
}
.help-scope .help-prose img { max-width: 100%; height: auto; border-radius: 6px; }
.help-scope .help-prose hr { border: 0; border-top: 1px solid rgb(var(--cream-300)); margin: 1.5em 0; }

/* Code blocks: same fixed dark-on-light surface as the documentation area in
   every theme. Rouge token spans stay monochrome here on purpose —
   The public documentation's own Rouge theme (its repo since D5) is a light surface, its colors would be
   unreadable on this dark ground. */
.help-scope .help-prose .docs-codeblock { position: relative; margin: 1em 0; }
.help-scope .help-prose .docs-codeblock pre,
.help-scope .help-prose pre {
  background: #1a1712;
  color: #f3efe6;
  border: 1px solid rgb(var(--cream-300));
  border-radius: 8px;
  padding: 1em;
  overflow-x: auto;
  margin: 1em 0;
}
.help-scope .help-prose .docs-codeblock pre { margin: 0; }
.help-scope .help-prose pre code { background: transparent; padding: 0; color: inherit; font-size: 0.85rem; }
/* Copy button lives on the fixed-dark code surface -> fixed colors are correct. */
.help-scope .help-prose .docs-codeblock__copy {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(243, 239, 230, 0.35);
  border-radius: 6px;
  background: rgba(26, 23, 18, 0.85);
  color: #f3efe6;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.help-scope .help-prose .docs-codeblock:hover .docs-codeblock__copy,
.help-scope .help-prose .docs-codeblock__copy:focus-visible { opacity: 1; }
.help-scope .help-prose .docs-codeblock__copy.is-copied { color: #d9f99d; border-color: #d9f99d; }

/* Callouts: pastel washes in Light/Pop, central wash tokens in Dark (same
   pattern as the wiki diff above — the wash tokens exist only in .dark). */
.help-scope .help-prose .docs-callout {
  border-radius: 8px;
  padding: 12px 16px;
  margin: 1em 0;
}
.help-scope .help-prose .docs-callout__title { font-weight: 700; margin-bottom: 4px; }
.help-scope .help-prose .docs-callout p { margin: 4px 0 0; }
.help-scope .help-prose .docs-callout--info    { background: #eef4fd; color: #1e3a5f; }
.help-scope .help-prose .docs-callout--tip     { background: #f3f9e8; color: #2a4208; }
.help-scope .help-prose .docs-callout--warning { background: #fef9e7; color: #7a5b00; }
.help-scope .help-prose .docs-callout--danger  { background: #fdecec; color: #9b1c1c; }
.dark .help-scope .help-prose .docs-callout--info    { background: var(--wash-accent-bg);  color: var(--wash-accent-text); }
.dark .help-scope .help-prose .docs-callout--tip     { background: var(--wash-success-bg); color: var(--wash-success-text); }
.dark .help-scope .help-prose .docs-callout--warning { background: var(--wash-warning-bg); color: var(--wash-warning-text); }
.dark .help-scope .help-prose .docs-callout--danger  { background: var(--wash-danger-bg);  color: var(--wash-danger-text); }

/* Contextual-help drawer: flash the section heading the clicked question points
   at, so the eye lands on the answer inside the long page (contextual_help_
   drawer_controller adds/removes the class). Keyframes instead of a transition:
   self-contained fade-out, no permanent transition on prose headings needed.
   Light uses the warning-wash tint literal (same as .docs-callout--warning),
   dark resolves the token — the var() fallback covers light, where the wash
   tokens are undefined. */
.help-scope .contextual-help-highlight {
  animation: contextual-help-flash 2s ease-out;
}
@keyframes contextual-help-flash {
  0%, 40% { background-color: var(--wash-warning-bg, #fef9e7); }
  100% { background-color: transparent; }
}

/* ============================================================================
   Access matrix (Organisations::AccessMatrixController#index)
   Excel-style data grid: sticky first column (names) + sticky header (projects),
   inside one bounded scroll region so both freeze on scroll. Theme-aware via the
   cream/ink CSS tokens (no manual dark overrides needed — the tokens switch per
   theme). All rules scoped to the #access-matrix page anchor.
   ============================================================================ */
#access-matrix .am-scroll {
  position: relative;
  max-height: 70vh;
  overflow: auto;
  border: 1px solid rgb(var(--cream-300));
  border-radius: 8px;
}
#access-matrix .am-table { width: max-content; min-width: 100%; }
#access-matrix .am-table th,
#access-matrix .am-table td {
  border-bottom: 1px solid rgb(var(--cream-200));
  border-right: 1px solid rgb(var(--cream-200));
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
}
#access-matrix .am-table td { text-align: center; }

/* Header row freezes on vertical scroll. */
#access-matrix .am-colhead {
  position: sticky; top: 0; z-index: 2;
  background: rgb(var(--cream-100));
  text-align: center; font-weight: 700;
}
/* Name column freezes on horizontal scroll. */
#access-matrix .am-rowhead {
  position: sticky; left: 0; z-index: 1;
  background: rgb(var(--cream-50));
  text-align: left; font-weight: 600; color: rgb(var(--ink));
}
/* Top-left corner freezes on both axes and must layer above the two. */
#access-matrix .am-corner {
  position: sticky; top: 0; left: 0; z-index: 3;
  background: rgb(var(--cream-100));
  text-align: left; font-weight: 700; color: rgb(var(--ink));
}
#access-matrix .am-colhead__link { color: rgb(var(--ink)); text-decoration: none; }
#access-matrix .am-colhead__link:hover { text-decoration: underline; }

/* Per-area breakdown popover on an access cell. */
#access-matrix .am-cell { position: relative; display: inline-block; }
#access-matrix .am-cell > summary { list-style: none; }
#access-matrix .am-cell > summary::-webkit-details-marker { display: none; }
#access-matrix .am-cell__pop {
  /* In-flow (not absolute): the .am-scroll ancestor is overflow:auto and would CLIP an
     absolutely-positioned popover near the grid edges — exactly the dense case this
     per-area breakdown exists for. Flowing below the pill trades a small on-open row-height
     bump for a disclosure that is never clipped and stays keyboard-reachable. */
  margin: 4px auto 0; width: max-content; max-width: 14rem;
  background: rgb(var(--cream-50)); border: 1px solid rgb(var(--cream-300));
  border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
  text-align: left; white-space: normal;
}
#access-matrix .am-cell__pop-title {
  font-weight: 700; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: rgb(var(--cream-600)); margin-bottom: 4px;
}
#access-matrix .am-cell__pop-list { display: flex; flex-direction: column; gap: 2px; }
#access-matrix .am-cell__pop-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.75rem; }
#access-matrix .am-cell__pop-area { color: rgb(var(--cream-700)); }
#access-matrix .am-cell__pop-level { font-weight: 600; color: rgb(var(--ink)); }

/* Project filter dropdown. */
#access-matrix .am-projectfilter > summary { list-style: none; }
#access-matrix .am-projectfilter > summary::-webkit-details-marker { display: none; }
#access-matrix .am-projectfilter__pop {
  position: absolute; z-index: 20; margin-top: 4px; min-width: 14rem; max-height: 16rem; overflow-y: auto;
  background: rgb(var(--cream-50)); border: 1px solid rgb(var(--cream-300));
  border-radius: 8px; padding: 8px 10px; box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
}

/* Stimulus filter hides non-matching rows/columns. */
#access-matrix .am-hidden { display: none !important; }

#access-matrix .am-cell > summary:focus-visible,
#access-matrix .am-colhead__link:focus-visible { outline: 2px solid rgb(var(--cream-600)); outline-offset: 2px; }

/* ============================================================
   Landing FAQ (static#index, section#faq)
   ============================================================
   One of the FAQ answers ("Was passiert mit meinen Daten bei den KI-Features?")
   comes as an _html key from the locales and brings a list with it. Tailwind's
   Preflight clears list-style, and utility classes in the locale string would
   depend on a content scan that does not necessarily cover YAML -- a
   silent defect instead of an error. That is why it sits here, scoped to the page
   anchor (CLAUDE.md: page-specific rules in views.css). */
#faq .faq-answer p { margin-bottom: 0.75rem; }
#faq .faq-answer ul { list-style: disc; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
#faq .faq-answer li::marker { color: rgb(107 114 128); }

/* ============================================================
   Bot trap on public forms (shared/_bot_trap_fields)
   ============================================================
   Deliberately NOT display:none and not hidden: simple scripts skip exactly
   those two signals, and then nobody falls in anymore. Pushing it off-screen
   keeps the field looking normal in the DOM. The rule must not live in the view
   (CLAUDE.md: no <style> blocks). */
.bot-trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

/* --- Knowledge list under the filter bar (doc/filterleiste_s5_s8_plan.md, S8, D5) ---
   Narrow, the weakest column goes: "Erstellt am". The frame measures its own
   width, so the rule follows the list, not the viewport. Tickets have no such
   rule: their columns are the reader's configuration. The width is the bar's
   narrow width (components/filter_bar.css, NARROW_WIDTH); change both together. */
#knowledge_results {
  display: block; /* a turbo-frame is inline by default, and an inline box cannot be a size container */
  container-type: inline-size;
  container-name: knowledge-results;
}

/* Meetings use the same compact-lane principle as knowledge: the title keeps
   the usable width while secondary columns fold away only when the list track
   itself becomes narrow (including a user-dragged split). */
#meetings_results {
  display: block;
  container-type: inline-size;
  container-name: meeting-results;
}

/* The same rank/pin fit rules as tickets govern the meeting table. */
.meeting-table { table-layout: fixed; }
.meeting-mobile-grid .column-picker:not([hidden]) {
  position: fixed;
  z-index: 80;
  top: 5rem;
  right: 1rem;
  width: min(268px, calc(100vw - 2rem));
  max-height: calc(100dvh - 6rem);
  border: 1px solid rgb(var(--cream-300));
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgb(var(--ink) / 0.15);
}

/* ⚠️ Folded to ZERO WIDTH, not display: none (user, 10.09.2026, with the lane
   open: the chosen row and its line stopped at 80% of the list while the ruled
   rows ran to the edge). A cell that is display: none leaves the table; the
   ruled rows still span four columns (shared/_ruled_rows, colspan = the head's
   cells), so a fourth column slot appeared that only the filler rows filled,
   and Blink paints a row's background and its borders per CELL, never over a
   slot without one. A cell of zero width stays in the row: the slots match on
   every row, the title (width: auto in the compact table, layout.css) takes
   the room. The content is hidden separately, or its min-content would hold
   the column open; the th wraps its label in a span for that. */
/* Beside an open lane the type column shows its icon alone (the word is
   hidden by layout.css, ".type-label"), and 5% of a narrow table is less than
   the icon: the cell ellipsised it to "icon.." (seen 10.09.2026). A fixed
   width for the icon, in the compact table only; wide, the word needs the
   share. */
.layout:not(.hide-content) #knowledge_results [data-column="type"] {
  width: 2.75rem;
}

@container knowledge-results (max-width: 520px) {
  #knowledge_results [data-fb-col-date] {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
  }

  #knowledge_results [data-fb-col-date] > * {
    display: none;
  }
}

/* ========================================================================
   Tickets: the selection box column (doc/ticket_bulk_edit_plan.md, slice 1;
   designer template 29a). Four states, one element: at rest a subdued
   outline that holds the table's left edge with something visible, on hover
   or focus a stronger one, ticked a filled ink square with a light check.
   The head box always carries the stronger tone, it stands alone. Only the
   contrast changes, never the hit area: the box is clickable in every state,
   or it would be out of reach for the keyboard and on a tablet. Tokens, not
   the template's hex values: --cream-300 is its #DCD6C7, --cream-500 the
   nearest to its #8A857A, and both follow the theme.
   ======================================================================== */
/* One fixed first column, head and rows alike, the box centred in it: the
   column begins on the page's edge, not the box, so the box has air on its
   left and head and rows are flush by construction (designer, 08.09.2026).
   The width is ONE value in both places: here and in the fit script
   (ViewConfiguration::SELECT_COLUMN_WIDTH_PX), never padding here and width
   there. */
#ticket-index-container .select-column {
  width: 40px; /* ViewConfiguration::SELECT_COLUMN_WIDTH_PX */
  min-width: 40px;
  padding-inline: 0;
  text-align: center;
  vertical-align: middle;
}

#ticket-index-container .ticket-select-box {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  border: 2px solid rgb(var(--cream-300));
  border-radius: 3px;
  background-color: transparent;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

#ticket-index-container .ticket-row:hover .ticket-select-box,
#ticket-index-container .ticket-select-box:hover,
#ticket-index-container .ticket-select-box:focus-visible,
#ticket-index-container .ticket-select-box--head {
  border-color: rgb(var(--cream-500));
}


#ticket-index-container .ticket-select-box:checked,
#ticket-index-container .ticket-select-box:indeterminate {
  border-color: rgb(var(--ink));
  background-color: rgb(var(--ink));
}

#ticket-index-container .ticket-select-box:checked::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: rgb(var(--on-fill));
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 22%, 84% 8%, 40% 66%);
}

#ticket-index-container .ticket-select-box:indeterminate::before {
  content: "";
  width: 8px;
  height: 2px;
  background-color: rgb(var(--on-fill));
}

/* Without a pointer that hovers there is no "stronger on hover": the box
   stands in the stronger tone all the time. */
@media (pointer: coarse) {
  #ticket-index-container .ticket-select-box {
    border-color: rgb(var(--cream-500));
  }
}

/* The ticked row carries the tint that means "selected" everywhere (F6). An
   opened row keeps its own tint (layout.css .selected-row): open beats
   ticked, the check in the box still says ticked. */
#ticket-index-container .ticket-row.selection-ticked:not(.selected-row),
#ticket-index-container .ticket-row.selection-ticked:not(.selected-row):hover {
  background-color: rgb(var(--cream-200));
}

/* ------------------------------------------------------------------------
   Tickets: the bulk panel in the lane (doc/ticket_bulk_edit_plan.md, slice 4).
   The control of a change row in field look (surface-raised, the field's
   own edge), and the confirming button GREY while it cannot act: lime is the
   one filled surface in the panel, and it appears only when there is
   something to confirm (29a §6).
   ------------------------------------------------------------------------ */
#ticket-index-container .ticket-bulk-panel .tbp-control {
  height: 2rem;
  max-width: 100%;
  border: 1px solid rgb(var(--cream-400));
  border-radius: 0.375rem;
  background-color: rgb(var(--white));
  padding: 0 0.5rem;
  font-size: 0.875rem;
  color: rgb(var(--cream-900));
}

/* The panel's own dropdown for a single value (designer, 08.09.2026): field
   look, the word left, the chevron an SVG 6 px behind it, the options in the
   same layer the multi field uses. Focus a set-off ring, never a hard ink
   outline on the field (that is the language of the main action). */
#ticket-index-container .ticket-bulk-panel .tbp-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 2rem;
  max-width: 100%;
  padding: 0 0.625rem;
  border: 1px solid rgb(var(--cream-400));
  border-radius: 8px;
  background-color: rgb(var(--white)); /* the raised surface of the theme */
  font-size: 13px;
  color: rgb(var(--cream-900));
  text-align: start;
}
#ticket-index-container .ticket-bulk-panel .tbp-select:hover { border-color: rgb(var(--cream-500)); }
#ticket-index-container .ticket-bulk-panel .tbp-select:focus { outline: none; }
#ticket-index-container .ticket-bulk-panel .tbp-select:focus-visible { outline: 2px solid rgb(var(--ink)); outline-offset: 2px; }
#ticket-index-container .ticket-bulk-panel .tbp-select[data-value=""] { color: rgb(var(--cream-700)); }
#ticket-index-container .ticket-bulk-panel .tbp-select-chevron { width: 10px; height: 10px; flex: none; color: rgb(var(--cream-600)); }
#ticket-index-container .ticket-bulk-panel .tbp-option[aria-selected="true"] { font-weight: 600; color: rgb(var(--cream-900)); }

/* Focus is a set-off ring, not a stronger border: the field keeps its one
   look, and the ink outline stays the language of the main action
   (designer, 08.09.2026). */
#ticket-index-container .ticket-bulk-panel .tbp-control:focus {
  outline: none;
}
#ticket-index-container .ticket-bulk-panel .tbp-control:focus-visible {
  outline: 2px solid rgb(var(--ink));
  outline-offset: 2px;
}

/* The confirming button is the main action (Neo::Buttons::Base, PRIMARY):
   lime, the one hard edge, the offset shadow, and its own off state come from
   the component since 08.09.2026; nothing is overridden here. */

/* "Abbrechen" is a word, not a link (designer, 08.09.2026): no underline,
   muted at rest, ink on a tinted surface on hover and keyboard focus. */
#ticket-index-container .ticket-bulk-panel .tbp-cancel {
  height: 2rem;
  padding: 0 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--cream-600));
}
#ticket-index-container .ticket-bulk-panel .tbp-cancel:hover:not(:disabled),
#ticket-index-container .ticket-bulk-panel .tbp-cancel:focus-visible {
  background-color: rgb(var(--cream-100));
  color: rgb(var(--cream-900));
}
#ticket-index-container .ticket-bulk-panel .tbp-cancel:disabled {
  color: rgb(var(--cream-400));
  cursor: not-allowed;
}

/* Tickets: the bulk panel's multi-valued rows (doc/ticket_bulk_edit_plan.md,
   slice 5). A chip is one value of the draft: "+ Backend" sets it on every
   selected ticket, "− Doku" removes it from every one; clicking the chip takes
   it out of the change. The dashed "+ Tag" opens the layer, the layer stays
   open between clicks (a multi-valued list is worked through), and each
   value carries a three-state box: nobody, some, all. */
/* The layer hangs off the ROW, not the control column: the column is as
   narrow as the lane leaves it, and a layer sized to it would overflow a
   narrow lane sideways. Under the row it can be as wide as the row. */
#ticket-index-container .ticket-bulk-panel .ticket-bulk-row { position: relative; }

#ticket-index-container .ticket-bulk-panel .tbp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.75rem;
  padding: 0 0.625rem;
  border-radius: 9999px;
  border: 1px solid rgb(var(--cream-300));
  background-color: rgb(var(--cream-200));
  font-size: 13px;
  color: rgb(var(--cream-900));
  white-space: nowrap;
}
#ticket-index-container .ticket-bulk-panel .tbp-chip:hover { border-color: rgb(var(--ink)); }
#ticket-index-container .ticket-bulk-panel .tbp-chip:focus-visible { outline: 2px solid rgb(var(--ink)); outline-offset: 1px; }
#ticket-index-container .ticket-bulk-panel .tbp-chip--remove { background-color: rgb(var(--cream-100)); text-decoration: line-through; text-decoration-color: rgb(var(--cream-500)); }

#ticket-index-container .ticket-bulk-panel .tbp-add-value {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.75rem;
  padding: 0 0.625rem;
  border-radius: 9999px;
  border: 1px dashed rgb(var(--cream-400));
  background-color: transparent;
  font-size: 13px;
  color: rgb(var(--cream-800));
  white-space: nowrap;
}
#ticket-index-container .ticket-bulk-panel .tbp-add-value:hover,
#ticket-index-container .ticket-bulk-panel .tbp-add-value[aria-expanded="true"] { border-color: rgb(var(--ink)); color: rgb(var(--cream-900)); }
#ticket-index-container .ticket-bulk-panel .tbp-add-value:focus-visible { outline: 2px solid rgb(var(--ink)); outline-offset: 1px; }

#ticket-index-container .ticket-bulk-panel .tbp-layer {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  z-index: 20;
  margin-top: 0.25rem;
  width: min(20rem, 100%);
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--cream-300));
  background-color: rgb(var(--white));
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
#ticket-index-container .ticket-bulk-panel .tbp-search {
  width: 100%;
  height: 2rem;
  margin-bottom: 0.25rem;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid rgb(var(--cream-300));
  background-color: rgb(var(--white));
  font-size: 13px;
}
#ticket-index-container .ticket-bulk-panel .tbp-search:focus { outline: none; border-color: rgb(var(--ink)); box-shadow: 0 0 0 1px rgb(var(--ink)); }
#ticket-index-container .ticket-bulk-panel .tbp-option,
#ticket-index-container .ticket-bulk-panel .tbp-new-value {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  text-align: start;
  font-size: 0.875rem;
  color: rgb(var(--cream-800));
}
#ticket-index-container .ticket-bulk-panel .tbp-option:hover,
#ticket-index-container .ticket-bulk-panel .tbp-new-value:hover { background-color: rgb(var(--cream-100)); }
#ticket-index-container .ticket-bulk-panel .tbp-option:focus-visible,
#ticket-index-container .ticket-bulk-panel .tbp-new-value:focus-visible { outline: 2px solid rgb(var(--ink)); outline-offset: -2px; }
/* The display above outranks the hidden attribute: the offer of a new tag
   waits hidden until a typed name matches no tag. */
#ticket-index-container .ticket-bulk-panel .tbp-new-value[hidden] { display: none; }

#ticket-index-container .ticket-bulk-panel .tbp-tri {
  display: inline-grid;
  place-content: center;
  width: 14px;
  height: 14px;
  flex: none;
  border: 2px solid rgb(var(--cream-400));
  border-radius: 3px;
  background-color: transparent;
}
#ticket-index-container .ticket-bulk-panel .tbp-tri.is-all,
#ticket-index-container .ticket-bulk-panel .tbp-tri.is-some { border-color: rgb(var(--ink)); background-color: rgb(var(--ink)); }
#ticket-index-container .ticket-bulk-panel .tbp-tri.is-all::before {
  content: "";
  width: 8px;
  height: 8px;
  background-color: rgb(var(--on-fill));
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 22%, 84% 8%, 40% 66%);
}
#ticket-index-container .ticket-bulk-panel .tbp-tri.is-some::before {
  content: "";
  width: 7px;
  height: 2px;
  background-color: rgb(var(--on-fill));
}

/* A word as an action beside a control (the date's "kein Datum"): pressed it
   reads as chosen, the field beside it steps back. */
#ticket-index-container .ticket-bulk-panel .tbp-word {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(var(--cream-800));
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 0.25rem;
}
#ticket-index-container .ticket-bulk-panel .tbp-word:hover { color: rgb(var(--cream-900)); }
#ticket-index-container .ticket-bulk-panel .tbp-word:focus-visible { outline: 1px solid rgb(var(--ink)); }
#ticket-index-container .ticket-bulk-panel .tbp-word[aria-pressed="true"] {
  text-decoration: none;
  background-color: rgb(var(--cream-200));
  padding: 0.125rem 0.5rem;
  color: rgb(var(--cream-900));
}
#ticket-index-container .ticket-bulk-panel .tbp-control:disabled { opacity: 0.5; cursor: not-allowed; }

/* Tickets: the bulk panel's other actions and their dialogs
   (doc/ticket_bulk_edit_plan.md, slice 7). A row under the hairline is a
   text action with its icon; the delete row is the only red one. The dialog
   is the browser's own <dialog>: modal, focus kept inside, Escape closes;
   its foot is the full-width button row every modal here has. */
#ticket-index-container .ticket-bulk-panel .tbp-other {
  display: block;
  width: 100%;
  padding: 0.3125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 13px;
  color: rgb(var(--cream-800));
  text-align: start;
}
#ticket-index-container .ticket-bulk-panel .tbp-other:hover { background-color: rgb(var(--cream-100)); color: rgb(var(--cream-900)); }
#ticket-index-container .ticket-bulk-panel .tbp-other:focus-visible { outline: 2px solid rgb(var(--ink)); outline-offset: -2px; }
#ticket-index-container .ticket-bulk-panel .tbp-other:disabled { color: rgb(var(--cream-500)); cursor: not-allowed; background-color: transparent; }
#ticket-index-container .ticket-bulk-panel .tbp-other--danger:not(:disabled) { color: rgb(185 28 28); }

#ticket-index-container .ticket-bulk-panel .tbp-dialog {
  width: min(28rem, calc(100vw - 2rem));
  padding: 1.25rem;
  border: 2px solid rgb(var(--ink));
  border-radius: 0.5rem;
  background-color: rgb(var(--white));
  color: rgb(var(--cream-900));
  box-shadow: 4px 4px 0 rgb(var(--ink));
}
#ticket-index-container .ticket-bulk-panel .tbp-dialog::backdrop { background-color: rgb(0 0 0 / 0.35); }

#ticket-index-container .ticket-bulk-panel .tbp-dialog-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(var(--cream-200));
}
#ticket-index-container .ticket-bulk-panel .tbp-dialog-foot > * { width: 100%; }
#ticket-index-container .ticket-bulk-panel .tbp-dialog-foot form,
#ticket-index-container .ticket-bulk-panel .tbp-dialog-foot button { justify-content: center; }
#ticket-index-container .ticket-bulk-panel .tbp-dialog-cancel {
  height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid rgb(var(--cream-300));
  border-radius: 0.375rem;
  background-color: rgb(var(--cream-100));
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--cream-800));
}
#ticket-index-container .ticket-bulk-panel .tbp-dialog-cancel:hover { background-color: rgb(var(--cream-200)); }
#ticket-index-container .ticket-bulk-panel .tbp-dialog-danger {
  height: 2.5rem;
  padding: 0 1rem;
  border: 2px solid rgb(var(--ink));
  border-radius: 0.375rem;
  background-color: rgb(185 28 28);
  font-size: 0.875rem;
  font-weight: 700;
  color: rgb(var(--white));
}
#ticket-index-container .ticket-bulk-panel .tbp-dialog-danger:hover:not(:disabled) { background-color: rgb(153 27 27); }
#ticket-index-container .ticket-bulk-panel .tbp-dialog-danger:disabled {
  background-color: rgb(var(--cream-200));
  border-color: rgb(var(--cream-300));
  color: rgb(var(--cream-600));
  cursor: not-allowed;
}
#ticket-index-container .ticket-bulk-panel .tbp-dialog-cancel:focus-visible,
#ticket-index-container .ticket-bulk-panel .tbp-dialog-danger:focus-visible { outline: 2px solid rgb(var(--ink)); outline-offset: 2px; }

/* ===========================================================================
   Legal pages of an instance (/legal/<seite>, LegalPagesController)
   ---------------------------------------------------------------------------
   The operator writes the text in the admin area, this page serves it.
   It runs in the application_sessionless layout, which does NOT load auth.css,
   which is why the styling sits here and not there. The width comes from
   layout.css (.width-text, 70ch): a legal text is running text.
   =========================================================================== */
.legal-page {
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

.legal-page-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* The body comes from Markdown, so the rules target the generated
   elements instead of classes. */
.legal-page-body h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2rem 0 0.75rem;
}

.legal-page-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}

.legal-page-body p,
.legal-page-body ul,
.legal-page-body ol {
  margin-bottom: 1rem;
  line-height: 1.65;
}

.legal-page-body ul,
.legal-page-body ol {
  padding-left: 1.25rem;
  list-style: revert;
}

.legal-page-body a {
  text-decoration: underline;
}

.legal-page-back {
  margin-top: 2.5rem;
  font-size: 0.9rem;
}

.legal-page-back a {
  text-decoration: underline;
}
/* SlimSelect Neo-Brutalist Overrides */

/* Main select container */
.ss-main {
  border: 1px solid black !important;
  border-radius: 0.375rem !important;
  background-color: rgb(var(--white)) !important;
  transition: all 0.2s !important;
}

.ss-main:hover {
  background-color: rgb(247 254 231) !important; /* lime-50 */
  box-shadow: 2px 2px 0 0 #000000 !important;
}

.ss-main:focus,
.ss-main.ss-open {
  box-shadow: 2px 2px 0 0 #000000 !important;
  outline: none !important;
}

/* Dark mode */
.dark .ss-main {
  background-color: black !important;
  color: white !important;
}

/* Single select display */
.ss-single-selected {
  background-color: transparent !important;
  border: none !important;
  color: black !important;
  padding: 0.5rem 0.75rem !important;
  height: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
}

.dark .ss-single-selected {
  color: white !important;
}

/* Arrow icon */
.ss-arrow {
  border-color: black !important;
}

.dark .ss-arrow {
  border-color: white !important;
}

/* Dropdown content */
.ss-content {
  border: 1px solid black !important;
  border-radius: 0.375rem !important;
  background-color: rgb(var(--white)) !important;
  margin-top: 0.25rem !important;
  box-shadow: 4px 4px 0 0 #000000 !important;
}

.dark .ss-content {
  background-color: black !important;
  border-color: white !important;
}

/* Options */
.ss-option {
  background-color: rgb(var(--white)) !important;
  color: black !important;
  padding: 0.5rem 0.75rem !important;
  transition: all 0.15s !important;
}

.dark .ss-option {
  background-color: black !important;
  color: white !important;
}

.ss-option:hover,
.ss-option.ss-highlighted {
  background-color: rgb(247 254 231) !important; /* lime-50 */
  color: black !important;
}

.dark .ss-option:hover,
.dark .ss-option.ss-highlighted {
  background-color: rgb(38 38 38) !important; /* gray-800 */
  color: white !important;
}

.ss-option.ss-selected {
  background-color: rgb(217 249 157) !important; /* lime-200 */
  color: black !important;
}

.dark .ss-option.ss-selected {
  background-color: rgb(101 163 13) !important; /* lime-700 */
  color: white !important;
}

/* Multi-select specific styles */
.ss-multi-selected {
  min-height: 38px !important;
  padding: 0.25rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

/* Multi-select values (tags) */
.ss-values .ss-value {
  background-color: #e0e7ff !important; /* indigo-100 */
  border: 1px solid #4f46e5 !important; /* indigo-600 */
  border-radius: 0.5rem !important;
  padding: 0.125rem 0.5rem !important;
  margin: 0.125rem !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

.ss-values .ss-value .ss-value-text {
  color: #312e81 !important; /* indigo-900 */
}

.ss-values .ss-value-delete {
  margin-left: 0.25rem !important;
  cursor: pointer !important;
  color: #6366f1 !important; /* indigo-500 */
}

.ss-values .ss-value-delete:hover {
  color: #4f46e5 !important; /* indigo-600 */
}

/* Search box */
.ss-search input {
  border: 1px solid black !important;
  border-radius: 0.25rem !important;
  padding: 0.5rem !important;
  background-color: rgb(var(--white)) !important;
  color: black !important;
}

.dark .ss-search input {
  background-color: black !important;
  border-color: white !important;
  color: white !important;
}

.ss-search input:focus {
  outline: none !important;
  box-shadow: 2px 2px 0 0 #000000 !important;
}

/* Disabled state */
.ss-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Remove any gray colors */
.ss-main,
.ss-content,
.ss-option,
.ss-single-selected,
.ss-search input {
  border-color: black !important;
}

/* Ensure no gray backgrounds */
.ss-main:not(:hover),
.ss-content,
.ss-option:not(:hover):not(.ss-highlighted):not(.ss-selected) {
  background-color: rgb(var(--white)) !important;
}

.dark .ss-main:not(:hover),
.dark .ss-content,
.dark .ss-option:not(:hover):not(.ss-highlighted):not(.ss-selected) {
  background-color: black !important;
}
/* Help System Styles */

/* Accessibility: Focus styles */
.neo-help-icon-component button:focus-visible {
  outline: 2px solid #84cc16;
  outline-offset: 2px;
}

/* Ensure proper stacking */
#help-modal-ticket_header {
  z-index: 50; /* modal */
}

/* Screen reader only class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
/* app/assets/stylesheets/components/custom_select.css
 *
 * Custom dropdown component of the project permissions (project_permissions/index,
 * Stimulus: custom-select). Lived until 06/2026 as the <style> partial _styles.html.erb in the views. */

/* Styles for custom dropdowns */
.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-select {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid rgb(var(--cream-300));
  border-radius: 0.375rem;
  background-color: rgb(var(--white));
  cursor: pointer;
  font-size: 0.75rem;
}

.custom-select.no-access {
  border-color: #ef4444;
  color: #ef4444;
}

.custom-select.read-only {
  border-color: #f59e0b;
  color: #f59e0b;
}

.custom-select.read-write {
  border-color: #10b981;
  color: #10b981;
}

.custom-select i {
  margin-right: 0.5rem;
}

.custom-select::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #888;
}

.custom-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: rgb(var(--white));
  border: 1px solid rgb(var(--cream-300));
  border-radius: 0.375rem;
  margin-top: 2px;
  z-index: 30; /* dropdown */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  display: none;
}

.custom-dropdown.open {
  display: block;
}

.custom-option {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  cursor: pointer;
}

.custom-option:hover {
  background-color: rgb(var(--cream-100));
}

.custom-option.selected {
  background-color: rgb(var(--cream-200));
}

.custom-option i {
  margin-right: 0.5rem;
}

.default-option {
  background-color: rgb(var(--cream-50));
}

/* Hide original select */
.hidden-select {
  display: none;
}

/* Icon Radio Button Styles */
input[type="radio"]:checked + i {
  padding: 2px;
  border-radius: 9999px;
  box-shadow: 0 0 0 2px currentColor;
}

label:has(input[type="radio"]) i {
  transition: all 0.15s ease;
}

label:has(input[type="radio"]):hover i {
  transform: scale(1.1);
}
/* Wiki @-mention reference chip (note → note | document).
 * Rendered by app/views/wiki/mentions/_mention.html.erb in both the Lexxy editor and the
 * displayed note. Makes a reference stand out from running text as a small pill with a
 * type icon (journal = note, file = document), instead of looking like plain text. */

.wiki-mention {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.05em 0.45em;
  border: 1px solid #e2d9c7;
  border-radius: 0.35em;
  background-color: #f1ece1;
  color: #4a4032;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.wiki-mention .bi {
  font-size: 0.85em;
  opacity: 0.7;
}

/* Only the linked (accessible) variant reacts to hover. */
a.wiki-mention:hover {
  border-color: #cbbfa6;
  background-color: #e9e0cd;
  color: #2c2418;
}

/* No read access (e.g. a document mention seen without documents access): muted, no link. */
.wiki-mention--inaccessible {
  cursor: default;
  opacity: 0.65;
}
/* Hint under a rich-text editor when the browser-side image check refused a file
   (neo_rich_text_embeds_controller). The rule lives on the server; this only explains. */
.rich-text-embeds__hint {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid rgb(var(--stroke));
  background: rgb(var(--white));
  font-size: 0.875rem;
  line-height: 1.4;
}

.rich-text-embeds__hint[hidden] {
  display: none;
}

/* Placeholder for an <action-text-attachment> whose image no longer exists
   (app/views/active_storage/blobs/_missing.html.erb). */
.attachment--missing {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 2px dashed rgb(var(--stroke));
  font-size: 0.875rem;
  opacity: 0.7;
}

/* Zoom link around an inline image (active_storage/blobs/_blob.html.erb); the cursor is
   the only hint, the image itself stays as Lexxy's content stylesheet renders it. */
.lexxy-content .attachment__zoom {
  cursor: zoom-in;
  display: block;
}

/* Lightbox opened by neo_rich_text_zoom_controller: a native <dialog>, so Escape and
   focus handling come from the browser. Backdrop and close button are deliberately
   theme-independent (always near-black stage, light controls), like the scrim token. */
.rich-text-zoom {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
}

.rich-text-zoom::backdrop {
  background: rgba(0, 0, 0, 0.88);
}

.rich-text-zoom__image {
  display: block;
  max-width: 96vw;
  max-height: 92vh;
  border: 2px solid rgb(var(--stroke));
  /* Deliberately theme-independent: the backdrop is near-black in every theme, and a
     transparent image needs a light plate to stay readable. */
  background: #fff;
  cursor: zoom-out;
}

.rich-text-zoom__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid #fff;
  background: #111;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
/* The ticket writing surface (organisations/tickets/_writing_surface). A large modal,
   not a full takeover: the dimmed page stays visible around the panel, so it still
   reads as a window over the list (user wish 23.08.). Soft-flat skin since 05.09.2026
   (same language as the detail header and the time capture popover): 1px cream frame,
   soft drop shadow, 12px radius, hairline separators — the hard ink border and the
   offset shadow are gone. Colors ONLY through the token layer
   (application.tailwind.css: --cream-*, --stroke, --scrim, --white = raised), so Dark
   and Pop flip the surface with the rest of the page; the few deliberate exceptions
   carry their own .dark override below. Two columns from md up: the description takes the
   remaining height and scrolls inside; the meta column keeps assignment, attributes,
   attachments and the buttons in view while writing. On small screens the panel fills
   the viewport, margins would only cost writing room there. */
.writing-surface {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  background: rgb(var(--scrim) / 0.45);
  overflow: hidden;
}

body:has(.writing-surface) {
  overflow: hidden;
}

.writing-surface__form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: rgb(var(--cream-50));
}

@media (min-width: 768px) {
  .writing-surface {
    padding: 2rem clamp(2rem, 4vw, 4rem) 2.5rem;
  }

  .writing-surface__form {
    max-width: 1360px;
    margin: 0 auto;
    border: 1px solid rgb(var(--cream-400));
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 20px 40px -20px rgba(35, 34, 30, 0.45);
  }
}

.writing-surface__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgb(var(--cream-300));
  background: rgb(var(--white));
}

.writing-surface__heading {
  font-size: 1.125rem;
  font-weight: 600;
}

.writing-surface__errors {
  margin: 1rem 1.25rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  background: #fef2f2;
}

.writing-surface__errors ul {
  margin-top: 0.25rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.writing-surface__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.25rem;
  overflow-y: auto;
}

.writing-surface__main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.writing-surface__meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.writing-surface__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.writing-surface__hint {
  font-size: 0.8125rem;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}

.writing-surface__title,
.writing-surface__select,
.writing-surface__file {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgb(var(--stroke));
  border-radius: 0.5rem;
  background: rgb(var(--white));
}

.writing-surface__title {
  font-size: 1.25rem;
  font-weight: 600;
}

.writing-surface__editor {
  flex: 1 1 auto;
  min-height: 16rem;
  border: 1px solid rgb(var(--stroke));
  border-radius: 0.5rem;
  background: rgb(var(--white));
  display: flex;
  flex-direction: column;
}

/* Lexxy's editable area fills the editor box and scrolls inside it. */
.writing-surface__editor .lexxy-editor__content {
  flex: 1 1 auto;
  min-height: 12rem;
  overflow-y: auto;
  padding: 0.75rem 1rem;
}

.writing-surface__field--invalid {
  border-color: #b91c1c;
}

.writing-surface__attachments {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.writing-surface__attachments li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.writing-surface__remove {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  font-size: 0.75rem;
  color: #b91c1c;
  cursor: pointer;
}

/* Full-width footer row of the panel (user wish 24.08.: the buttons get a whole line,
   inside the meta column they wrapped and looked cramped). Sibling of the scrolling
   columns area, so it stays in view like the header. */
.writing-surface__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex: 0 0 auto;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid rgb(var(--cream-300));
  background: rgb(var(--white));
}

/* The delete link keeps its distance from save/cancel: first in the row, pushed left. */
.writing-surface__delete {
  margin-right: auto;
}

@media (min-width: 768px) {
  .writing-surface__columns {
    grid-template-columns: minmax(0, 1fr) 20rem;
    overflow: hidden;
  }

  .writing-surface__main {
    overflow: hidden;
  }

  .writing-surface__meta {
    overflow-y: auto;
    border-left: 1px solid rgb(var(--cream-300));
    padding-left: 1.25rem;
  }
}

/* ---- Dark adjustments (mirrors the app-wide policies in application.tailwind.css) ---- */

/* The soft drop shadow stays in Dark (the capture popover keeps its own too);
   only the old hard offset shadow fell under the app-wide Dark ban. */

/* Status wash instead of the light red tint (same tokens as the .dark bg-red-* rules). */
.dark .writing-surface__errors {
  background: var(--wash-danger-bg);
  border-color: var(--wash-danger-text);
  color: var(--wash-danger-text);
}

.dark .writing-surface__field--invalid {
  border-color: var(--wash-danger-text);
}

.dark .writing-surface__remove {
  color: var(--wash-danger-text);
}
/* The view switch's icon pair (NeoViewSwitchComponent, variant :icon_pair).
   The caption is the title (mouse) and the aria-label (screen reader); on
   KEYBOARD focus this shows the same word under the tile, because a native
   title never opens on focus, and a function the keyboard cannot name is
   unnamed. Not on hover: there the title already answers, and two tooltips
   over one tile would be two signals for one word. Tokens, so the tip
   follows the theme. */
.view-switch-tile {
  position: relative;
}

.view-switch-tile:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgb(var(--ink));
  color: rgb(var(--cream-50));
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  z-index: 60;
}
/* ==========================================================================
   Assistant companion panel (S3a T4, plan §7.7)
   --------------------------------------------------------------------------
   The panel is a fixed, full-height column. Its BODY is the shared chat
   components, which were written for a page that scrolls as a whole: the
   transcript, the composer and the style pills simply follow each other.

   Inside a fixed column that is the wrong behaviour -- the composer would
   scroll out of reach exactly when the conversation gets long enough to need
   it. So the panel turns that stack into a flex column here, in CSS, instead of
   giving ChatContainerComponent a second layout mode: the components stay one
   shape, and the surface that has a different container solves its own problem.

   Everything is scoped to #assistant_panel. The same components keep rendering
   unchanged on the chat pages.
   ========================================================================== */

/* Addressed by POSITION, not by name: `> turbo-frame` is the one direct frame
   child the panel body has. The first version of these rules named the frame
   (#chat-show), and the very next change gave the panel a frame id of its own --
   at which point all three rules below silently stopped matching and the
   transcript ran out of the panel again. A selector that repeats an identifier
   defined somewhere else is the same defect as five hand-copied redirects, only
   in another language. */

/* The chat's own turbo frame has to become a flex column, otherwise the
   flex-1 on the transcript below has nothing to stretch inside of. */
#assistant_panel_body > turbo-frame {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0 1rem;
}

/* The transcript is the only part that scrolls. role="log" is the container
   ChatContainerComponent gives the message list; assistant_panel_controller
   remembers and restores its scrollTop across Turbo transplants by the same
   selector, so the two stay in step. */
#assistant_panel_body > turbo-frame > [role="log"] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-top: 1rem;
}

/* Composer, style pills and notices stay put at the bottom. */
#assistant_panel_body > turbo-frame > *:not([role="log"]) {
  flex-shrink: 0;
}

/* The panel is narrow: quotes, tables and code in an answer must scroll inside
   their own box rather than widening the column. */
#assistant_panel table,
#assistant_panel pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   The content offset (S3a T4). Two things used to decide it: the server wrote
   an inline margin on <main> from the cookie, and the controller wrote another
   one after asking window.innerWidth. Two writers, and only the second knew
   about the breakpoint -- so a hard reload on a narrow window pushed the page
   aside for a panel that is `hidden lg:block`, and growing the window past
   1024px left the panel lying on top of the content until something else
   triggered a re-apply.

   Now there is ONE writer of the value (an offset custom property on <body>,
   set by the server for the first paint and by the controller afterwards) and
   ONE place that decides whether it applies at all: this media query. It must
   stay in step with `hidden lg:block` on the panel and with Tailwind's lg.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* ⚠️ CHILD combinator, not a descendant one. `body.assistant-panel-open main`
     also matches the SECOND <main> that NeoTwoColumnGridComponent renders as its
     content column on the tickets, knowledge and meetings pages -- that column
     then gets the same 636px offset inside its own grid track and shrinks to a
     strip at the right edge while the list lane collapses next to it. The layout
     <main> is a direct child of <body> (layouts/application.html.erb), so the
     child combinator says exactly what is meant.

     The first version of this offset lived in JavaScript as
     root.querySelector("main"), which took the FIRST match and was therefore
     accidentally right; moving the rule into CSS lost that without anything
     going red, because no spec rendered the panel on a page that HAS lanes. */
  body.assistant-panel-open > main {
    margin-inline-start: var(--assistant-panel-offset, 16rem);
  }
}

/* --------------------------------------------------------------------------
   The lanes (S3c T2, plan §7.2/§4). A grid INSIDE the panel, not the page-level
   `.layout` grid of layout.css: that one lives in <main>, takes its height from
   layout_toggle_controller at runtime and is addressed through
   `main:has(.layout)`. The panel is a fixed element at body level and can join
   none of that, so L6 ("use the existing three-lane grid") cannot be followed
   literally any more since Rev. 5 turned the assistant into a companion lane.
   What L6 wanted still holds: this is not a third hand-written master-detail
   arrangement on a PAGE, it is the panel's own inside, with its own inhabitants.

   Companion mode is ONE track. The history lane is display:none rather than
   removed, so switching modes stays pure CSS and the chat frame is never
   re-fetched -- a typed draft, the scroll position and a streaming answer all
   survive the way up and back down.
   -------------------------------------------------------------------------- */
.assistant-lanes {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
}

.assistant-lane-history {
  display: none;
  min-height: 0;
  overflow-y: auto;
  border-inline-end: 1px solid rgb(var(--cream-300));
}

/* --------------------------------------------------------------------------
   The full view: the same node, maximised (L11). It keeps `start-64` because the
   sidebar is the app's anchor and must not move -- the assistant travels INSIDE
   the app, not over it.

   `width: auto` needs the inline width gone, and an inline style outranks any
   class: the shell renders the width ONLY in companion mode, and the controller
   clears it on the way up and writes it again on the way down. No !important,
   and one owner of the value either way.
   -------------------------------------------------------------------------- */
.assistant-panel--full {
  inset-inline-end: 0;
  width: auto;
}

.assistant-panel--full .assistant-lanes {
  /* R-L1: the page grid would give the history lane `minmax(380px, 2fr)`, about
     40 percent of the width, which is the wrong shape here -- the list is a
     column of one-line labels and the conversation is the work. Narrow, capped,
     and it stops shrinking before the labels become unreadable. The third track
     (the artefact lane) joins in T3. */
  grid-template-columns: minmax(200px, 16%) 1fr;
}

.assistant-panel--full .assistant-lane-history {
  display: block;
}

/* The page underneath is covered, not accompanied. Without this it keeps its own
   scrollbar next to a full-screen panel, and a wheel over the panel's edges
   moves a page nobody can see. */
body.assistant-panel-full {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   The artefact lane (S3c T3, plan §4, §8.1). The third track, and the only one
   that is not always there: it appears when a panel is open and disappears with
   it, so the grid template lives on a class of its own rather than in the
   full-view rule above.

   It is for content WITHOUT a page of its own (a report today; results and
   proposals later). Objects that HAVE a page keep opening the real app -- the
   panel steps down to the companion mode for that, because a page nobody can see
   is the same as no page at all.

   Both classes are required. Closing the full view therefore hides the lane
   without forgetting it, and coming back up shows it again.
   -------------------------------------------------------------------------- */
.assistant-lane-artefact {
  display: none;
  min-height: 0;
  flex-direction: column;
  border-inline-start: 1px solid rgb(var(--cream-300));
}

.assistant-panel--full.assistant-panel--artefact .assistant-lanes {
  /* §7.2's proportions: the history is a column of one-line labels, the chat is
     where one types, and the artefact is the widest because it carries rows and
     numbers. minmax(0, …) on both work tracks so a long unbreakable string in a
     description cannot push the grid wider than the panel. */
  grid-template-columns: minmax(200px, 16%) minmax(0, 1fr) minmax(0, 1.2fr);
}

.assistant-panel--full.assistant-panel--artefact .assistant-lane-artefact {
  display: flex;
}

/* --------------------------------------------------------------------------
   The context offer (S4 T2 step 5b, plan §7.3) needs NO rule here any more.

   It used to be a bar pinned to the panel's bottom edge, spanning the whole
   shell, and in the full view that meant ~1400px with the ticket's name at one
   end and its button at the other -- hence a max-width on its inner row. Since
   27.08.2026 it renders inside the chat frame, above the message field
   (Neo::Chat::ContextOfferComponent), so it is as wide as the field and the
   cap would now make it NARROWER than the thing it belongs to.
   -------------------------------------------------------------------------- */


/* The existing composer also owns meeting prompts, on every viewport. */
.assistant-analysis-template-list { max-height: 25vh; overflow-y: auto; }

.assistant-analysis-tools { max-height: 30vh; overflow-y: auto; }

/* Display utilities must not reveal closed forms or permission-gated links. */
.assistant-analysis-tools [hidden],
[data-controller~="assistant-analysis"] [hidden] { display: none; }

/* Meeting examples and task options can exceed a phone's remaining height.
   Scroll the existing composer wrapper in both new and saved chats, leaving
   room for the conversation and keeping focus/Send inside the sheet. */
@media (max-width: 1023px) {
  #assistant_panel_body > div:has(> form[data-controller~="neo-chat-composer"]),
  #assistant_panel_body > turbo-frame > turbo-frame:has(> form[data-controller~="neo-chat-composer"]) {
    flex-shrink: 1;
    min-height: 0;
    max-height: 60%;
    overflow-y: auto;
  }
}
/* ==========================================================================
   Hover-reveal of per-row actions (29.08.2026)
   --------------------------------------------------------------------------
   One owner for a rule that was hand-written in nine places: the row the
   pointer is on shows its actions, every other row stays quiet.

   The dynamic half is a class on the actions node itself (.is-pointed, set by
   hover_reveal_controller): "at most one" is a rule about all rows together,
   and only something that sees all of them can hold it. `.group:hover` decided
   per row and could not.

   ⚠️ The switch is NOT animated. Rows that stayed lit after the pointer left
   (several at once, until a resize repainted the transcript) were never a
   stale class: the class came off, Safari 26.6 kept the old pixels. Measured
   from a screen recording on 29.08.2026 at 10 frames per second: a row crossed
   in under 100 ms went dark the next frame, a row rested on for 200 ms stayed
   lit. The line between the two is the 150 ms opacity transition this file
   used to declare. WebKit fades opacity on a compositing layer of its own and
   drops that layer when the fade ends; Safari then fails to repaint the patch
   of the scrolling transcript under it, so the row at full opacity stays on
   screen. No transition, no layer, no stale patch. Guard:
   spec/architecture/hover_reveal_no_opacity_transition_guard_spec.rb.

   The static half hides nothing unless .hover-reveal-ready is present, and only
   the controller puts it there. So a page whose JavaScript never ran shows the
   actions instead of hiding affordances behind a hover that will never fire.
   ========================================================================== */

/* Only where there IS a pointer that can hover. Touch has no hover, so the
   actions simply stay visible -- otherwise they would be unreachable.
   ⚠️ hover/pointer, NOT a viewport width: a narrow desktop window and a zoomed
   page both have a mouse (the 29.08.2026 correction that preceded this file). */
/* ⚠️ The actions node must sit INSIDE a marked row to be hidden at all. A list
   that mounts the controller but forgets the row markers is a real mistake to
   make, and without this descendant it would be a silent one of the worst kind:
   the rows would never be marked, so nothing would ever reveal, and the delete
   button would be invisible for good. Written this way the same mistake leaves
   the actions standing, which is merely untidy. */
@media (hover: hover) and (pointer: fine) {
  .hover-reveal-ready
  [data-hover-reveal-target="row"]
  [data-hover-reveal-target="actions"] {
    opacity: 0;
  }

  .hover-reveal-ready
  [data-hover-reveal-target="row"]
  [data-hover-reveal-target="actions"].is-pointed {
    opacity: 1;
  }
}
/* Ticket comment composer (T5, doc/tickets_detail_entschlackt_plan.md).
   The Lexxy toolbar hides behind the "Format" word in the footer - the
   composer opens without it (design mock). Hidden via :not() so the OPEN
   state carries NO override at all: a display: revert here reverted Lexxy's
   own flex layout to the UA default and stacked every toolbar button
   vertically (found live, 03.09.2026). The class is toggled by
   post_composer_controller on the card element. */
.post-composer__card:not(.post-composer--format-open) lexxy-toolbar {
  display: none;
}
/* app/assets/stylesheets/components/markdown_preview.css
 *
 * Neo::MarkdownPreviewComponent: typography for rendered Markdown (LLM answers,
 * pasted transcripts, meeting notes, the ticket summary) plus the optional
 * preview clamp.
 *
 * ONE copy for every Markdown surface that is not a whole documentation page.
 * It replaced .meeting-prose and the two clamp classes (.meeting-transcript--clamped,
 * .analysis-result-clamped) that had grown next to each other in views.css, and it
 * absorbed the ticket summary, which would otherwise have become a fourth
 * near-identical prose block — views.css already carried a note saying the third
 * copy had fired the "unify at the third case" trigger.
 *
 * STILL OUTSIDE: #documentation-page .doc-prose and .help-prose (views.css). Those
 * typeset FULL documentation pages — larger headings, tables, images — and hang on
 * their own page anchors, which several system specs address by name. Folding those
 * two in is the next step in this direction, not this one.
 *
 * NOT anchor-scoped, on purpose: the component renders in the meeting detail, in saved
 * analysis results and in the ticket timeline, and one selector list per
 * surface is exactly the drift this file exists to prevent. The class name carries
 * its own scope. Colors come from the theme token layer so every theme stays
 * readable. No table/img rules: Lalabase::SafeMarkdown emits neither (tables off in
 * the renderer, <img> not on the allowlist).
 */

.md-preview {
  color: rgb(var(--cream-800));
  line-height: 1.65;
}
.md-preview--sm { font-size: 0.875rem; }
.md-preview--md { font-size: 0.9375rem; }
.md-preview h1,
.md-preview h2,
.md-preview h3,
.md-preview h4 {
  font-weight: 700;
  line-height: 1.25;
  color: rgb(var(--cream-900));
  margin: 1.6em 0 0.5em;
}
.md-preview h1 { font-size: 1.5rem; margin-top: 0; }
.md-preview h2 { font-size: 1.25rem; }
.md-preview h3 { font-size: 1.1rem; }
/* An LLM answer very often opens with a heading. Left as is, its 1.6em top margin
   pushes the first line away from the label above it and the block reads as if it
   had lost its anchor. Only the FIRST child is reset — headings further down keep
   the air that separates the sections. */
.md-preview > :first-child { margin-top: 0; }
.md-preview p { margin: 0.75em 0; }
.md-preview ul,
.md-preview ol { margin: 0.75em 0; padding-left: 1.5em; }
.md-preview ul { list-style: disc; }
.md-preview ol { list-style: decimal; }
.md-preview li { margin: 0.25em 0; }
.md-preview a { color: rgb(var(--info)); text-decoration: underline; }
.md-preview code {
  background: rgb(var(--cream-200));
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}
/* Code blocks stay fixed dark-on-light in every theme (same as .doc-prose). */
.md-preview pre {
  background: #1a1712;
  color: #f3efe6;
  border: 1px solid rgb(var(--cream-300));
  border-radius: 8px;
  padding: 1em;
  overflow-x: auto;
  margin: 1em 0;
}
.md-preview pre code { background: transparent; padding: 0; color: inherit; }
.md-preview blockquote {
  border-left: 3px solid rgb(var(--cream-300));
  padding-left: 1em;
  color: rgb(var(--cream-600));
  margin: 1em 0;
}
.md-preview hr { border: 0; border-top: 1px solid rgb(var(--cream-300)); margin: 1.5em 0; }

/* The preview clamp. Added and removed at runtime by clamp_toggle_controller, which
   receives the class name from the component (Stimulus classes API) — so the
   controller stays content-agnostic and this file owns the height.
   Kept in the DOM (max-height, not display:none) so in-page search still reaches the
   hidden lines. The mask fades the last of them, so the cut reads as "there is more"
   rather than as a hard crop. */
.md-preview--clamped {
  max-height: 8rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
/* :tall — for a long raw document (the meeting transcript) where a five-line peek
   would say nothing about what is in there. Two classes on purpose: the height only
   means something while the block is actually clamped. */
.md-preview--clamp-tall.md-preview--clamped { max-height: 15rem; }
/* The filter bar (NeoFilterBarComponent), doc/filterleiste_s5_s8_plan.md S8.
 *
 * Rule 7 of the Belegungstabelle: narrow, nothing is invented and nothing is
 * shrunk; things are left out or moved. The bar measures its OWN width
 * (container query), so the same rules hold in a narrow window, in the kanban
 * frame and on a phone. Every hook is a marker of the bar's own markup
 * (data-filter-bar-target, data-condition, data-value-tile, data-fb-*), never a
 * Tailwind utility, so the classes the JavaScript builds stay untouched. Every
 * rule is prefixed with .filter-bar: the bar's own utilities have the same
 * specificity and load later, so a bare attribute selector would lose. */

/* Scoped to the mounted controller, not to the bare .filter-bar class. It was
   written this way to keep the (now deleted) legacy copy, which carried the
   same class, from becoming a container; it stays because it says plainly
   which element the container queries below are measured against. */
.filter-bar[data-controller="filter-bar"],
.filter-bar[data-controller="neo-activity-filter"] {
  container-type: inline-size;
  container-name: filter-bar;
}

/* The search is a magnifier, not an open field (designer, 09.09.2026): 28 x 28
   at every width, and a click grows it into a field at the right end of the
   row; a term already typed keeps it open. The rule this file applied to
   tight containers only now holds everywhere: the size follows the frequency,
   not the room. Searching is a rare act and must not be the largest element
   of the tool group (it was 240px, a quarter of the row). */
.filter-bar [data-fb-search]:not([data-fb-search-open]) {
  width: 28px;
  flex: none;
}

.filter-bar [data-fb-search]:not([data-fb-search-open]) input,
.filter-bar [data-fb-search]:not([data-fb-search-open]) [data-fb-depth] {
  display: none;
}

.filter-bar [data-fb-search][data-fb-search-open] [data-fb-search-open-button] {
  display: none;
}

.filter-bar [data-fb-search][data-fb-search-open] {
  width: 15rem;
  flex: 0 1 15rem;
  min-width: 0;
}

/* The funnel that stands for "+ Filter" tight; at full width the word and its
   plus stand, so the sign does not exist there. */
.filter-bar [data-fb-add] [data-fb-add-sign] {
  display: none;
}

/* The search wrapper animates its WIDTH and nothing else: transition-all would
   carry flex-basis and height of the tight fold through half-states too, and a
   control in mid-transition lands somewhere neither state ever puts it. */
.filter-bar [data-fb-search] {
  transition-property: width;
}

/* A proposal row under an empty condition row: the row above it is hidden, so
   the proposal's top edge would double the tab row's bottom edge (F27: one line). */
.filter-bar [data-filter-bar-target="chipRow"].hidden + [data-filter-bar-target="proposalRow"] > [data-proposal]:first-child {
  border-top: 0;
}

/* TIGHT_WIDTH is 760 px: the head has its tabs and its tools, but no room to
   spell them out. That is the ticket list with the detail lane open - the list
   track is minmax(380px, 2fr) against the lane's 3fr, so on any desk that can
   show two columns at all it lands between 380 and ~700 px, while the same
   list without the lane is the whole content width and stays above 760. The
   rule is the WIDTH, though, not the lane: a narrow window with no lane open
   gets the same head, for the same reason.
   What yields here: "+ Filter" folds to its funnel, and the column tool makes
   way while the search is open. The search is a magnifier at every width
   already (top of this file), the column tool a sign at every width. Nothing
   is shrunk and nothing is cut (rule 7 of the Belegungstabelle); every word
   lives on in title/aria-label. */
@container filter-bar (max-width: 760px) {
  /* (No order rules any more: the three tools are one group with ms-auto at
     every width since 07.09.2026, so the right end is where they already are.) */

  /* "+ Filter" folds to its funnel (D2 of doc/kanban_ticket_als_bahn_plan.md,
     09.09.2026). It was left OUT here before (user, 07.09.2026): the tight
     head was the list beside an open lane, where the reader is at one object,
     not sorting the register. The board with an open ticket is not a ticket
     detail: one keeps picking there, so one must keep narrowing down, and
     this is the ONLY entry to a first condition. So the word and its plus go
     and the sign stands in their place, 32 px like the magnifier and the
     column tool beside it (F40: one row, one size); the word moves into the
     title with the count, "Filter · 2 Bedingungen", which the controller
     keeps current. Rule 7 holds: nothing is shrunk, nothing is cut. */
  .filter-bar [data-fb-add] {
    width: 2rem;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
  }

  .filter-bar [data-fb-add] [data-fb-add-plus],
  .filter-bar [data-fb-add] [data-fb-add-label] {
    display: none;
  }

  .filter-bar [data-fb-add] [data-fb-add-sign] {
    display: inline;
  }

  /* F35 tight, OPEN: the column tool makes way while the field is open - one
     errand at a time, and typing is the errand. The field opens at the SAME
     place, the right end of this row (it used to take a line of its own above
     the tabs, user, 07.09.2026), and may shrink below its width where the tabs
     need the room; the strip scrolls, so nothing is hidden and nothing is cut.
     The fold itself, magnifier at rest and field on click, is no longer
     tight-only: it holds at every width, see the top of this file. */
  .filter-bar [data-fb-search][data-fb-search-open] ~ [data-fb-view-tool] {
    display: none;
  }
}

/* NARROW_WIDTH is 520 px: a phone, where a thumb and not a pointer is doing
   the work. The knowledge list's column rule (views.css, #knowledge_results)
   folds at the same width; change both together. */
@container filter-bar (max-width: 520px) {
  /* No rule for "+ Filter" here: the tight band above (760px, which contains
     this one) has folded it to its funnel already, and a sign has nothing
     left to fold. */

  /* A thumb needs 32 px. The pill is 32 px at every width since F13 went
     passive, so only two things still grow here: the tab's chevron and the
     close in the head of a layer (F20), whose sign stays small. */
  .filter-bar [data-filter-bar-target="viewMenuButton"] {
    min-width: 2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    justify-content: center;
  }

  .filter-bar [data-fb-close] {
    height: 2rem;
    width: 2rem;
  }

  /* The words that act (F4) in the rename form and the proposal row keep
     their form and gain a thumb's height */
  .filter-bar [data-fb-word] {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
  }

  /* Every floating layer (F29) spans the bar instead of hanging at its
     element; the JS sets left inline, hence !important. */
  .filter-bar [data-filter-bar-target="filterMenu"],
  .filter-bar [data-filter-bar-target="valueMenu"],
  .filter-bar [data-filter-bar-target="viewMenu"],
  .filter-bar [data-filter-bar-target="searchDepthMenu"] {
    left: 0.5rem !important;
    right: 0.5rem;
    width: auto;
  }

  /* The save row and the proposal row stack: the sentence on its own line,
     the decisions below it */
  .filter-bar [data-fb-sentence] {
    flex-basis: 100%;
    margin-right: 0;
  }
}
/* The column picker (Neo::ColumnPickerComponent), doc/spaltenwahl_plan.md S2.
 *
 * Docked as a grid track next to the list while no detail is open (F30, a
 * tinted surface without shadow); floating over the detail while one is open
 * (F29, soft shadow: it closes again), so the list keeps its width and the
 * boundary line stays true while the reader is still choosing. The grid rules
 * for both placements sit in layout.css next to the other two-column variants;
 * this file is the panel's inside. Colours are tokens only (rule 6 of the
 * Belegungstabelle): the panel is cream-100, its rows cream-200 on hover, the
 * boundary line cream-400, static text cream-600. Rows are F37, the boundary
 * F38, the trigger in the table header F39. */
.column-picker {
  box-sizing: border-box;
  width: 268px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: rgb(var(--cream-100));
  overflow-y: auto;
}

.column-picker[hidden] {
  display: none;
}

/* The slide (see layout.css, "The panel slides in"): the panel starts a
   little to the right and transparent, and eases into place. */
.column-picker {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.column-picker-entering > .column-picker {
  transform: translateX(24px);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .column-picker,
  .layout.two-column {
    transition: none;
  }
}

.column-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.column-picker__list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}

/* F37: the whole row is the grip. 32 px tall, the tick and the name bound to
   the row's height; no box of its own, the line below (F27) separates. */
.column-picker__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0 0.25rem;
  border-bottom: 1px solid rgb(var(--cream-200));
  border-radius: 0.25rem;
  cursor: grab;
}

.column-picker__row:hover,
.column-picker__row--chosen,
.column-picker__row--ghost {
  background: rgb(var(--cream-200));
}

.column-picker__row--chosen {
  cursor: grabbing;
  box-shadow: 0 4px 6px -1px rgb(var(--ink) / 0.15);
}

.column-picker__row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgb(var(--ink));
}

/* The row has TWO hit areas (designer, 07.09.2026): the left one decides
   whether the column is shown, the right one only what happens to it when the
   width runs out. One shared target would mean a miss on the pin switches the
   whole column off. */
.column-picker__zone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 8px 0 0 8px;
}

.column-picker__row:hover .column-picker__zone {
  background: rgb(var(--white) / 0.55);
}

.column-picker__pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  align-self: stretch;
  flex: none;
  border: 0;
  border-left: 1px solid rgb(var(--cream-300));
  border-radius: 0 8px 8px 0;
  background: transparent;
  /* Very quiet at rest: an offer, not a state. It is the only thing in the
     panel that is louder once it has been used. */
  color: rgb(var(--cream-400));
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.column-picker__pin:hover,
.column-picker__pin:focus-visible {
  color: rgb(var(--cream-900));
  background: rgb(var(--white) / 0.55);
  outline: none;
}

.column-picker__pin[aria-pressed="true"] {
  color: rgb(var(--cream-900));
}

/* Filled means pinned, outline means "could be". Both signs are in the markup and
   aria-pressed picks the one that shows, so the state lives in ONE attribute and the
   script repaints nothing. The fixed rows carry the filled sign alone: they ARE
   pinned, they simply cannot be anything else. */
.column-picker__pin .bi {
  font-size: 13px;
  line-height: 1;
}

.column-picker__pin[aria-pressed="true"] .column-picker__pin-icon--off,
.column-picker__pin:not([aria-pressed="true"]) .column-picker__pin-icon--on {
  display: none;
}

/* Unticked: no sign, because the question is not asked - a column that is not
   shown cannot fail to fit. visibility, not display: the row keeps its shape,
   so ticking a box does not make the list jump, and a hidden sign is out of the
   tab order either way. */
.column-picker__row:has(.column-picker__check:not(:checked)) .column-picker__pin {
  visibility: hidden;
}

/* Number and title: pinned by definition. No hover, no focus, nothing to
   press - the caption in the title says why. */
.column-picker__pin--fixed {
  color: rgb(var(--cream-500));
  cursor: default;
}

.column-picker__grip {
  color: rgb(var(--cream-500));
  font-size: 10px;
  line-height: 1;
}

/* The tick: the time list's box (TimeSessionsHelper::TIME_LIST_CHECKBOX_CLASSES,
   forms plugin); only its place in the row is set here. */
.column-picker__check {
  flex: none;
  margin: 0;
  cursor: pointer;
}

.column-picker__label {
  flex: 1;
  font-size: 0.875rem;
  color: rgb(var(--cream-700));
  cursor: pointer;
  user-select: none;
}

.column-picker__check:checked + .column-picker__label {
  color: rgb(var(--cream-900));
}

/* A tick the reader may not take: number and title (fixed rows), and every
   row of a read-only shared view. Grey box, grey word, nothing reacts. */
.column-picker__check:disabled {
  opacity: 0.55;
  cursor: default;
}

.column-picker__check:disabled + .column-picker__label {
  color: rgb(var(--cream-600));
  cursor: default;
}

/* Number and title: fixed rows at the top. Ticked and grey, no grip (an empty
   slot keeps the ticks in line), no hover, and the word "immer" on the right
   says why nothing here reacts. */
.column-picker__grip--none {
  width: 0.5rem;
}

.column-picker__row--fixed {
  cursor: default;
}

.column-picker__row--fixed:hover {
  background: transparent;
}

.column-picker__always {
  font-size: 11px;
  color: rgb(var(--cream-500));
}

/* F38: a thin line with the sentence on it, between two rows. It moves with
   the width and the order (column_picker_controller#placeBoundary) and is
   hidden while everything fits. */
.column-picker__boundary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.25rem;
  margin: 0.125rem 0;
  list-style: none;
}

.column-picker__boundary::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid rgb(var(--cream-400));
}

.column-picker__boundary > span {
  position: relative;
  padding: 0 0.5rem;
  background: rgb(var(--cream-100));
  font-size: 11px;
  color: rgb(var(--cream-600));
}

.column-picker__boundary[hidden] {
  display: none;
}

/* The footer: which view the list goes into, the status line for a save that
   failed, and the form for the exception ("für alle Ansichten übernehmen"). */
.column-picker__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 12px;
  color: rgb(var(--cream-600));
}

.column-picker__status[hidden] {
  display: none;
}

/* F39: the trigger. Open, it carries the tinted surface. It has no label to
   take away any more (07.09.2026): it is a sign at every width, and the count
   is in its title. The rule that hid the label with the detail open went with
   the label, together with the legacy bar's trigger cell in the table head. */
.column-picker-trigger[aria-expanded="true"] {
  background: rgb(var(--cream-200));
}
/* One row of the sidebar navigation, in ONE place.
 *
 * It used to be a class string written out by hand in five: _navigation_item,
 * _global_search_nav_item, _account_nav_subitem, the assistant button in
 * _navigation_application and NeoSidebarProjectItemComponent. All five carried
 * the same look, and the moment the shell went one step darker every one of
 * them had to be corrected in the same way - which is the signal that a
 * convention was doing a component's job. SidebarNavHelper hands out the
 * classes; this file says what they look like.
 *
 * ⚠️ The active state is a RAISED surface, not a tint, and that follows from
 * the shell: the sidebar is cream-200 now, and the tile used to be cream-200
 * too, so it would have disappeared into its own background. White plus one
 * hairline of shadow - the same move the view switch makes, where the surface
 * one is standing on is the raised one. The ink bar on the left went with the
 * tint: two marks for one state, and the tile carries it alone.
 *
 * Tint stays what it is everywhere else in the app: a STATE (selected row, set
 * filter value, active switch position). That the shell uses the same value is
 * the one exception - there it is chrome, and the state inside it is therefore
 * light. */

.sidebar-row {
  color: rgb(var(--cream-800));
}

.sidebar-row__icon {
  color: rgb(var(--cream-600));
}

/* Clearly weaker than the active tile, or hover reads as "you are here". */
.sidebar-row:hover {
  background-color: rgb(var(--white) / 0.55);
  color: rgb(var(--cream-900));
}

.sidebar-row:focus-visible {
  background-color: rgb(var(--white));
  color: rgb(var(--cream-900));
  outline: 2px solid rgb(var(--ink));
  outline-offset: -2px;
}

.sidebar-row--active,
.sidebar-row--active:hover {
  background-color: rgb(var(--white));
  color: rgb(var(--cream-900));
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(35, 34, 30, 0.1);
}

.sidebar-row--active .sidebar-row__icon {
  color: rgb(var(--cream-900));
}
.mobile-page-head, .mobile-bottom-bar { display: none; }
.mobile-search-field { display: flex; align-items: center; gap: 12px; border: 1px solid rgb(var(--cream-300)); border-radius: 10px; padding: 12px; margin: 12px 0; }
.mobile-search-field input { width: 100%; min-width: 0; background: transparent; border: 0; font-size: 16px; }
.mobile-project-list, .mobile-menu-list { list-style: none; padding: 0; margin: 0; }
.mobile-project-list a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 4px; border-bottom: 1px solid rgb(var(--cream-300)); color: rgb(var(--ink)); }
.mobile-project-list .is-current { background: rgb(var(--cream-200)); font-weight: 600; }
.mobile-project-name { flex: 1; overflow-wrap: anywhere; min-width: 0; }
.mobile-project-initials { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; background: rgb(var(--cream-200)); border-radius: 6px; font: 12px monospace; }
.mobile-text-action { display: inline-flex; align-items: center; min-height: 44px; color: rgb(var(--text-action)); }
.mobile-section-label { font-size: 12px; color: rgb(var(--cream-600)); padding: 16px 0 8px; }
.mobile-person { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid rgb(var(--cream-300)); }
.mobile-person > div { flex: 1; }
.mobile-menu-list a, .mobile-menu-list button { display: flex; align-items: center; width: 100%; text-align: start; gap: 16px; min-height: 64px; border-bottom: 1px solid rgb(var(--cream-300)); }
.mobile-sheet { position: fixed; inset: auto 0 0; margin: 0 auto; width: 100%; max-width: 100%; max-height: 85vh; max-height: 85dvh; padding: 16px 20px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: rgb(var(--cream-50)); color: rgb(var(--ink)); border: 1px solid rgb(var(--cream-300)); border-radius: 20px 20px 0 0; }
.mobile-sheet::backdrop { background: rgb(var(--scrim) / .35); }
.mobile-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mobile-sheet-head h2 { font-size: 20px; font-weight: 650; }
.mobile-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; font-size: 20px; border-radius: 9px; }
.mobile-primary { background: rgb(var(--btn-primary)); border: 1px solid rgb(var(--ink)); border-radius: 9px; box-shadow: 2px 2px 0 rgb(var(--ink)); font-weight: 650; }
.mobile-primary:disabled { opacity: .5; }
[hidden].mobile-selection-head, [hidden].mobile-bottom-actions, [hidden].mobile-bottom-links, [hidden].mobile-header { display: none; }
@media screen and (width < 1024px) {
  html:has(dialog.mobile-sheet[open], #assistant_panel[data-assistant-panel-open-value="true"]) { overflow: hidden; }
  body.mobile-app { min-height: 100vh; min-height: 100dvh; }
  .mobile-app > #sidebar { display: none; }
  .mobile-app-screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; min-width: 0; }
  .mobile-app-screen > main { flex: 1; min-width: 0; margin: 0; padding: 0 16px; }
  .mobile-app-screen > main > div { margin-bottom: 0; }
  .mobile-page-head { position: sticky; top: 0; z-index: 30; display: block; min-width: 0; background: rgb(var(--cream-100)); }
  .mobile-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 16px; }
  .mobile-heading { min-width: 0; flex: 1; }
  .mobile-heading h1 { color: rgb(var(--ink)); font-size: 22px; font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; }
  .mobile-heading h1 button { text-align: start; }
  .mobile-heading h1 i { font-size: 12px; }
  .mobile-heading p { font-size: 13px; color: rgb(var(--cream-600)); margin-top: 4px; overflow-wrap: anywhere; }
  .mobile-header-tools { display: flex; align-items: center; flex-shrink: 0; gap: 2px; }
  .mobile-project-tabs { display: flex; gap: 22px; overflow-x: auto; padding: 0 16px; border-bottom: 1px solid rgb(var(--cream-300)); background: rgb(var(--cream-50)); }
  .mobile-project-tabs a { display: flex; align-items: center; min-height: 44px; flex-shrink: 0; font-size: 15px; color: rgb(var(--cream-600)); border-bottom: 2px solid transparent; }
  .mobile-project-tabs [aria-current] { color: rgb(var(--ink)); font-weight: 650; border-color: rgb(var(--ink)); }
  .mobile-bottom-bar { position: sticky; bottom: 0; z-index: 30; display: block; padding-bottom: env(safe-area-inset-bottom); background: rgb(var(--cream-100)); border-top: 1px solid rgb(var(--cream-300)); }
  .mobile-bottom-links { display: flex; height: 52px; }
  .mobile-bottom-links > a { flex: 1; min-width: 44px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; font-size: 10px; color: rgb(var(--cream-600)); }
  .mobile-bottom-links > .is-active { color: rgb(var(--ink)); font-weight: 700; }
  .mobile-nav-icon { position: relative; font-size: 21px; line-height: 25px; }
  /* Colour and shape come from Neo::UnreadMarkerComponent; only the seat on the icon lives here. */
  .mobile-inbox-count { position: absolute; top: -3px; left: 14px; }
  .mobile-bottom-actions { display: flex; height: 52px; padding: 4px 16px; gap: 12px; }
  .mobile-bottom-actions > :first-child { flex: 1; }
  .mobile-selection-head { display: flex; align-items: center; padding: 16px; gap: 12px; }
  .mobile-selection-head > strong { flex: 1; }
  .desktop-mobile-title { display: none; }
  .mobile-destination { padding: 12px 0 24px; }
  #assistant_panel { display: block; }
  #assistant_panel .assistant-panel { inset: auto 0 0; width: 100% !important; height: 85vh; height: 85dvh; border-radius: 20px 20px 0 0; border: 1px solid rgb(var(--cream-300)); padding-bottom: env(safe-area-inset-bottom); overscroll-behavior: contain; }
  #assistant_panel [data-assistant-panel-target="capsule"] { display: none; }
}
@media screen and (min-width: 1024px) {
  body.assistant-panel-open .mobile-app-screen > main { margin-inline-start: var(--assistant-panel-offset, 16rem); }
}
.mobile-tickets { list-style: none; margin: 0; padding: 0; }
.mobile-ticket-row { display: flex; align-items: start; border-bottom: 1px solid rgb(var(--cream-300)); padding: 16px 0; gap: 8px; }
.mobile-ticket-content { flex: 1; min-width: 0; }
.mobile-ticket-title { display: block; color: rgb(var(--ink)); font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.mobile-ticket-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; margin-top: 6px; font-size: 12px; color: rgb(var(--cream-600)); }
.mobile-ticket-meta > * { min-width: 0; overflow-wrap: anywhere; }
.mobile-ticket-status { display: inline-flex; align-items: center; gap: 5px; }
.mobile-ticket-status i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.mobile-ticket-time { margin-left: auto; }
.mobile-ticket-check { display: none; width: 44px; min-height: 44px; align-items: start; justify-content: center; padding-top: 2px; flex-shrink: 0; }
.mobile-ticket-check input { width: 22px; height: 22px; accent-color: rgb(var(--ink)); }
.mobile-selecting .mobile-ticket-check { display: flex; }
.mobile-selecting .selection-ticked { background: rgb(var(--cream-200)); }
.mobile-selecting .mobile-ticket-meta > :not(:first-child) { display: none; }
.mobile-ticket-list [data-ticket-selection-target="row"] { display: none; }
.mobile-list-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font-size: 12px; color: rgb(var(--cream-600)); }
.mobile-list-summary select { background: transparent; border: 0; font-size: 16px; min-height: 44px; padding-right: 20px; }
.mobile-pagination { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 12px; }
.mobile-pagination a { min-height: 44px; display: inline-flex; align-items: center; }
.mobile-empty { padding: 32px 0; }
@media screen and (width < 1024px) {
  .mobile-ticket-list .filter-bar { padding-top: 8px; margin-bottom: 0; }
  .mobile-ticket-list [data-fb-tabrow] { align-items: center; border: 0; flex-wrap: wrap; }
  .mobile-ticket-list [data-filter-bar-target="tabStrip"] { align-items: center; gap: 8px; margin: 0; }
  .mobile-ticket-list [data-filter-bar-target="tabStrip"] > span { border: 1px solid rgb(var(--cream-300)); border-radius: 24px; min-height: 44px; }
  .mobile-ticket-list [data-filter-bar-target="tabStrip"] > span:has([aria-selected="true"]) { order: -1; background: rgb(var(--cream-200)); border-color: rgb(var(--cream-600)); }
  .mobile-ticket-list [data-filter-bar-target="tab"] { border: 0; padding: 8px 12px; }
  .mobile-ticket-list [data-fb-add] { min-width: 44px; height: 44px; }
  .mobile-ticket-list [data-fb-search]:not([data-fb-search-open]) { display: none; }
  .mobile-ticket-list [data-fb-search][data-fb-search-open] { display: flex; width: 100%; }
  .mobile-ticket-list [data-fb-search] input { font-size: 16px; }
  .mobile-ticket-list [data-fb-view-tool] { display: none; }
  .mobile-selecting .mobile-ticket-tools, .mobile-selecting .mobile-list-summary { visibility: hidden; }
  .mobile-ticket-detail { min-width: 0; overflow-wrap: anywhere; }
  /* The standalone mobile detail has its own real link back to the list. */
  .mobile-ticket-detail [data-action="click->layout-toggle#closeContent"] { display: none; }
}
@media screen and (width < 1024px) {
  .mobile-project-tabs { scrollbar-width: none; }
  .mobile-project-tabs::-webkit-scrollbar { display: none; }
  .mobile-app-screen > main { background: rgb(var(--cream-50)); }
  #test-notification-dropdown-mount { display: none; }
}
@media screen and (width < 1024px) {
  .mobile-ticket-list [data-fb-add] { width: auto; padding: 0 12px; border: 1px dashed rgb(var(--cream-400)); border-radius: 24px; }
  .mobile-ticket-list [data-fb-add] [data-fb-add-plus], .mobile-ticket-list [data-fb-add] [data-fb-add-label] { display: inline; }
  .mobile-ticket-list [data-fb-add] [data-fb-add-sign] { display: none; }
}
.mobile-assistant-scrim { display: none; }
@media screen and (width < 1024px) {
  #assistant_panel[data-assistant-panel-open-value="true"] .mobile-assistant-scrim { display: block; position: fixed; inset: 0; background: rgb(var(--scrim) / .35); z-index: 49; }
  #assistant_panel .assistant-panel { z-index: 50; }
  /* A restored desktop full view still uses one readable lane on a phone.
     Keep its state intact so widening the viewport restores the desktop lanes. */
  #assistant_panel .assistant-lanes { grid-template-columns: minmax(0, 1fr); }
  #assistant_panel .assistant-lane-history,
  #assistant_panel [data-assistant-panel-target="expandButton"],
  #assistant_panel [data-assistant-panel-target="collapseButton"],
  #assistant_panel [data-assistant-panel-target="resizeHandle"] { display: none; }
  #assistant_panel [data-assistant-panel-target="historyButton"] { display: flex; }
  #assistant_panel .assistant-panel--full.assistant-panel--artefact .assistant-lane-chat { display: none; }
  #assistant_panel .assistant-panel--full.assistant-panel--artefact .assistant-lane-artefact { min-width: 0; border-inline-start: 0; }
}

@media screen and (width < 1024px) {
  .mobile-app-screen { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); padding-top: env(safe-area-inset-top); }
}
/*





















 */

mark {
  background-color: yellow;
  color: inherit; /* Keeps the text color */
}

/* No focus ring on a field (user, 09.09.2026). A text field matches :focus-visible
   even when it was never touched by the keyboard, so the magnifier in the filter
   bar — which focuses the field for you (filter_bar_controller#openSearch) — lit
   up a 2px ink outline around the pill on a plain mouse click.

   The `focus:outline-none` the fields already carry does not settle it. Measured
   on the running app: the utility resolves to `outline: transparent solid 2px`,
   yet the focused field computes `rgb(var(--ink)) solid 2px` at offset 2px. No
   author rule in the bundle sets that colour; where it enters was not pinned
   down, so the rule below works at the outline itself and carries !important.

   Fields only — input, textarea, select and the contenteditable editors. Buttons,
   links, cards and the kanban tiles keep the themed ring of §19.7: those are
   reached BY keyboard, where the ring is the only thing saying where you are. A
   field says it with its caret instead. */
:where(input, textarea, select, [contenteditable="true"]):focus,
:where(input, textarea, select, [contenteditable="true"]):focus-visible {
  outline: none !important;
}

/* Spacing between the tag label and the remove button — used by NeoTagComponent
   and tag_input_controller.js (Slim-Select values) */
.tag-text {
  margin-right: 0.25rem;
}

/* Timeline items (Posts/Activities/TimeSessions) in the lazy frame:
   stagger-fade from top to bottom once the frame has loaded its content.
   fill-mode backwards, NOT both/forwards: the to-frame ends on
   transform: translateY(0), and a forwards fill pins that identity transform
   on every frame child FOREVER. A transform creates a stacking context, and
   the first frame child is the "Verlauf" header line with the filter
   dropdown - its z-indexed menu got trapped in that context, so every later
   sibling painted (and clicked!) straight through it (found live 04.09.).
   backwards keeps the stagger (hidden during the delay) and lets the base
   state (no transform) return after the run - same trap as the .column
   slide-in documented in layout.css ("Any non-none transform"). */
.posts-container > turbo-frame > * {
  animation: timeline-item-fade-in 0.25s ease-out backwards;
}
.posts-container > turbo-frame > *:nth-child(1) { animation-delay: 0ms; }
.posts-container > turbo-frame > *:nth-child(2) { animation-delay: 75ms; }
.posts-container > turbo-frame > *:nth-child(3) { animation-delay: 150ms; }
.posts-container > turbo-frame > *:nth-child(4) { animation-delay: 225ms; }
.posts-container > turbo-frame > *:nth-child(5) { animation-delay: 300ms; }
.posts-container > turbo-frame > *:nth-child(6) { animation-delay: 375ms; }
.posts-container > turbo-frame > *:nth-child(7) { animation-delay: 450ms; }
.posts-container > turbo-frame > *:nth-child(8) { animation-delay: 525ms; }
.posts-container > turbo-frame > *:nth-child(n+9) { animation-delay: 600ms; }

@keyframes timeline-item-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Two-phase reveal of the buttons below the timeline (via reveal-after-frame
   controller): emerge with reduced saturation + offset, then settle into the
   full Neo Brutalist look. */
.timeline-secondary-reveal {
  animation:
    timeline-secondary-emerge 0.4s ease-out 0.6s both,
    timeline-secondary-settle 0.3s ease-out 1.0s both;
}

@keyframes timeline-secondary-emerge {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.94);
    filter: saturate(0.3);
  }
  to {
    opacity: 1;
    transform: translateY(-2px) scale(0.98);
    filter: saturate(0.7);
  }
}

@keyframes timeline-secondary-settle {
  from {
    transform: translateY(-2px) scale(0.98);
    filter: saturate(0.7);
  }
  to {
    transform: translateY(0) scale(1);
    filter: saturate(1);
  }
}

/* Turbo 8 View Transitions: cross-fade when navigating between same-origin
   pages (e.g. list ↔ detail). Enabled via <meta name="view-transition">. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}