/* Keep Drupal's permission-aware links in a native, keyboard-accessible toggle. */
details.painting-local-tasks.claro-details {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 1030;
  width: 48px;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-brown-600);

  &[open] { width: min(260px, calc(100vw - 40px)); padding-bottom: 60px; }

  > summary.claro-details__summary {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-brown-050);
    border-radius: 50%;
    background: var(--color-brown-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m15 5 4 4M4 20l4-1L20 7a2.8 2.8 0 0 0-4-4L4 15l-1 5h1Z'/%3E%3C/svg%3E") center / 20px no-repeat;
    color: var(--color-white);
    box-shadow: 0 4px 16px #332a2233;
    font-size: 0;
    list-style: none;
    cursor: pointer;

    &::marker { content: ''; }
    &::-webkit-details-marker { display: none; }
    &::before, &::after { display: none; }
    &:hover { background-color: var(--color-brown-600); }
    &:focus-visible { outline: 2px solid var(--color-brown-200); outline-offset: 4px; }
  }

  > .details-wrapper {
    max-height: calc(100dvh - 120px - var(--drupal-displace-offset-top, 0px));
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--color-brown-050);
    border-radius: 10px;
    background: var(--color-white);
    box-shadow: 0 6px 24px #332a2226;
  }

  .tabs-wrapper { display: block; position: static; margin: 0; }
  .tabs { display: flex; flex-direction: column; align-items: stretch; width: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; list-style: none; }
  .tabs__tab { display: block; margin: 0; border: 0; background: transparent; box-shadow: none; font-size: 14px; }
  .tabs__tab::before, .tabs__link::before, .tabs__trigger { display: none; }
  .tabs__link {
    min-height: 44px;
    margin: 0;
    padding: 10px 14px;
    border: 0;
    border-radius: 6px;
    color: var(--color-brown-600);
    font: 500 14px/1.5 var(--font-body);
    text-decoration: none;
    overflow-wrap: anywhere;

    &:hover, &.is-active { color: var(--color-brown-400); background: var(--color-brown-050); }
    &:focus { min-height: 44px; margin: 0; padding: 10px 14px; border: 0; outline: 2px solid var(--color-brown-200); outline-offset: -2px; box-shadow: none; }
  }
}

@media print {
  details.painting-local-tasks { display: none; }
}