/*
 * The preferences menu (shared/_preferences_menu.html.erb): a native
 * <details> dropdown with the language, colour mode and theme, and "Sair"
 * for signed-in users. The same groups
 * (shared/_preferences.html.erb) also appear on the Settings page.
 */
.preferences-menu {
  position: relative;

  > summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--line);

    &::-webkit-details-marker { display: none; }
    &:hover { box-shadow: inset 0 0 0 1.5px var(--muted); }

    svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  }

  > .panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    width: max-content;
    max-width: min(320px, calc(100vw - 32px));
    padding: 16px;
    border-radius: 12px;
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--line), 0 18px 40px -20px rgba(0, 0, 0, .45);
  }
}

.preferences {
  display: grid;
  gap: 14px;

  fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
  legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

  .options { display: flex; flex-wrap: wrap; gap: 6px; }
  form { margin: 0; }

  button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--line);
    cursor: pointer;

    &:hover { box-shadow: inset 0 0 0 1px var(--muted); }

    /* The current choice */
    &:disabled { background: var(--ink); color: var(--paper); box-shadow: none; cursor: default; }
  }

  /* "Reduzir animações" (shared/_motion_switch) is a switch, not a pill */
  .switch, .switch:hover { padding: 2px 0; border-radius: 0; box-shadow: none; background: none; font-weight: 600; }

  .swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; }
  .swatch-ameixa { background: #8250DF; }
  .swatch-vinho { background: #8F2747; }
}

/* Configurações and "Sair", at the bottom of the menu */
.preferences-menu .settings-link { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 4px 6px; border-top: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--ink); border-radius: 0; }
.preferences-menu .settings-link:hover { text-decoration: none; color: var(--accent); }
.preferences-menu .settings-link + .sign-out-form { margin-top: 2px; padding-top: 0; border-top: 0; }
.preferences-menu > summary[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--accent); }
.preferences-menu .sign-out-form { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.preferences-menu .sign-out {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 4px; border: 0; background: transparent; box-shadow: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-radius: 8px;

  &:hover { color: var(--ink); background: var(--soft-bg); }
}