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

  [data-lexxy-decorator][draggable] {
    cursor: grab;
  }

  [data-lexxy-decorator].lexxy-dragging {
    opacity: 0.4;
  }

  .lexxy-drop-caret {
    background-color: var(--lexxy-focus-ring-color);
    border-radius: 1px;
    inline-size: 2px;
    pointer-events: none;
    position: fixed;
  }

  [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[data-anchored]) {
  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%;
      }
    }
  }
}
/* Generic split pill ("Button mit Dropdown daneben", the universal control
   concept): a bordered chip whose label segment optionally acts as primary
   action and whose caret segment behind the divider opens a context menu.
   Generalized from the mail thread's attachment chip
   (communication-thread__attachment). Rendered by Common::ActionChipComponent. */

.action-chip {
  display: inline-flex;
  align-items: stretch;
  border: var(--tblr-border-width) solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary, #f8fafc);
  font-size: 0.8125rem;
  /* NO overflow: hidden — it would clip the absolutely positioned dropdown
     menu. The segments round their own outer corners instead. */
}

.action-chip__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  color: inherit;
  border-radius: calc(var(--tblr-border-radius) - var(--tblr-border-width)) 0 0
                 calc(var(--tblr-border-radius) - var(--tblr-border-width));
}

a.action-chip__label:hover {
  background: var(--tblr-active-bg);
  color: inherit;
  text-decoration: none;
}

.action-chip__label .icon {
  width: 1rem;
  height: 1rem;
}

.action-chip__caret {
  display: inline-flex;
  align-items: center;
  padding: 0 0.3rem;
  border: 0;
  border-left: var(--tblr-border-width) solid var(--tblr-border-color);
  background: transparent;
  color: var(--tblr-secondary);
  cursor: pointer;
  border-radius: 0 calc(var(--tblr-border-radius) - var(--tblr-border-width))
                 calc(var(--tblr-border-radius) - var(--tblr-border-width)) 0;
}

.action-chip__caret:hover {
  background: var(--tblr-active-bg);
  color: var(--tblr-body-color);
}

.action-chip__caret .icon {
  width: 0.9rem;
  height: 0.9rem;
}
/* App-wide modal shell (native <dialog> + Tabler look) — content is whatever
   the "modal" Turbo Frame loads, typically a form card. */

.app-modal {
  border: 0;
  border-radius: var(--tblr-border-radius-lg, 8px);
  padding: 0;
  width: min(720px, calc(100vw - 2rem));
  /* visible on purpose: the dialog lives in the top layer, so dropdowns
     (TomSelect role/search pickers) may paint past the dialog edge instead
     of being clipped. Modal content is expected to stay compact — introduce
     an inner scroll region if that ever changes. */
  overflow: visible;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
}

.app-modal[open] {
  animation: app-modal-pop 0.16s ease-out;
}

@keyframes app-modal-pop {
  from {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
  }
}

.app-modal::backdrop {
  background: rgba(24, 36, 51, 0.4);
}

/* Loaded content arrives without its .card parent (Turbo extracts only the
   frame), so Tabler's card variables — and with them the card-body padding —
   are gone. The frame owns the inner spacing instead. */
.app-modal turbo-frame {
  display: block;
  padding: 1.5rem;
}

.app-modal .card,
.app-modal .card-body {
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.app-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
}

/* Dense content (e.g. the file picker) needs less chrome around the card. */
.app-modal turbo-frame:has(.attachment-picker) {
  padding: 0.75rem;
}

.app-modal .attachment-picker .card-header {
  /* Right inset keeps the view toggle clear of the dialog's × button. */
  padding: 0.5rem 2.25rem 0.75rem 0;
}

.app-modal .attachment-picker .card-footer {
  padding: 0.75rem 0 0 0;
  background: transparent;
}
/* Claim::AssigneeBubbleComponent — the caseworker avatar in the claim
 * header. Assigned: initials on a light primary tint. Unassigned: dashed
 * placeholder inviting a click. */
.app-assignee-bubble {
  /* Same footprint as the neighboring ghost icon buttons in the header. */
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.8rem;
  background: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.12);
  color: var(--tblr-primary, #206bc4);
  border: 0;
  font-weight: 600;
  cursor: pointer;
}

.app-assignee-bubble .icon {
  width: 1.1rem;
  height: 1.1rem;
}

button.app-assignee-bubble:hover {
  background: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.2);
}

.app-assignee-bubble--empty {
  background: transparent;
  color: var(--tblr-secondary, #667382);
  border: 1px dashed var(--tblr-border-color, #dadcde);
}

button.app-assignee-bubble--empty:hover {
  color: var(--tblr-primary, #206bc4);
  border-color: var(--tblr-primary, #206bc4);
  background: transparent;
}
/* The payout's recipient bank details as a stylish "bank card" / transfer slip
   (US-11) — what the handler pastes into the banking tool. Self-contained colors
   so it looks the same in light and dark themes. */
.bank-statement {
  position: relative;
  overflow: hidden;
  max-width: 36rem;
  padding: 1.5rem 1.75rem;
  border-radius: 1rem;
  color: #f8fafc;
  background: linear-gradient(135deg, #1e293b 0%, #0f766e 100%);
  box-shadow: 0 14px 34px -14px rgba(15, 23, 42, 0.55);
}

/* Soft light orb for a bit of card flair. */
.bank-statement::after {
  content: "";
  position: absolute;
  top: -4rem;
  right: -3rem;
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.13), transparent 70%);
  pointer-events: none;
}

.bank-statement__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.bank-statement__row {
  position: relative;
  z-index: 1;
  margin-bottom: 1.1rem;
}

.bank-statement__label {
  margin-bottom: 0.15rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

.bank-statement__value {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.bank-statement__iban {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.bank-statement__amount {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
}

.bank-statement__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.bank-statement__copy {
  display: inline-flex;
  padding: 0.1rem 0.4rem;
  border: 0;
  border-radius: 0.4rem;
  color: inherit;
  background: rgba(255, 255, 255, 0.16);
  opacity: 0.85;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.bank-statement__copy:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.3);
}
/* Companion styles for the generic clipboard Stimulus controller: give the
   `done` target the clipboard-copied class and the confirmation (e.g. a
   green check) pops in when the text hits the clipboard. */

/* The state spans wrap icons inside the trigger (often a .btn-icon) — as
   inline boxes they'd sit on the text baseline and knock the icon off
   center. */
[data-clipboard-target="idle"],
[data-clipboard-target="done"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@keyframes clipboard-copied-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}

.clipboard-copied {
  animation: clipboard-copied-pop 0.18s ease-out;
}

[data-clipboard-target="idle"].d-none,
[data-clipboard-target="done"].d-none {
  display: none;
}
/* Common::CollapseCardComponent — the toggle (chevron + header) carries the
 * header padding itself (the surrounding .card-header is p-0) so its whole
 * surface is clickable, while the actions area at the right edge stays outside
 * the toggle and remains independently clickable. Bootstrap toggles
 * `.collapsed` on the trigger; when open (not collapsed) the chevron flips to
 * point up. */
.collapse-card__toggle {
  cursor: pointer;
  padding: var(--tblr-card-cap-padding-y, 0.75rem) var(--tblr-card-cap-padding-x, 1.25rem);
  transition: background-color 0.15s ease;
}

.collapse-card__toggle:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.collapse-card__toggle .collapse-card__chevron {
  transition: transform 0.2s ease;
}

/* Collapsed points right, open points down (PO convention). */
.collapse-card__toggle.collapsed .collapse-card__chevron {
  transform: rotate(-90deg);
}

.collapse-card__actions {
  padding-right: var(--tblr-card-cap-padding-x, 1.25rem);
}
/* The Colorable color bubble (Common::ColorBubbleComponent): a round color
   marker before page titles and in list rows, plus the recolor swatches in
   its dropdown. */
.app-color-bubble {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  vertical-align: middle;
}

button.app-color-bubble:hover {
  box-shadow: 0 0 0 2px var(--tblr-border-color);
}

.app-color-bubble--sm {
  width: 0.625rem;
  height: 0.625rem;
}

/* Fixed-width slot in list rows: reserves the small bubble's footprint so
   row titles stay aligned whether or not a record carries a color. */
.app-color-bubble-slot {
  display: inline-block;
  width: 0.625rem;
  margin-right: 0.25rem;
}

.app-color-bubble--empty {
  background: transparent;
  border: var(--tblr-border-width) dashed var(--tblr-gray-400, var(--tblr-border-color));
}

.app-color-swatch {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
}

.app-color-swatch:hover {
  box-shadow: 0 0 0 2px var(--tblr-border-color);
}

.app-color-swatch--active {
  box-shadow: 0 0 0 2px var(--tblr-primary);
}
/* The Colorable palette (Colorable::COLORS): twelve hues evenly spaced
   around the HSL color wheel in 30° steps. Each key class only sets the hue
   custom property; the fill classes below derive the solid styling (bubbles,
   swatches) and the light styling (label badges) from it. */
.app-color-red     { --app-color-hue: 0; }
.app-color-orange  { --app-color-hue: 30; }
.app-color-yellow  { --app-color-hue: 60; }
.app-color-lime    { --app-color-hue: 90; }
.app-color-green   { --app-color-hue: 120; }
.app-color-mint    { --app-color-hue: 150; }
.app-color-cyan    { --app-color-hue: 180; }
.app-color-azure   { --app-color-hue: 210; }
.app-color-blue    { --app-color-hue: 240; }
.app-color-violet  { --app-color-hue: 270; }
.app-color-magenta { --app-color-hue: 300; }
/* Pink sits right next to red on the closed hue wheel (330° vs 0°) — as a
   perceptual "pale rose" it gets a lightness offset to stay clearly apart. */
.app-color-pink    { --app-color-hue: 330; --app-color-light: 78%; }

/* Soft pastel rendition — muted, but saturated enough that neighboring
   hues stay clearly distinguishable. */
.app-color-fill {
  background-color: hsl(var(--app-color-hue) 68% var(--app-color-light, 62%));
}

.badge.app-color-fill-lt {
  background-color: hsl(var(--app-color-hue) 65% 90%);
  color: hsl(var(--app-color-hue) 50% 30%);
}
/* Communication tab (AP4): mail-client split view — list pane + reading pane.
   The panes own the scrolling; long HTML mail scrolls inside its sandboxed
   iframe (no autosize by design, see AP4 plan E2). */

.communication-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--tblr-bg-surface);
  border: var(--tblr-border-width) solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
}

.communication-split {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 0.75rem;
  height: calc(100vh - 21rem);
  min-height: 28rem;
}

.communication-split > turbo-frame {
  display: block;
  min-height: 0;
  height: 100%;
}

.communication-list {
  height: 100%;
  overflow-y: auto;
  background: var(--tblr-bg-surface);
  border: var(--tblr-border-width) solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
}

.communication-list__item {
  display: block;
  padding: 0.65rem 0.75rem;
  border-bottom: var(--tblr-border-width) solid var(--tblr-border-color-light);
  color: inherit;
  text-decoration: none;
}

.communication-list__item:hover {
  background: var(--tblr-active-bg);
  /* Tabler's global a:hover underline wins the hover state otherwise. */
  text-decoration: none;
}

.communication-list__item--selected {
  background: var(--tblr-active-bg);
  box-shadow: inset 3px 0 0 var(--tblr-primary);
}

.communication-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.communication-list__correspondent {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.communication-list__correspondent .icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.communication-list__time {
  font-size: 0.75rem;
  white-space: nowrap;
}

.communication-list__subject {
  font-size: 0.875rem;
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.communication-list__snippet {
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.communication-list__empty {
  padding: 1.5rem;
  text-align: center;
}

.communication-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--tblr-bg-surface);
  border: var(--tblr-border-width) solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
}

.communication-detail--empty {
  justify-content: center;
}

.communication-detail__header {
  padding: 0.75rem 1rem;
  border-bottom: var(--tblr-border-width) solid var(--tblr-border-color-light);
}

.communication-detail__subject {
  font-size: 1.05rem;
}

.communication-detail__body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.communication-detail__iframe {
  flex: 1;
  width: 100%;
  border: 0;
}

.communication-detail__plain {
  padding: 1rem;
  overflow-y: auto;
  width: 100%;
}

/* Footer action pinned below a multi-select dropdown's options. */
.multi-select__footer {
  border-top: var(--tblr-border-width) solid var(--tblr-border-color-light);
  padding: 0.25rem 0.5rem;
}

/* Compose in the reading pane: give the Lexxy content area room to type. */
.communication-compose lexxy-editor .lexxy-editor__content,
.communication-compose lexxy-editor [contenteditable="true"] {
  min-height: 12rem;
}

.communication-detail__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-top: var(--tblr-border-width) solid var(--tblr-border-color-light);
}

@media (max-width: 991px) {
  .communication-split {
    grid-template-columns: 1fr;
    height: auto;
  }

  .communication-list {
    max-height: 20rem;
  }

  .communication-detail__body {
    min-height: 24rem;
  }
}

/* Conversation thread pane (threads plan T5, revised): each mail is its own
   collapsible card (same pattern as the notes feed) on the panel background —
   no card-in-card nesting; the reply composer is a card of its own on top. */

.communication-thread {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.communication-thread__composer-row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.communication-thread__composer-editor {
  flex: 1;
  min-width: 0;
}

.communication-thread__composer-editor lexxy-editor .lexxy-editor__content,
.communication-thread__composer-editor lexxy-editor [contenteditable="true"] {
  min-height: 3.5rem;
  max-height: 14rem;
  overflow-y: auto;
}

.communication-thread__composer-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.communication-thread__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.communication-thread__card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.communication-thread__addresses {
  display: grid;
  gap: 0.1rem;
  padding-bottom: 0.6rem;
  border-bottom: var(--tblr-border-width) solid var(--tblr-border-color-light);
}

.communication-thread__address-label {
  display: inline-block;
  min-width: 3.5rem;
  font-weight: 500;
}

.communication-thread__plain p:last-child {
  margin-bottom: 0;
}

.communication-thread__iframe {
  width: 100%;
  min-height: 8rem;
  border: 0;
}

.communication-thread__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.6rem;
  border-top: var(--tblr-border-width) solid var(--tblr-border-color-light);
}

.communication-thread__attachment {
  display: inline-flex;
  align-items: stretch;
}

/* Clone-field split pill: label opens the file, the caret segment behind
   the divider opens the context menu. */
.communication-thread__attachment {
  border: var(--tblr-border-width) solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary, #f8fafc);
  font-size: 0.8125rem;
  /* NO overflow: hidden — it would clip the absolutely positioned dropdown
     menu. The segments round their own outer corners instead. */
}

.communication-thread__attachment-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  color: inherit;
  border-radius: calc(var(--tblr-border-radius) - var(--tblr-border-width)) 0 0
                 calc(var(--tblr-border-radius) - var(--tblr-border-width));
}

.communication-thread__attachment-label:hover {
  background: var(--tblr-active-bg);
  color: inherit;
  text-decoration: none;
}

.communication-thread__attachment-label .icon {
  width: 1rem;
  height: 1rem;
}

.communication-thread__attachment-caret {
  display: inline-flex;
  align-items: center;
  padding: 0 0.3rem;
  border: 0;
  border-left: var(--tblr-border-width) solid var(--tblr-border-color);
  background: transparent;
  color: var(--tblr-secondary);
  cursor: pointer;
  border-radius: 0 calc(var(--tblr-border-radius) - var(--tblr-border-width))
                 calc(var(--tblr-border-radius) - var(--tblr-border-width)) 0;
}

.communication-thread__attachment-caret:hover {
  background: var(--tblr-active-bg);
  color: var(--tblr-body-color);
}

.communication-thread__attachment-caret .icon {
  width: 0.9rem;
  height: 0.9rem;
}

/* Form-request chip in the mail footer (Epic 14, path 3): the same pill look as
   an attachment, but a single link to the Schadenmeldung tab (no split menu). */
.communication-thread__form-request {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border: var(--tblr-border-width) solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary, #f8fafc);
  font-size: 0.8125rem;
  color: inherit;
}

.communication-thread__form-request:hover {
  background: var(--tblr-active-bg);
  color: inherit;
  text-decoration: none;
}

.communication-thread__form-request .icon {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--tblr-secondary, #667382);
}

/* The stripped mail toolbar lives OUTSIDE <lexxy-editor> (id-referenced,
   rendered before it — see _mail_toolbar.html.erb). Lexxy scopes its button
   reset and the --lexxy-toolbar-* variables to the editor element, so an
   external toolbar falls back to UA-styled gray pill buttons. Replicate the
   missing pieces here and visually dock the bar onto the editor box below. */
.mail-toolbar {
  --lexxy-toolbar-gap: 2px;
  --lexxy-toolbar-spacing: 0.5ch;

  background: var(--tblr-bg-surface, #fff);
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-block-end: 0;
  border-start-start-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
  border-start-end-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
}

.mail-toolbar button,
.mail-toolbar a.lexxy-editor__toolbar-button {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: inherit;
  line-height: normal;
  padding: 0;
}

.mail-toolbar .lexxy-editor__toolbar-button:hover:not([aria-disabled="true"]) {
  background-color: var(--lexxy-color-selected, #e5e7eb);
}

/* The editor field docks below the bar: square its top corners. */
lexxy-editor.mail-editor {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

/* Tabler (stroke-based) icons vs. Lexxy's fill-based icon CSS: restore the
   stroke rendering, scoped to this toolbar. */
.mail-toolbar .lexxy-editor__toolbar-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Explicit: anchors don't inherit Lexxy's button icon sizing reliably. */
  width: 1.125em;
  height: 1.125em;
}

/* Claim-file picker modal (generic): checkable tiles/rows. */
.attachment-picker__body {
  max-height: 60vh;
  overflow-y: auto;
}

.attachment-picker__tile {
  cursor: pointer;
  position: relative;
  height: 100%;
  margin: 0;
}

/* Selection reads as state, not as a focused button: tinted surface and a
   colored edge instead of an outline ring. */
.attachment-picker__tile:has(input:checked) {
  border-color: var(--tblr-primary);
  background-color: var(--tblr-primary-lt, #ecf3fc);
}

/* Chrome focuses the checkbox on label click — the Bootstrap focus glow
   stays reserved for actual keyboard focus. */
.attachment-picker input[name="selected[]"]:focus:not(:focus-visible) {
  box-shadow: none;
  border-color: var(--tblr-border-color);
}

.attachment-picker__tile-check {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
}

.attachment-picker__tile-preview {
  height: 7rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tblr-bg-surface-secondary, #f8fafc);
  border-radius: var(--tblr-border-radius) var(--tblr-border-radius) 0 0;
}

.attachment-picker__tile-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Selection chips under the composer (server-rendered by the picker). */
.attachment-selection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Clone-field-style pill (like .communication-address): label segment plus
   the remove button behind a divider. */
.attachment-selection__chip {
  display: inline-flex;
  align-items: stretch;
  border: var(--tblr-border-width) solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary, #f8fafc);
  font-size: 0.8125rem;
  overflow: hidden;
}

.attachment-selection__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
}

.attachment-selection__label .icon {
  width: 1rem;
  height: 1rem;
}

.attachment-selection__remove {
  display: inline-flex;
  align-items: center;
  padding: 0 0.35rem;
  border: 0;
  border-left: var(--tblr-border-width) solid var(--tblr-border-color);
  background: transparent;
  color: var(--tblr-secondary);
  cursor: pointer;
}

.attachment-selection__remove:hover {
  background: var(--tblr-active-bg);
  color: var(--tblr-danger);
}

.attachment-selection__remove .icon {
  width: 0.9rem;
  height: 0.9rem;
}

/* The claim address as one copyable pill: value + integrated copy button. */
.communication-address {
  display: inline-flex;
  align-items: stretch;
  border: var(--tblr-border-width) solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary, #f8fafc);
  overflow: hidden;
}

.communication-address__value {
  background: transparent;
  padding: 0.25rem 0.5rem;
}

.communication-address__copy {
  display: inline-flex;
  align-items: center;
  padding: 0 0.4rem;
  border: 0;
  border-left: var(--tblr-border-width) solid var(--tblr-border-color);
  background: transparent;
  color: var(--tblr-secondary);
  cursor: pointer;
}

.communication-address__copy:hover {
  background: var(--tblr-active-bg);
  color: var(--tblr-body-color);
}

.communication-address__copy .icon {
  width: 1rem;
  height: 1rem;
}

.communication-thread__bulk-ack {
  display: flex;
  justify-content: flex-end;
  padding: 0.25rem 0;
}

/* Acknowledgement signature: assignee-style mini bubble at the card's right
   edge; details live in the hover title. */
.communication-thread__ack-signature {
  background: var(--tblr-secondary-lt, #e9ecef);
  color: var(--tblr-secondary);
  font-size: 0.625rem;
  cursor: default;
}

/* Sender-assignment modal: icon-led intro, then the fields with room. */
.sender-assignment__intro {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.sender-assignment__intro .avatar {
  flex: none;
}

.sender-assignment__intro code {
  font-size: 0.8125rem;
}

/* Action row inside the modal body: a top border separates it, no grey band,
   flush with the field padding, nothing sticking out at the bottom. */
.sender-assignment__actions {
  display: flex;
  align-items: center;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: var(--tblr-border-width) solid var(--tblr-border-color-light);
}

/* Visible recipient summary above the inline composer. */
.communication-thread__recipients {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.communication-thread__recipients-summary {
  flex: 1;
  min-width: 0;
}

/* Compact, info-rich thread picker in the assign/re-home modal. */
.communication-assign-threads {
  max-height: 22rem;
  overflow-y: auto;
  gap: 0;
}

.communication-assign-thread .form-selectgroup-label {
  display: block;
  text-align: left;
  padding: 0.4rem 0.65rem;
  min-height: 0;
}

.communication-assign-thread__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.communication-assign-thread__head .text-truncate {
  min-width: 0;
}

.communication-assign-thread__head .flex-none {
  flex: none;
}

.communication-assign-thread__meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

/* The inline composer is prefilled, so SimpleForm marks its fields
   'is-valid' — green border + checkmark that look out of place for an
   untouched form. Neutralize the valid-state chrome here (incl. the
   TomSelect control that inherits the class). */
.communication-thread__composer .form-control.is-valid,
.communication-thread__composer .form-select.is-valid,
.communication-thread__composer .is-valid .ts-control,
.communication-thread__composer .ts-control.is-valid {
  border-color: var(--tblr-border-color);
  background-image: none;
  padding-right: 0.75rem;
}

.communication-thread__composer .form-control.is-valid:focus,
.communication-thread__composer .form-select.is-valid:focus {
  border-color: var(--tblr-primary);
  box-shadow: none;
}

/* Inline pool-mail sighting in the inbox list. */
.inbox-row { cursor: pointer; }
.inbox-row[aria-expanded="true"] { background: var(--tblr-active-bg); }
.inbox-row__detail > td { border-top: 0; }
.inbox-row__detail-body { padding: 0.5rem 1rem 1rem; background: var(--tblr-bg-surface-secondary, #f8fafc); }
/* The coverage checklist ("Prüfpunkte") reads as a list, not a banner:
   cap the line measure so long check texts wrap early instead of running
   all the way to the card edge. */
.coverage-checklist {
  max-width: 72ch;
}
/* Common::EmptyStateComponent — the icon floats in a tinted circle and bobs
 * gently like a boat on calm water. Purely decorative; disabled for users
 * who prefer reduced motion. */
.app-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--tblr-bg-surface-secondary, #f1f3f5);
  color: var(--tblr-secondary, #667382);
  animation: app-empty-bob 4s ease-in-out infinite;
}

.app-empty__icon .icon {
  width: 2.25rem;
  height: 2.25rem;
}

@keyframes app-empty-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-0.35rem) rotate(1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .app-empty__icon {
    animation: none;
  }
}
/* Floating info card (hovercard Stimulus controller), e.g. over @-mention
   chips in claim notes. */
.app-hovercard {
  position: fixed;
  z-index: 1070;
  min-width: 240px;
  max-width: 320px;
  padding: 0.75rem;
  background: #fff;
  border: var(--tblr-border-width, 1px) solid var(--tblr-border-color, #e6e7e9);
  border-radius: var(--tblr-border-radius, 4px);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15);
  font-size: 0.875rem;
}
/* Inline editing on list cells (inline-edit Stimulus controller).
 *
 * Empty values render as a small dashed "add" box — one click opens the
 * picker; hovering lifts it with a soft primary tint. Filled editable cells
 * only hint on hover (double-click changes the value). */
.app-inline-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 1.625rem;
  padding: 0 0.5rem;
  border: 1px dashed var(--tblr-border-color, #dadcde);
  border-radius: 6px;
  background: transparent;
  color: var(--tblr-secondary, #64748b);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease,
              background-color 0.15s ease, box-shadow 0.15s ease;
}

.app-inline-add:hover,
.app-inline-add:focus-visible {
  border-color: rgba(var(--tblr-primary-rgb), 0.5);
  color: var(--tblr-primary, #2563eb);
  background-color: rgba(var(--tblr-primary-rgb), 0.06);
  box-shadow: 0 0 0 2px rgba(var(--tblr-primary-rgb), 0.08);
}

.app-inline-add .icon {
  width: 1rem;
  height: 1rem;
}

/* A filled, double-click-editable cell hints its interactivity on hover. */
.app-inline-editable:hover {
  background-color: rgba(var(--tblr-primary-rgb), 0.04);
  cursor: context-menu;
}
/* The Lexxy @-mention popup, sized for file names instead of the gem's
   narrow 20ch default. The gem styles everything through zero-specificity
   :where() rules, so these plain selectors override cleanly — the popup is
   entirely ours: row content comes from our prompt-item menu templates,
   the container from this file. */
.lexxy-prompt-menu {
  --lexxy-prompt-padding: 0.75ch;

  min-inline-size: 32ch;
  max-inline-size: min(56ch, 90vw);
  max-block-size: 40vh;
  overflow-y: auto;
  /* No top padding: a sticky group header sits flush at the top, otherwise
     items scroll through the padding strip above it. No inline padding either:
     the <ul> default `padding-inline-start` (list indent) otherwise pushes every
     row ~24px off the left box edge — rows carry their own edge padding. */
  padding-top: 0;
  padding-inline: 0;
  font-size: 0.875rem;
  border: var(--tblr-border-width, 1px) solid var(--tblr-border-color, #e6e7e9);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* One file per line: keep long names readable via ellipsis instead of
   wrapping them over three rows. */
.lexxy-prompt-menu__item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-block: 0.5ch;
}

.lexxy-prompt-menu .mention-row {
  display: flex;
  align-items: center;
  gap: 0.5ch;
  min-width: 0;
}

.lexxy-prompt-menu .mention-row__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Form-request option: one tight line — icon + name + an "ANFRAGE" tag that
   marks it as a request (a fill-in link), without the airy per-row hint. */
.form-request-row__icon {
  display: inline-flex;
  flex: none;
  color: var(--tblr-primary, #066fd1);
}

.form-request-row__icon svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.form-request-row__tag {
  flex: none;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tblr-primary, #066fd1);
  background: var(--tblr-primary-lt, #e7f1fb);
  border-radius: var(--tblr-border-radius, 4px);
  padding: 0 0.5ch;
  line-height: 1.5;
}

/* Group header injected by the prompt-groups controller — not an option, so
   Lexxy's keyboard nav skips it; sticky so the type stays visible on scroll.
   Separation between groups is a border (part of the box, painted with the
   background) rather than a margin, so nothing peeks through above the header
   while it is stuck. */
.lexxy-prompt-menu__header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.4ch var(--lexxy-prompt-padding, 0.75ch);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--tblr-secondary, #667382);
  background: var(--tblr-bg-surface, #fff);
  list-style: none;
}

.lexxy-prompt-menu__header:not(:first-child) {
  border-top: var(--tblr-border-width, 1px) solid var(--tblr-border-color, #e6e7e9);
}

/* Mention chip: a subtle pill that reads as part of the text — a light
   neutral fill with the normal body text colour, not a loud primary badge. */
/* a.mention-chip (0,1,1) outweighs Tabler's .badge (0,1,0) so our colours win
   regardless of stylesheet order; the badge var keeps Tabler's own rule in
   sync too. */
a.mention-chip {
  --tblr-badge-color: var(--tblr-body-color, #1d273b);
  background-color: var(--tblr-bg-surface-secondary, #f4f6fa);
  color: var(--tblr-body-color, #1d273b);
  border: var(--tblr-border-width, 1px) solid var(--tblr-border-color, #e6e7e9);
  font-weight: 500;
  text-decoration: none;
}

a.mention-chip .icon {
  color: var(--tblr-secondary, #667382);
}

a.mention-chip:hover {
  background-color: var(--tblr-border-color, #e6e7e9);
  color: var(--tblr-body-color, #1d273b);
}

/* Selected in the editor: keep it subtle (a touch darker + Lexical's outline
   ring shows selection). Neutralize the native text selection so it does not
   paint a loud colour over the pill. */
lexxy-editor .node--selected .mention-chip {
  background-color: var(--tblr-border-color, #e6e7e9);
}

lexxy-editor .mention-chip::selection,
lexxy-editor .mention-chip *::selection {
  background-color: transparent;
  color: inherit;
}

/* Form-request mention in the mail editor: the same subtle pill, but a plain
   editable anchor (the composer materialises it into a real link on send). */
a.form-request-mention {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: var(--tblr-border-radius, 4px);
  background-color: var(--tblr-bg-surface-secondary, #f4f6fa);
  color: var(--tblr-body-color, #1d273b);
  border: var(--tblr-border-width, 1px) solid var(--tblr-border-color, #e6e7e9);
  font-weight: 500;
  text-decoration: none;
}
/* Backend page headline (Page::SimpleComponent → Tabler's .page-title):
 * bold and confident instead of Tabler's quiet default, but restrained —
 * the text carries only a hint of primary at its end, and underneath runs
 * a razor-thin blue→cyan accent line with a faint glow. Sleek and a bit
 * futuristic, not loud. Purely visual; the element stays a plain <h2>. */
.page-title {
  position: relative;
  padding-bottom: 0.5rem;
  font-size: 1.6rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
  background-image: linear-gradient(115deg, var(--tblr-body-color, #182433) 70%, var(--tblr-primary, #2563eb) 115%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The accent: a 2px hairline with one gentle sweep, fading from primary
 * through cyan into nothing — a light streak, not a border. The curve is a
 * solid-stroke SVG used as a MASK over a plain CSS gradient (an internal
 * SVG <linearGradient> reference doesn't resolve in a CSS background); the
 * glow is a drop-shadow so it follows the curve. */
.page-title::after {
  content: "";
  position: absolute;
  left: 0.05rem;
  bottom: 0;
  width: 7rem;
  height: 0.5rem;
  background-image: linear-gradient(90deg, var(--tblr-primary, #2563eb), #22d3ee 55%, transparent);
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='8' viewBox='0 0 112 8'%3E%3Cpath d='M1 6 C 18 6 30 2 56 2 S 96 6 111 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='8' viewBox='0 0 112 8'%3E%3Cpath d='M1 6 C 18 6 30 2 56 2 S 96 6 111 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: drop-shadow(0 1px 4px rgba(34, 211, 238, 0.45));
}
/* The payments tab's history rail: a vertical line left of the feed that
   strings payout cards and reserve events into one visible chronology. Each
   entry hangs on an icon bubble (the entry's icon moved out of the card
   head), and a small caret points from the card back to its bubble. Colors
   ride on Tabler variables, so both themes come for free. */

.payment-timeline {
  position: relative;
  padding-left: 2.5rem;
}

.payment-timeline::before {
  content: "";
  position: absolute;
  left: 0.875rem;
  top: 1.25rem;
  bottom: 1.5rem;
  width: 2px;
  border-radius: 1px;
  background: var(--tblr-border-color, #dce1e7);
}

.payment-timeline-item {
  position: relative;
}

.payment-timeline-item + .payment-timeline-item {
  margin-top: 1.5rem;
}

/* The icon bubble: centered on the rail, at the card's header line. */
.payment-timeline-marker {
  position: absolute;
  left: -2.5rem;
  top: 0.75rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tblr-bg-surface, #fff);
  border: 1px solid var(--tblr-border-color, #dce1e7);
  color: var(--tblr-secondary, #667382);
}

.payment-timeline-marker .icon {
  width: 1rem;
  height: 1rem;
}

/* Payouts are the acts — their bubble speaks in the accent color. */
.payment-timeline-item-payout .payment-timeline-marker {
  color: var(--tblr-primary, #206bc4);
  border-color: var(--tblr-primary, #206bc4);
}

/* A small caret pointing from each card back to its bubble — two stacked
   triangles (border color behind, card background in front) so the arrow
   carries the card's outline. Centered on the bubble's midline. */
.payment-timeline-item > .card,
.payment-timeline-item > turbo-frame > .card {
  position: relative;
}

.payment-timeline-item > .card::before,
.payment-timeline-item > turbo-frame > .card::before,
.payment-timeline-item > .card::after,
.payment-timeline-item > turbo-frame > .card::after {
  content: "";
  position: absolute;
  top: 1.25rem;
  width: 0;
  height: 0;
  border: 0.375rem solid transparent;
  border-left-width: 0;
}

.payment-timeline-item > .card::before,
.payment-timeline-item > turbo-frame > .card::before {
  left: -0.375rem;
  border-right-color: var(--tblr-border-color, #dce1e7);
}

.payment-timeline-item > .card::after,
.payment-timeline-item > turbo-frame > .card::after {
  left: calc(-0.375rem + 1.5px);
  border-right-color: var(--tblr-card-bg, var(--tblr-bg-surface, #fff));
}

/* Statement cards carry a tinted event header — their caret sits at header
   height, so its fill matches the tint instead of the card body. */
.payment-timeline-item-statement > .card::after,
.payment-timeline-item-statement > turbo-frame > .card::after {
  border-right-color: var(--tblr-primary-lt, #dbe9f8);
}

/* The thin balance note above a statement card — and the marker/caret shift
   down past it so they keep pointing at the card's header line. */
.payment-balance-note {
  margin-bottom: 0.25rem;
}

/* The unfolded split below the note — free-standing, no card chrome, full
   feed width so the legend stays on one line. */
.payment-balance-breakdown {
  padding: 0.25rem 0 0.5rem;
}

.payment-timeline-item-statement .payment-timeline-marker {
  top: 2.5rem;
}

.payment-timeline-item-statement > .card::before,
.payment-timeline-item-statement > .card::after {
  top: 1.1875rem;
}

/* The balance toggle's chevron flips while the breakdown is open. */
.payment-statement-toggle .icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.15s ease;
}

.payment-statement-toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

/* Header of standalone payout cards — the quiet grey sibling of the tinted
   balance head. */
.payment-pending-head {
  background: var(--tblr-bg-surface-secondary, #f6f8fb);
}



/* Focus filter: the unselected entry kind dims instead of hiding — context
   stays visible. A deduction is BOTH payout and reserve movement, so it
   stays lit under either focus. */
.payment-timeline-item {
  transition: opacity 0.15s ease;
}

.payment-timeline-filter-reserve .payment-timeline-item-pending,
.payment-timeline-filter-payouts .payment-timeline-item-reserve:not(.payment-timeline-item-payout) {
  opacity: 0.35;
}
/* The payout receipt ("Quittung") in the payments tab's side column: a
   slip-styled card — dashed rules between sections and a sawtooth bottom
   edge, like a shop receipt. Colors ride on Tabler variables. */

.payout-receipt {
  position: relative;
  width: 16rem;
  max-width: 100%;
  padding: 0.75rem 1rem 0.5rem;
  background: var(--tblr-bg-surface-secondary, #f6f8fb);
  border: 1px solid var(--tblr-border-color, #dce1e7);
  border-bottom: 0;
  border-radius: var(--tblr-card-border-radius, 4px) var(--tblr-card-border-radius, 4px) 0 0;
  margin-bottom: 0.5rem;
}

/* Sawtooth bottom edge: a card-colored band with circular notches. */
.payout-receipt::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.5rem;
  background-image: radial-gradient(circle at 0.5rem 0, transparent 0.34rem, var(--tblr-bg-surface-secondary, #f6f8fb) 0.36rem);
  background-size: 1rem 0.5rem;
  background-repeat: repeat-x;
}

.payout-receipt-rule {
  border-top: 1px dashed var(--tblr-border-color, #dce1e7);
  margin: 0.75rem 0;
}

.payout-receipt-line + .payout-receipt-line {
  margin-top: 0.25rem;
}
/* The small (i) next to a reserve category's name (reserve card): an admin-
   maintained description shown as a hover tooltip. Shrinks the Tabler icon
   to text size so it sits inline with the name. */

.reserve-bucket-info {
  cursor: help;
}

.reserve-bucket-info .icon {
  width: 1rem;
  height: 1rem;
  /* Sit on the text baseline like an inline glyph instead of riding high. */
  vertical-align: -0.125em;
}
/* Claims-hub search bar (backend/claims/index): one elevated white toolbar
 * above the folder tabs — free-text field, filter segments and actions read
 * as a SINGLE control, not a row of form fields. Fields inside are
 * borderless; separation comes from hairline dividers, active filters are
 * tinted primary so the current narrowing is visible at a glance, and the
 * whole bar lights up with a soft primary ring while any field has focus. */
.app-search-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: var(--tblr-bg-surface, #ffffff);
  border: var(--tblr-border-width, 1px) solid var(--tblr-border-color, #dadcde);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(24, 36, 51, 0.07), 0 10px 24px -16px rgba(24, 36, 51, 0.2);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-search-bar:focus-within {
  border-color: rgba(var(--tblr-primary-rgb), 0.4);
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.1), 0 10px 24px -16px rgba(24, 36, 51, 0.2);
}

/* The free-text segment grows to fill the bar; the <label> wrapper makes
 * the icon and all whitespace around the input click-to-focus. */
.app-search-bar-query {
  flex: 1 1 16rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0 0.5rem;
  color: var(--tblr-secondary, #64748b);
  cursor: text;
}

.app-search-bar-query .form-control {
  border: 0;
  background: transparent;
  padding: 0.35rem 0;
  font-size: 0.95rem;
}

.app-search-bar-query .form-control:focus {
  box-shadow: none;
}

/* The "press Enter" affordance — free text deliberately submits on Enter,
 * not while typing (a mid-typing Turbo visit would reset the field). */
.app-search-bar-hint {
  padding: 0.1rem 0.4rem;
  border: var(--tblr-border-width, 1px) solid var(--tblr-border-color, #dadcde);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--tblr-bg-surface-secondary, #f6f8fb);
  color: var(--tblr-secondary, #64748b);
  font-size: 0.7rem;
  line-height: 1.2;
}

/* Filter selects: quiet until they carry a value. background-color only —
 * Tabler's .form-select caret is a background-image the shorthand would kill. */
.app-search-bar .app-search-bar-select {
  width: auto;
  border: 0;
  background-color: transparent;
  border-radius: 6px;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  color: var(--tblr-secondary, #64748b);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-search-bar .app-search-bar-select:hover {
  background-color: var(--tblr-bg-surface-secondary, #f6f8fb);
  color: var(--tblr-body-color, #182433);
}

.app-search-bar .app-search-bar-select:focus {
  box-shadow: none;
}

/* The date-range segment mirrors the selects: one quiet unit of icon,
 * label and both borderless date inputs. */
.app-search-bar-dates {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0 0.5rem;
  border-radius: 6px;
  color: var(--tblr-secondary, #64748b);
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-search-bar-dates .icon {
  width: 1.1rem;
  height: 1.1rem;
  margin-right: 0.25rem;
}

.app-search-bar-dates .form-control {
  width: 8.6rem;
  border: 0;
  background: transparent;
  padding: 0.3rem 0.25rem;
  color: inherit;
  font-size: 0.875rem;
}

.app-search-bar-dates .form-control:focus {
  box-shadow: none;
}

/* An engaged filter turns primary — the bar itself shows what narrows the
 * result set, no extra chips needed. */
.app-search-bar .is-active {
  background-color: rgba(var(--tblr-primary-rgb), 0.08);
  color: var(--tblr-primary, #2563eb);
}

.app-search-bar-divider {
  width: 1px;
  align-self: stretch;
  margin: 0.35rem 0.15rem;
  background: var(--tblr-border-color, #dadcde);
}

.app-search-bar-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  padding-left: 0.25rem;
}

.app-search-bar-actions .btn {
  border-radius: 7px;
}
/* Shared tab-strip look (claims hub + claim detail tabs): folder tabs. The
 * strip sits directly on top of the content and overlaps its top border by
 * 1px; the active tab has a transparent bottom edge, so it visibly opens
 * into the content below — switching tabs reads as flipping to the next
 * file. Inactive tabs are recessed (gray) and closed at the bottom. */
.app-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: flex-end;
  padding: 0 0.75rem;
  margin-bottom: -1px;
  position: relative;
  z-index: 2;
}

.app-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border: var(--tblr-border-width, 1px) solid var(--tblr-border-color, #dadcde);
  border-radius: var(--tblr-border-radius-md, 6px) var(--tblr-border-radius-md, 6px) 0 0;
  background: #e3e8ef;
  color: var(--tblr-secondary, #667382);
  font-weight: 500;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.app-tabs .nav-link:hover {
  color: var(--tblr-body-color, #182433);
  background: var(--app-tab-panel-bg);
}

.app-tabs .nav-link.active {
  /* Must match .app-tab-panel's base tone so the open seam stays seamless. */
  background: var(--app-tab-panel-bg);
  color: var(--tblr-body-color, #182433);
  border-bottom-color: transparent;
  /* Depth cue: a faint two-layer shadow that only falls upward/sideways —
   * anything below the tab would draw a line across the open seam into the
   * content card. */
  box-shadow: 0 -1px 2px rgba(24, 36, 51, 0.05), 0 -4px 10px rgba(24, 36, 51, 0.07);
}

/* The surface a tab opens into — the single frame around the whole tab
 * content, so switching tabs clearly swaps everything inside. It is
 * distinctly tinted (gray-blue, like the page background used to be) and
 * carries a faint repeating sailboat pattern, so the pure-white cards
 * inside stand out through real surface contrast — visual hierarchy via
 * tone, not hairlines. */
:root {
  /* Translucent: the body's sailboat pattern (see .app-bg-pattern) shimmers
   * through both the panel and the active tab, which keeps their tones
   * identical and adds depth. */
  --app-tab-panel-bg: #ffffff61;
}

/* The page-wide sailboat wallpaper (applied on the backend <body>): a small
 * faint boat (18px) per dense 36px tile on the default gray page ground. */
.app-bg-pattern {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg transform='translate(9 9) scale(0.75)' fill='none' stroke='%233f5670' stroke-opacity='0.05' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2 -1'/%3E%3Cpath d='M4 18l-1 -3h18l-1 3'/%3E%3Cpath d='M11 12h7l-7 -9v9'/%3E%3Cpath d='M8 7l-2 5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 36px 36px;
}

.app-tab-panel {
  position: relative;
  background-color: var(--app-tab-panel-bg);
  border: var(--tblr-border-width, 1px) solid var(--tblr-border-color, #dadcde);
  border-radius: var(--tblr-border-radius-md, 6px);
  padding: 1rem;
}

.app-tab-panel .card {
  box-shadow: 0 1px 3px rgba(24, 36, 51, 0.07);
}


/* Claim::StateControlComponent — the status pill doubles as the dropdown
 * toggle: no button chrome, just a subtle hover cue on the pill itself. */
.app-state-control {
  border: 0;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.app-state-control:hover {
  filter: brightness(0.95);
}

.app-state-control .icon {
  width: 1rem;
  height: 1rem;
  margin-left: 0.25rem;
}
/* Backend color theme — overrides Tabler's documented CSS custom properties
 * (loaded after the CDN stylesheet, so :root here wins). The default
 * primary (#206bc4) is muted; this shifts it to a slightly crisper, more
 * vivid blue while staying calm and professional. The body ground gets a
 * touch more cool tint so the white surfaces pop a little more.
 * Tabler wires buttons, links, badges, focus states etc. to these variables
 * (e.g. .btn-primary → var(--tblr-primary) / rgba(var(--tblr-primary-rgb),…)),
 * so no component-level overrides are needed. */
:root {
  --tblr-primary: #2563eb;
  --tblr-primary-darken: #1e53cb;
  --tblr-primary-rgb: 37, 99, 235;

  /* Tabler's "blue" palette entry equals primary — keep them in sync so
   * bg-blue-lt badges and friends match the new tone. */
  --tblr-blue: #2563eb;
  --tblr-blue-darken: #1e53cb;
  --tblr-blue-rgb: 37, 99, 235;

  --tblr-link-color: #2563eb;
  --tblr-link-color-rgb: 37, 99, 235;
  --tblr-link-hover-color: #1e53cb;
  --tblr-link-hover-color-rgb: 30, 83, 203;

  /* Secondary/muted shift from Tabler's flat gray (#616876) to a cooler
   * slate that harmonizes with the blue primary — livelier secondary text
   * and controls without losing their muted role. */
  --tblr-secondary: #64748b;
  --tblr-secondary-darken: #57657a;
  --tblr-secondary-rgb: 100, 116, 139;
  --tblr-muted: #64748b;
  --tblr-muted-darken: #57657a;
  --tblr-muted-rgb: 100, 116, 139;

  --tblr-body-bg: #f2f5fb;
}
/* Common::ToastComponent — flash messages as top-right flyovers. The progress
 * bar's CSS animation is the display timer: when it finishes, `animationend`
 * triggers the auto-dismiss Stimulus controller. Hovering pauses the
 * animation (and thereby the timer) — indicator and dismissal stay in sync
 * by construction. */
.app-toast-container {
  position: fixed;
  top: 4.5rem;
  right: 1rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(22rem, calc(100vw - 2rem));
}

.app-toast {
  --app-toast-duration: 6.5s;
  overflow: hidden;
  background: var(--tblr-bg-surface, #fff);
  border: var(--tblr-border-width, 1px) solid var(--tblr-border-color, #e6e7e9);
  border-radius: var(--tblr-border-radius, 4px);
  box-shadow: var(--tblr-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-toast--hiding {
  opacity: 0;
  transform: translateX(0.5rem);
}

.app-toast__body {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
}

.app-toast__icon {
  flex-shrink: 0;
  display: flex;
}

.app-toast__message {
  flex-grow: 1;
  padding-top: 0.1rem;
}

.app-toast__close {
  flex-shrink: 0;
  margin-left: 0.25rem;
}

.app-toast__progress {
  height: 3px;
  width: 100%;
  transform-origin: left;
  animation: app-toast-countdown var(--app-toast-duration) linear forwards;
}

.app-toast:hover .app-toast__progress {
  animation-play-state: paused;
}

@keyframes app-toast-countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *





 */

.navbar {
  --tblr-navbar-border-width: var(--tblr-border-width);
  --tblr-navbar-border-color: var(--tblr-border-color);
  --tblr-navbar-bg: #ffffff;
  box-shadow: inset 0 calc(-1 * var(--tblr-navbar-border-width)) 0 0 var(--tblr-navbar-border-color)
}

.max-width-1000 {
  max-width: 1000px;
}

.btn-ghost-delete {
  --tblr-btn-color: var(--tblr-secondary);
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-color: var(--tblr-danger-fg);
  --tblr-btn-hover-bg: var(--tblr-danger);
  --tblr-btn-hover-border-color: var(--tblr-danger);
  --tblr-btn-active-color: var(--tblr-danger-fg);
  --tblr-btn-active-bg: var(--tblr-danger);
  --tblr-btn-active-border-color: transparent;
  --tblr-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --tblr-btn-disabled-color: var(--tblr-secondary);
  --tblr-btn-disabled-bg: transparent;
  --tblr-btn-disabled-border-color: transparent;
  --tblr-gradient: none;
  --tblr-btn-box-shadow: none;
}

.btn-ghost-action {
  --tblr-btn-color: var(--tblr-secondary);
  --tblr-btn-bg: #d5d6da42;
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-color: var(--tblr-secondary-fg);
  --tblr-btn-hover-bg: var(--tblr-secondary);
  --tblr-btn-hover-border-color: var(--tblr-secondary);
  --tblr-btn-active-color: var(--tblr-secondary-fg);
  --tblr-btn-active-bg: var(--tblr-secondary);
  --tblr-btn-active-border-color: transparent;
  --tblr-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --tblr-btn-disabled-color: var(--tblr-secondary);
  --tblr-btn-disabled-bg: transparent;
  --tblr-btn-disabled-border-color: transparent;
  --tblr-gradient: none;
  --tblr-btn-box-shadow: none;
}

.cursor-pointer {
  cursor: pointer;
}

.inner-shadow {
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.11),
              inset 0 2px 2px rgba(0,0,0,0.11),
              inset 0 3px 3px rgba(0,0,0,0.11);
}

/* TomSelect (searchable selects): solid dropdown that sits above cards. */
.ts-control,
.ts-wrapper.single .ts-control {
  background-color: #fff;
}

.ts-dropdown {
  background-color: #fff;
  border: var(--tblr-border-width) solid var(--tblr-border-color);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  z-index: 1056;
}

.ts-dropdown .optgroup-header {
  background-color: #fff;
  color: var(--tblr-secondary);
  font-weight: 600;
}

.ts-dropdown .option.active,
.ts-dropdown .active {
  background-color: var(--tblr-primary);
  color: #fff;
}